VUE+WebRTC實作音視頻直播-有解無憂

1 功能簡介

本文將介紹如何快速使用 Vue 實作一個簡單的實時音視頻通話，

相關概念解釋:

ZEGO Express SDK：由 ZEGO 提供的實時音視頻 SDK，能夠為開發者提供便捷接入、高清流暢、多平臺互通、低延遲、高并發的音視頻服務，
推流：把采集階段封包好的音視頻資料流傳輸到 ZEGO 實時音視頻云的程序，
拉流：從 ZEGO 實時音視頻云將已有音視頻資料流進行拉取的程序，

2 前提條件

在實作基本的實時音視頻功能之前，請確保：

已在專案中集成 ZEGO Express SDK，詳情請參考快速開始 - 集成，
已在 ZEGO 控制臺創建專案，申請有效的 AppID 和 AppSign，詳情請參考控制臺 - 專案管理，

3 示例原始碼下載

請參考下載示例原始碼獲取原始碼，

相關原始碼請查看 “/express-demo-web/src/Examples/Framework/Vue” 目錄下的檔案，

4 使用步驟

當前專案使用的 Node 版本為 14.17.3，Vue 版本為 2.4.2，

以用戶 A 拉取用戶 B 的流為例，流程如下圖：

整個推拉流程序的 API 呼叫時序如下圖：

4.1 創建引擎

1. 創建界面

在創建引擎之前，推薦開發者添加以下界面元素，方便實作基本的實時音視頻功能，

本地預覽視窗
遠端視頻視窗
結束按鈕

2. 創建引擎

創建 ZegoExpressEngine 引擎實體，將申請到的 AppID 傳入引數 “appID”，將接入服務器地址傳入引數 “server”，

“server” 為接入服務器地址，獲取方式如下：

登錄 ZEGO 控制臺，
在對應專案下單擊“查看”，
進入“專案配置”界面，在“專案資訊”頁簽的“配置資訊”中，單擊 “ServerSecret” 后面的小眼睛按鈕即可獲取對應的接入服務器地址，

在 “/express-demo-web/src/Examples/Framework/Vue/index.html” 檔案中引入 vue.js，

// 引入 vue.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.4.2/vue.min.js"></script>

初始化實體，

new Vue({
    el:'#page-wrapper',
    data: {
        zg: null
    },
    methods:{
        createZegoExpressEngine() {
            this.zg = new ZegoExpressEngine(appID, server);
        }
    }
})

3. 監聽事件回呼

如果需要注冊回呼，開發者可根據實際需要，實作 ZegoEvent（包含 ZegoRTCEvent 和 ZegoRTMEvent）中的某些方法，創建引擎后可通過呼叫 on 介面設定回呼，

this.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {
        if (reason == ZegoRoomStateChangedReason.Logining) {
            // 登錄中
        } else if (reason == ZegoRoomStateChangedReason.Logined) {
            // 登錄成功
            //只有當房間狀態是登錄成功或重連成功時，推流（startPublishingStream）、拉流（startPlayingStream）才能正常收發音視頻
            //將自己的音視頻流推送到 ZEGO 音視頻云
        } else if (reason == ZegoRoomStateChangedReason.LoginFailed) {
            // 登錄失敗
        } else if (reason == ZegoRoomStateChangedReason.Reconnecting) {
            // 重連中
        } else if (reason == ZegoRoomStateChangedReason.Reconnected) {
            // 重連成功
        } else if (reason == ZegoRoomStateChangedReason.ReconnectFailed) {
            // 重連失敗
        } else if (reason == ZegoRoomStateChangedReason.Kickout) {
            // 被踢出房間
        } else if (reason == ZegoRoomStateChangedReason.Logout) {
            // 登出成功
        } else if (reason == ZegoRoomStateChangedReason.LogoutFailed) {
            // 登出失敗
        }
});

4.2 檢測兼容性

在實作推拉流功能之前，開發者可以呼叫 checkSystemRequirements 介面檢測瀏覽器的兼容性，

SDK 支持的瀏覽器兼容版本，請參考下載示例原始碼中的 “1 準備環境”，

const result = await this.zg.checkSystemRequirements();
// 回傳的 result 為兼容性檢測結果， webRTC 為 true 時表示支持 webRTC，其他屬性含義均可參考介面 API 檔案
console.log(result);
// {
//   webRTC: true,
//   customCapture: true,
//   camera: true,
//   microphone: true,
//   videoCodec: { H264: true, H265: false, VP8: true, VP9: true },
//   screenSharing: true,
//   errInfo: {}
// }

回傳結果的各引數含義，請參考 ZegoCapabilityDetection 介面下的引數描述，

