Web音視頻通話解決方案 —— Agora Web SDK NG 版接入教程

引言

隨著社會的發展，人們對實時音視頻的需求越來越多，在線會議，電商直播，在線教育等相關產品不斷涌現，但是對于個人開發者或者小團隊來說，自己實作一個實時音視頻服務并且要保障服務穩定，滿足低延時等要求，難度非常大，為此我們需要尋找一個合適的解決方案，功能強大且可靠的聲網Agora就成為了極佳的選擇，

今年聲網推出了下一代 Agora Web SDK (Agora Web SDK NG)，基于 TypeScript 開發，使用 Promise 來管理異步操作，靈活易用，今天我就來分享一下如何快速接入該SDK并實作一些簡單的實時音視頻通話，

前期準備

首先我們需要注冊一個聲網賬號(注冊地址)，注冊成功后會進入控制臺，完成實名認證，在左側進入專案管理頁面，開始創建專案：

輸入專案名稱，選擇鑒權機制，為了專案安全性考慮，這里推薦使用安全模式，提交后進入專案資訊頁面，記錄一下AppID和證書我們之后在代碼中會用到，由于我們選擇了安全模式，在使用SDK時我們需要生成token，在本地開發除錯時可以在專案資訊頁面下方點擊生成臨時token，然后拷貝到代碼中使用，

在專案發布時，可以參考檔案和官方倉庫撰寫對應的token生成代碼，部署到自己的服務器上通過呼叫介面的形式來獲取token，

新建專案并集成SDK

前期準備作業已經完成，大家根據自己的實際情況來新建一個web專案，完成后，我們開始通過npm安裝SDK，

npm install agora-rtc-sdk-ng --save

你也可以通過script標簽的形式引入SDK，

<script src="https://download.agora.io/sdk/web/AgoraRTC_N-4.1.0.js"></script>
<!-- or -->
<script src="./AgoraRTC_N-4.1.0.js"></script>

之后我們只需要在專案代碼中引入agora-rtc-sdk-ng就可以直接使用了，

import AgoraRTC from "agora-rtc-sdk-ng";

實作基礎的1對1視頻通話

現在我們開始來按步驟實作基礎的1對1視頻通話，

1. 創建本地客戶端物件

首先我們需要創建一個本地客戶端物件，由于我們不是直播，mode我們選擇rtc，編碼有H.264和VP8兩種，我這里沒有兼容性要求，所以選用推薦的VP8，參考官方檔案，

const rtcClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

2. 加入頻道

加入頻道這里需要傳入4個引數：聲網的專案appid，頻道名稱，如果鑒權開啟了安全模式需要傳入token，最后傳入uid，uid為null時SDK會自動生成一個uid回傳給你，

如果你是用app證書通過自己的代碼生成token，需要保證頻道名稱和uid與生成token時保持一致，否則加入頻道會失敗，

const uid = await rtcClient.join(<appid>, <channel name>, <token>, <uid>);

3. 創建本地音視頻軌道

加入完頻道我們開始創建本地音視頻軌道，呼叫createMicrophoneAudioTrack()通過本地麥克風采集的音頻創建音頻軌道物件，呼叫
createCameraVideoTrack()通過本地攝像頭采集的視頻創建視頻軌道物件，你也可以在呼叫時傳入引數來調整編碼、前置\后置攝像頭等配置，同時這里還需要注意瀏覽器提示或相關的設定，允許瀏覽器訪問攝像頭、麥克風等設備，必要時對用戶進行引導和提示，

const localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
const localVideoTrack = await AgoraRTC.createCameraVideoTrack();

4. 播放本地音視頻軌道

創建完本地音視頻軌道物件后，我們可以呼叫play()進行播放，預覽一下音頻和視頻，播放音頻軌道時不需要傳入任何引數，播放視頻軌道時需要指定一個DOM元素，你可以傳入一個元素物件，也可以傳入元素的id值，之后SDK會自動在該元素內部生成一個video元素播放視頻軌道，

<div id="video-container"></div>

// 播放視頻軌道
localVideoTrack.play(document.getElementById('video-container'));
// or
localVideoTrack.play('video-container');

// 播放音頻軌道
localAudioTrack.play();

效果如圖：

5. 發布本地音視頻軌道

現在我們需要呼叫publish()將我們本地的音視頻軌道發布到頻道中，一個本地客戶端物件可以發布多個音頻軌道，比如：背景音樂、麥克風聲音等，SDK會自動將其合并為一個音頻軌道發布到頻道中去，但是一個本地客戶端物件只能發布一個視頻軌道，如果有發布多個視頻軌道的需求，你可以創建多個本地客戶端物件加入同一個頻道，然后發布不同的視頻軌道，但是需要注意區分2個client使用的uid，并在本地訂閱時過濾掉，防止重復訂閱，參考檔案，

await rtcClient.publish([
    localAudioTrack,
    localVideoTrack
]);

6. 訂閱遠端用戶并播放遠端音視頻

現在我們需要監聽user-published事件，當同一頻道的其他用戶呼叫publish()發布音視頻軌道時，SDK會觸發該事件，我們需要監聽這個事件并在回呼中訂閱其他用戶發布的音視頻軌道，并呼叫play()進行播放

