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

清疚 2022-11-17 10:18 171阅读 0赞

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

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

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

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

#### 什么是流媒体呢？ ####

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

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

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

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

使用 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);
    })

*  加入频道

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">含义</th> 
   <th>选择</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">appid</td> 
   <td align="left">复制的 appid</td> 
   <td>必填</td> 
  </tr> 
  <tr> 
   <td align="left">channel</td> 
   <td align="left">频道名称(符合限制的字符串)</td> 
   <td>必填</td> 
  </tr> 
  <tr> 
   <td align="left">token</td> 
   <td align="left">更安全的鉴权(项目上线建议开启)</td> 
   <td>必填(可设为 null)</td> 
  </tr> 
  <tr> 
   <td align="left">uid</td> 
   <td align="left">本地用户(符合限制的字符串)</td> 
   <td>选填（可以不填，anyRTC 会自动分配)</td> 
  </tr> 
 </tbody> 
</table>

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)

*  停止 在线媒体流

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

[Link 1]: https://baike.baidu.com/item/%E8%A7%86%E9%A2%91%E6%B5%81/9392168