4.3 登錄房間

1. 生成 Token

登錄房間需要用于驗證身份的 Token，獲取方式請參考使用 Token 鑒權，如需快速除錯，可使用控制臺生成臨時 Token，

2. 登錄房間

呼叫 loginRoom 介面，傳入房間 ID 引數 “roomID”、“token” 和用戶引數 “user”，根據實際情況傳入引數 “config”，登錄房間，

在登錄房間之前，請先注冊登錄房間后需要監聽的所有回呼，成功登錄房間后，即可接收相關的回呼，
“roomID”、“userID” 和 “userName” 引數的取值都為自定義，
“roomID” 和 “userID” 都必須唯一，建議開發者將 “userID” 設定為一個有意義的值，可將其與業務賬號系統進行關聯，

// 登錄房間，成功則回傳 true
// userUpdate 設定為 true 會開啟監聽 roomUserUpdate 回呼，默認情況下不會開啟該監聽
const result = await this.zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

3. 監聽登錄房間后的事件回呼

根據實際應用需要，在登錄房間前監聽想要關注的事件通知，比如房間狀態更新、用戶狀態更新、流狀態更新等，

roomStateChanged：房間狀態更新回呼，登錄房間后，當房間連接狀態發生變更（如出現房間斷開、登錄認證失敗等情況），SDK 會通過該回呼通知，
roomUserUpdate：用戶狀態更新回呼，登錄房間后，當房間內有用戶新增或洗掉時，SDK 會通過該回呼通知，

只有呼叫 loginRoom 介面登錄房間時傳入 ZegoRoomConfig 配置，且 “userUpdate” 引數取值為 “true” 時，用戶才能收到 roomUserUpdate 回呼，
roomStreamUpdate：流狀態更新回呼，登錄房間后，當房間內有用戶新推送或洗掉音視頻流時，SDK 會通過該回呼通知，
只有呼叫 loginRoom 介面登錄房間時傳入 ZegoRoomConfig 配置，且 “userUpdate” 引數取值為 “true” 時，用戶才能收到 roomUserUpdate 回呼，
通常情況下，如果某個用戶想要播放其他用戶推送的視頻，可以在收到流狀態更新（新增）的回呼中，呼叫 startPlayingStream 介面拉取遠端推送的音視頻流，

// 房間狀態更新回呼
this.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {
        if (reason == ZegoRoomStateChangedReason.Logining) {
            // 登錄中
        } else if (reason == ZegoRoomStateChangedReason.Logined) {
            // 登錄成功
            //只有當房間狀態是登錄成功或重連成功時，推流（startPublishingStream）、拉流（startPlayingStream）才能正常收發音視頻
            //將自己的音視頻流推送到 ZEGO 音視頻云
        } else if (reason == ZegoRoomStateChangedReason.LoginFailed) {
            // 登錄失敗
        } else if (reason == ZegoRoomStateChangedReason.Reconnecting) {
            // 重連中
        } else if (reason == ZegoRoomStateChangedReason.Reconnected) {
            // 重連成功
        } else if (reason == ZegoRoomStateChangedReason.ReconnectFailed) {
            // 重連失敗
        } else if (reason == ZegoRoomStateChangedReason.Kickout) {
            // 被踢出房間
        } else if (reason == ZegoRoomStateChangedReason.Logout) {
            // 登出成功
        } else if (reason == ZegoRoomStateChangedReason.LogoutFailed) {
            // 登出失敗
        }
});

// 用戶狀態更新回呼
this.zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

// 流狀態更新回呼
this.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // 流新增，開始拉流
    } else if (updateType == 'DELETE') {
        // 流洗掉，停止拉流
    }
});

4.4 推流

1. 創建流

a. 開始推流前需要創建本端的音視頻流，呼叫 createStream 介面，默認會采集攝像頭畫面和麥克風聲音，

呼叫 createStream 介面后，需要等待 ZEGO 服務器回傳流媒體物件才能執行后續操作，

HTML 上創建媒體流播放組件的容器 <div>，

<div id="local-video" style="width: 320px;height: 240px"></div>

創建流后播放媒體流，

// 呼叫 createStream 介面后，需要等待 ZEGO 服務器回傳流媒體物件才能執行后續操作
const localStream = await this.zg.createStream();

// 創建媒體流播放組件
const localView = this.zg.createLocalStreamView(localStream);
// "local-video" 為容器 DOM 元素 ID，
localView.play("local-video", {enableAutoplayDialog:true});

b. 設定音視頻采集引數

可根據需要通過 createStream 介面中的如下屬性設定音視頻相關采集引數，詳情可參考自定義視頻采集：

