今天我就教给大家怎样在我们的聊天中插入现场直播。(本文聊天以多人音视频为例)
它是通过流媒体技术来实现实时在线播放
随着互联网的迅猛发展与普及以及直播的崛起,我们对音视频服务的需求越来越高,并催生了流媒体(Streaming Media)技术。
是指将一连串的媒体数据压缩后,以流的方式在网络中分段传送,实现在网络上实时传输影音以供观赏的一种技术。
流媒体实际指的是一种新的媒体传送方式,有声音流、视频流、文本流、图像流、动画流等,而非一种新的媒体。被广泛用于在线直播、视频点播、远程教育、网络电台等互联网信息服务的方方面面,对我们的生活、工作产生了深远的影响
使用 web RTC 等原生方法实现音视频聊天。哈哈,相信大家都没有那个精力!所以建议使用专业级提供音视频服务的企业—— anyRTC。
anyRTC 提供 web,微信小程序,flutter,ios, android,windows 等平台的 RTC SDK,本文将以 web 端为例,来实现聊天以及插入直播(其它端也可以实现哟)
一个 anyRTC 的鉴权服务 appid
前往 anyRTC 注册账号 => 新建一个项目 => 复制 appid 到你的代码中
项目代码中引入 anyRTC web 端的 RTC sdk
本次使用 js 引入(支持 npm )
<script src="https://ardw.anyrtc.io/sdk/web/ArRTC@latest.js"></script>
/* 创建本地客户端 rtcClient 的实例 */
const rtcClient = ArRTC.createClient({ mode: "live", codec: "h264" });
/* 监听 anyRTC 服务回调 */
// 远端用户发布音视频
rtcClient.on("user-published",async (user, mediaType) => {
// 订阅远端用户发布的音视频轨道
await rtcClient.subscribe(user, mediaType);
if (mediaType === 'video') {
// 播放远端视频到指定窗口
user.videoTrack.play("<ELEMENT_ID>");
} else if (mediaType === 'audio') {
// 播放远端音频
user.audioTrack.play();
}
});
// 远端用户取消发布音视频
rtcClient.on("user-unpublished",async (user, mediaType) => {
// 清除视图
...
});
// 用户加入频道成功
rtcClient.on("user-joined", (user) => {
console.log("用户加入频道" + user.uid);
...
});
// 远端用户离开频道
rtcClient.on("user-left", (user) => {
console.log("远端用户离开频道" + user.uid);
// 清除离开用户的视图
...
});
// 当前在线媒体流状态
rtcClient.on("stream-inject-status", (status, uid, url) => {
// 状态 status
console.log("用户"+ uid +"地址"+ url+"状态"+status);
})
参数 | 含义 | 选择 |
---|---|---|
appid | 复制的 appid | 必填 |
channel | 频道名称(符合限制的字符串) | 必填 |
token | 更安全的鉴权(项目上线建议开启) | 必填(可设为 null) |
uid | 本地用户(符合限制的字符串) | 选填(可以不填,anyRTC 会自动分配) |
rtcClient.join(appid, channel, token, uid).then((uid) => { });
本地采集音视频并发布到频道内进行聊天
// 采集音频
const audioTrack = await ArRTC.createMicrophoneAudioTrack();
// 采集视频
const videoTrack = await ArRTC.createCameraVideoTrack();
rtcClient.publish([videoTrack, audioTrack]);
离开频道
rtcClient.leave();
// 释放音视频采集设备
videoTrack && videoTrack.close();
audioTrack && audioTrack.close();
// 直播地址
const url = "rtmp://58.200.131.2:1935/livetv/hunantv";
// 配置
const injectStreamConfig = {
width: 0,
height: 0,
videoGop: 30,
videoFramerate: 100,
videoBitrate: 3500,
audioSampleRate: 44100,
audioChannels: 1,
};
rtcClient.addInjectStreamUrl(url,injectStreamConfig)
以上便是如何在多人音视频聊天中插入现场直播的介绍,希望能对各位开发者有所帮助。
效果图展示: 实现方式: 前端代码: div class="form-group" label class="font...
今天在测试Email Ticket的时候发现在进行Mark as Read/Unread操作时,请求是通过...
一,网页基础结构: XML/HTML Code 复制内容到剪贴板 html head title 我的第一...
在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯...
先给大家看几个实例的错误分析与解决方案。 1.ERROR 2002 (HY000): Can't connec...
根据此前诸多报道和泄漏,代号为Sun Valley的 Windows 10 21H2 将重新引入 Windo...
Docker 是一个供软件开发人员和系统管理员使用容器构建、运行和与分享应用程序的...
一、为何人工智能(AI)首选Python? 读完这篇文章你就知道了。我们看谷歌的Tensor...
业务分析师的目标之一是用数据讲述完整的故事,提供有关业务如何进行或如何改进...
背景:我司是一家正处于高速发展,目前拥有数百万用户,年销售额近五十亿的社交...