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

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

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

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

什么是流媒体呢？

随着互联网的迅猛发展与普及以及直播的崛起，我们对音视频服务的需求越来越高，并催生了流媒体(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);
})
  • 加入频道
参数 含义 选择
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)
  • 停止 在线媒体流

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