如何在聊天中插入現場直播呢？
今天我就教給大家怎樣在我們的聊天中插入現場直播，（本文聊天以多人音視頻為例）
首先，我們要知道現場直播是什么呢？
它是通過流媒體技術來實作實時在線播放
什么是流媒體呢？
隨著互聯網的迅猛發展與普及以及直播的崛起，我們對音視頻服務的需求越來越高，并催生了流媒體(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)
- 停止 在線媒體流
以上便是如何在多人音視頻聊天中插入現場直播的介紹，希望能對各位開發者有所幫助，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/274429.html
標籤：其他