camera：攝像頭麥克風采集流相關配置
screen：螢屏捕捉采集流相關配置
custom：第三方流采集相關配置

2. 開始推流

呼叫 startPublishingStream 介面，傳入流 ID 引數 “streamID” 和創建流得到的流物件 “localStream”，向遠端用戶發送本端的音視頻流，

“streamID” 引數的取值為自定義，需要在整個 AppID 內全域唯一，
若需要推多條流，則多次呼叫 startPublishingStream 介面即可，需確保每條流的 “streamID” 不相同，

// localStream 為創建流獲取的 MediaStream 物件
this.zg.startPublishingStream(streamID, localStream)

3. 監聽推流后的事件回呼

根據實際應用需要，在推流后監聽想要關注的事件通知，比如推流狀態更新、推流質量等，

publisherStateUpdate：推流狀態更新回呼，呼叫推流介面成功后，當推流狀態發生變更（如出現網路中斷導致推流例外等情況），SDK 在重試推流的同時，會通過該回呼通知，
publishQualityUpdate：推流質量回呼，呼叫推流介面成功后，定時回呼音視頻流質量資料（如解析度、幀率、碼率等），

this.zg.on('publisherStateUpdate', result => {
    // 推流狀態更新回呼
    // ... 
})

this.zg.on('publishQualityUpdate', (streamID, stats) => {
    // 推流質量回呼
    // ... 
})

4.5 拉流

1. 開始拉流

呼叫 startPlayingStream 介面，根據傳入的流 ID 引數 “streamID”，拉取遠端已推送到 ZEGO 服務器的音視頻畫面，

遠端用戶推送的 “streamID” 可以從 roomStreamUpdate 回呼中獲得，

HTML 上創建媒體流播放組件的容器 <div>，

<div id="remote-video" style="width: 320px;height: 240px"></div>

將拉取到遠端流在界面播放，

const remoteStream = await this.zg.startPlayingStream(streamID);

// 創建媒體流播放組件
const remoteView = this.zg.createRemoteStreamView(remoteStream);
remoteView.play("remote-video", {enableAutoplayDialog:true});

“streamID” 需要在整個 AppID 內全域唯一，

2. 監聽拉流后的事件回呼

根據實際應用需要，在拉流后監聽想要關注的事件通知，如拉流狀態變更、拉流質量等，

playerStateUpdate：拉流狀態更新回呼，呼叫拉流介面成功后，當拉流狀態發生變更（如出現網路中斷導致推流例外等情況），SDK 在重試推流的同時，會通過該回呼通知，
playQualityUpdate：拉流質量回呼，呼叫拉流介面成功后，定時回呼音視頻流質量資料（如解析度、幀率、碼率等），

this.zg.on('playerStateUpdate', result => {
    // 拉流狀態更新回呼
    // ...
})

this.zg.on('playQualityUpdate', (streamID,stats) => {
    // 拉流質量回呼
})

4.6 體驗實時音視頻功能

在真機中運行專案，運行成功后，可以看到本端視頻畫面，

為方便體驗，ZEGO 提供了一個 Web 端除錯示例，在該頁面下，輸入相同的 AppID、RoomID，輸入一個不同的 UserID，即可加入同一房間與真機設備互通，當成功開始音視頻通話時，可以聽到遠端的音頻，看到遠端的視頻畫面，

4.7 停止推拉流

1. 停止推流

呼叫 stopPublishingStream 介面停止向遠端用戶發送本端的音視頻流，

this.zg.stopPublishingStream(streamID)

2. 銷毀流

呼叫 destroyStream 介面銷毀創建的流資料，銷毀流后開發需自行銷毀 video（停止采集），

// localStream 是呼叫 createStream 介面獲取的 MediaStream 物件
this.zg.destroyStream(localStream)

3. 停止拉流

呼叫 stopPlayingStream 介面停止拉取遠端推送的音視頻流，

this.zg.stopPlayingStream(streamID)

4.8 退出房間

呼叫 logoutRoom 介面退出房間，

this.zg.logoutRoom(roomID)

獲取更多支持

獲取本文的Demo、開發檔案、技術支持，訪問即構檔案中心
近期有開發規劃的開發者可上即構官網查看，恰逢即構七周年全線音視頻產品1折的優惠，聯系商務獲取RTC產品優惠；

音視頻場景解決方案分享，更多詳情可搜索官網（https://zegoguanwang.datasink.sensorsdata.cn/t/pB）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/499062.html

標籤：其他

上一篇：推薦一款完全開源，功能豐富，界面精美的商城系統

下一篇：maven配置步驟及問題