<div id="remote-user"></div>

rtcClient.on("user-published", async (user, mediaType) => {
    await rtcClient.subscribe(user, mediaType);
    if (mediaType === "video") {
        console.log("subscribe video success", user);
        user.videoTrack.play(document.getElementById('remote-user'));
    }
    if (mediaType === "audio") {
        console.log("subscribe audio success");
        user.audioTrack.play();
    }
});

效果如下圖，上方是我們本地的攝像頭畫面，下方為遠端的攝像頭畫面，到這里為止一個基礎的1對1視頻通話已經完成了！

通話質量監測

對于實時音視頻來說，保障通話質量是很重要的一環，在SDK中提供了相關的api供我們查詢當前的通話質量，檔案，通過使用這些api，客戶端可以及時采取措施，給予用戶及時的提示和反饋，避免影響用戶的使用體驗，

聲網控制臺還有水晶球面板，里面提供了豐富的通話質量資料查詢功能，開發者可以使用這個工具更全面的掌握通話質量狀況，

小拓展

多個音頻軌道

上文中有提到，一個客戶端物件可以發布多個音頻軌道，沒有先后順序，可以多次通過呼叫publish()進行發布，SDK會自動合并為一個音頻軌道發布到頻道中，下面我們就通過自定義音頻采集以及MediaStreamTrack API往通話中播放一個本地音頻檔案作為背景音樂，

1. 創建HTMLAudioElement

我們在前面基礎音視頻通話代碼的基礎上進行修改，首先創建一個button，讓用戶點擊后再播放音頻檔案，確保用戶與頁面有一個互動行為，并監聽對應的點擊事件，

<button id="addMusic">添加音樂</button>

document.getElementById("addMusic").addEventListener("click", () => {
    const audio = new Audio("./music.ogg");
    audio.play();
});

2. 獲取音頻軌道并發布

呼叫captureStream()獲取MediaStream物件，監聽addtrack事件，觸發時呼叫getAudioTracks()獲取MediaStreamTrack物件的集合，由于我的音頻檔案只有一個音軌，所以這里直接取第1個元素，使用createCustomAudioTrack()將獲取到的MediaStreamTrack轉換為一個可以用于SDK的音頻軌道，最后使用客戶端物件的publish()發布，結合之前的音視頻通話，此時在遠端已經能正常收聽到2個音軌的聲音了（麥克風和音樂檔案），

document.getElementById("addMusic").addEventListener("click", () => {
    const audio = new Audio("./music.ogg");
    audio.play();
    const musicStream = audio.captureStream();
    const musicStream.onaddtrack = async () => {
        const musicMediaStreamTrack = musicStream.getAudioTracks()[0];
        const musicCustomAudioTrack = AgoraRTC.createCustomAudioTrack({
            mediaStreamTrack: musicMediaStreamTrack
        });
        await rtClient.publish([musicCustomAudioTrack])        
    };
});

自定義視頻采集

和音頻一樣，SDK也支持你使用自定義的視頻軌道來實作如螢屏錄制，播放本地視頻檔案等功能，螢屏錄制在官方檔案中有介紹，這里我分享一下如何獲取并發布一個本地視頻檔案的視頻軌道，

一個客戶端物件只支持發布一個視頻軌道，同時發布多個（比如錄屏+攝像頭畫面）需要創建2個客戶端物件分別進行發布，

1. 創建video元素

首先我們創建一個video元素用于播放視頻檔案，并獲取到HTMLVideoElement物件，

<video id="videoFile" src="./video.mp4" control>

const video = document.getElementById('video');

2. 獲取并發布視頻檔案的媒體流

這一步和獲取音頻檔案媒體流類似，我們分別發布了視頻和音頻軌道后的效果如圖，畫面上方的A端播放的視頻檔案，畫面下方是B端的攝像頭畫面

視頻檔案包含視頻軌道和音頻軌道，我們需要分別獲取對應的軌道進行發布，如果只發布了視頻軌道會導致遠端沒有視頻聲音

const stream = video.captureStream();
stream.onaddtrack = async () => {
    const videoMediaStreamTrack = stream.getVideoTracks()[0];
    const audioMediaStreamTrack = stream.getAudioTracks()[0];
    const videoTrack = AgoraRTC.createCustomVideoTrack({
        mediaStreamTrack: videoMediaStreamTrack
    });
    const audioTrack = AgoraRTC.createCustomAudioTrack({
        mediaStreamTrack: audioMediaStreamTrack
    });
    await this.rtc.client!.publish([videoTrack,audioTrack]);
};

結尾

聲網的Agora Web SDK NG 版接入是十分便捷的，簡單易上手，功能強大，檔案清晰，SDK也在github上開源，每個月還有10000分鐘的免費額度，他們也會不定期舉辦一些套餐包優惠活動，通話質量也有可靠的保障，對于個人或小團隊來說實作音視頻通話不再是很困難的一件事了，總結一下就是：真香，如果你和你的團隊有這方面的需求，不妨也來試試使用聲網，

「本文為個人原創，首發于聲網開發者社區」