在相親原始碼的多人音視訊聊天中插入現場直播的實現方式

在相親原始碼中，為了給使用者提供更便利的交流方式，開發了語音連麥和視訊連麥兩種，今天我們主要來了解一下如何在相親原始碼的多人音視訊聊天中插入現場直播。

首先，我們要知道現場直播是什麼呢？

它是通過流媒體技術來實現實時線上播放

什麼是流媒體呢？

隨著網際網路的迅猛發展與普及以及直播的崛起，我們對音視訊服務的需求越來越高，並催生了流媒體(Streaming Media)技術。

是指將一連串的媒體資料壓縮後，以流的方式在網路中分段傳送，實現在網路上實時傳輸影音以供觀賞的一種技術。

流媒體實際指的是一種新的媒體傳送方式，有聲音流、視訊流、文字流、影像流、動畫流等，而非一種新的媒體。被廣泛用於相親原始碼，對我們的生活產生了深遠的影響

接下來，如何實現聊天呢？

使用 web RTC 等原生方法實現相親原始碼商務音視訊聊天。哈哈，相信大家都沒有那個精力！可以選擇合適的三方服務商進行合作，實現音視訊聊天功能。

引入音視訊相關服務

• 一個鑑權服務 appid前往註冊賬號 => 新建一個專案 => 複製 appid 到你的程式碼中
• 相親原始碼中引入音視訊服務web 端的 RTC sdk 本次使用 js 引入（支援 npm )

<script src="

使用音視訊服務實現相親原始碼多人音視訊

• 初始化音視訊服務

/* 建立本地客戶端 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)

• 停止 線上媒體流

以上便是“如何在相親原始碼的多人音視訊聊天中插入現場直播呢？”的全部內容，希望能對各位開發者有所幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：