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

166 阅读3分钟

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

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

首先,我们要知道现场直播是什么呢?

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

什么是流媒体呢?

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

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