在多人音视频聊天中插入现场直播

anyRTC开发者

关注

发布于: 2021 年 04 月 09 日

如何在聊天中插入现场直播呢？

今天我就教给大家怎样在我们的聊天中插入现场直播。（本文聊天以多人音视频为例）

首先，我们要知道现场直播是什么呢？

它是通过流媒体技术来实现实时在线播放

什么是流媒体呢？

随着互联网的迅猛发展与普及以及直播的崛起，我们对音视频服务的需求越来越高，并催生了流媒体(Streaming Media)技术。

是指将一连串的媒体数据压缩后，以流的方式在网络中分段传送，实现在网络上实时传输影音以供观赏的一种技术。

流媒体实际指的是一种新的媒体传送方式，有声音流、视频流、文本流、图像流、动画流等，而非一种新的媒体。被广泛用于在线直播、视频点播、远程教育、网络电台等互联网信息服务的方方面面，对我们的生活、工作产生了深远的影响

接下来，如何实现聊天呢？

使用 web RTC 等原生方法实现音视频聊天。哈哈，相信大家都没有那个精力！所以建议使用专业级提供音视频服务的企业—— anyRTC。

anyRTC 提供 web，微信小程序，flutter，ios， android，windows 等平台的 RTC SDK，本文将以 web 端为例，来实现聊天以及插入直播（其它端也可以实现哟）

引入 anyRTC 音视频相关服务

一个 anyRTC 的鉴权服务 appid 前往 anyRTC 注册账号 => 新建一个项目 => 复制 appid 到你的代码中
项目代码中引入 anyRTC web 端的 RTC sdk 本次使用 js 引入（支持 npm )

<script src="https://ardw.anyrtc.io/sdk/web/ArRTC@latest.js"></script>

使用 anyRTC 实现多人音视频

初始化 anyRTC 服务

/* 创建本地客户端 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);})

复制代码

加入频道

 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)

复制代码

停止在线媒体流

以上便是如何在多人音视频聊天中插入现场直播的介绍，希望能对各位开发者有所帮助。

发布于: 2021 年 04 月 09 日阅读数: 31

anyRTC开发者

关注

实时交互，万物互联! 2020.08.10 加入

实时交互，万物互联，全球实时互动云服务商领跑者！

评论 (1 条评论)

发布

Healer

写的很详细，收藏了！

2021 年 04 月 09 日 14:27

 0 回复

没有更多了

创作场景

在多人音视频聊天中插入现场直播

如何在聊天中插入现场直播呢？

首先，我们要知道现场直播是什么呢？

什么是流媒体呢？

接下来，如何实现聊天呢？

引入 anyRTC 音视频相关服务

使用 anyRTC 实现多人音视频

插入现场直播

anyRTC开发者

评论 (1 条评论)