前言

大家好，我是 @小曾同學(xué)，小伙伴們也可以叫我小曾～

如果你想實(shí)現(xiàn)一對一音視頻通話和屏幕共享功能，不妨來看看這篇文章，保姆級教程，不需要從零實(shí)現(xiàn)，直接集成聲網(wǎng) SDK 即可輕松上手。

本文也分享了我在實(shí)踐過程中遇到的一些問題，幫助小伙伴們避坑。如果文章知識點(diǎn)有錯誤的地方，還請大家指正，讓我們一起學(xué)習(xí)，一起進(jìn)步～

01 背景介紹

聲網(wǎng)提供了各端豐富的音視頻 SDK，本文將要使用的是 Web 端 SDK。

本篇文章主要給小伙伴們分享如何使用聲網(wǎng) SDK 實(shí)現(xiàn) Web 端音視頻通話及屏幕共享功能，其中也會涵蓋在實(shí)踐過程中遇到的一些問題，以此記錄防止小伙伴們踩坑，同時也希望通過從 0 到 1 實(shí)戰(zhàn)的分享，能夠幫助更多的小伙伴。

02 前期準(zhǔn)備

在實(shí)戰(zhàn)之前，需要有以下準(zhǔn)備條件：

? Npm & Node.js
? 前端開發(fā)基礎(chǔ)，如 html & CSS & JavaScript? 注冊聲網(wǎng)賬號，申請聲網(wǎng)APPID、臨時Token ，詳見開始使用聲網(wǎng)平臺。

如果你還沒有聲網(wǎng)賬號，可以通過文末的鏈接免費(fèi)注冊，每個賬戶每月都有 10000 分鐘免費(fèi)額度。如果是個人學(xué)習(xí)/調(diào)試，時長完全夠用。

我個人的開發(fā)環(huán)境，具體信息如下：

? MacBook Pro? Visual Studio Code：v1.75.1? Npm：v8.19.3? Node.js：v16.19.0? 聲網(wǎng) SDK：v4.2.1 ，sdk的下載可查看這里。? Google Chrome ：v110.0.5481.177

03 實(shí)戰(zhàn)環(huán)節(jié)

通過[前期準(zhǔn)備]，我們已經(jīng)完成了相關(guān)配置，已經(jīng)擁有了?App ID、Channel、臨時 Token、聲網(wǎng) SDK，在本次實(shí)戰(zhàn)中，主要詳細(xì)講解兩個 demo，分別是音視頻通話及屏幕共享連麥。

3.1 實(shí)現(xiàn)音視頻通話
在開始實(shí)戰(zhàn)之前，先聲明下 Demo 組成架構(gòu)，
創(chuàng)建一個文件夾名為 Agora_VideoCall，文件夾中包含五個文件，分別是：

? index.html：用于設(shè)計 Web 應(yīng)用的用戶界面? index.css：用于設(shè)計網(wǎng)頁樣式? basicVideoCall.js：實(shí)現(xiàn)音視頻通話邏輯代碼，主要通過 AgoraRTCClient 實(shí)現(xiàn)? AgoraRTC_N-4.2.1.js：聲網(wǎng)音視頻SDK? assets：第三方庫，主要用于設(shè)計用戶界面

在 index.html 文件中導(dǎo)入聲網(wǎng)SDK，具體內(nèi)容可查看詳細(xì)代碼，接下來主要詳細(xì)講解音視頻通話及屏幕共享實(shí)現(xiàn)邏輯。

3.1.1 實(shí)現(xiàn)音視頻通話邏輯
以下代碼均在 basicVideoCall.js 文本中寫入
1）首先調(diào)用 AgoraRTC.createClient 方法創(chuàng)建一個 client 對象，也就是創(chuàng)建客戶端對象

2）定義變量 App ID，Token、Channel、User ID，并使用箭頭函數(shù)實(shí)現(xiàn)當(dāng)頁面被調(diào)用時用于加入音視頻通話通道。

3）加入頻道
定義 join 函數(shù)主要是將本地音視頻 track 加入一個 RTC 頻道，此時需要在函數(shù)中傳入 App ID，Token、Channel、User ID。加入房間后，需要發(fā)布音視頻track，所以還需要創(chuàng)建音視頻 track，并調(diào)用 publish 方法將這些本地音視頻track對象當(dāng)作參數(shù)發(fā)布到頻道中。

注意注意，在創(chuàng)建音視頻 track 時需要先調(diào)用 createMicrophoneAudioTrack ：通過麥克風(fēng)采集的音頻創(chuàng)建本地音頻軌道對象；再調(diào)用 createCameraVideoTrack ：通過攝像頭采集的視頻創(chuàng)建本地視頻軌道對象。（如果先調(diào)用createCameraVideoTrack ，那么頁面中將不會顯示本地視頻預(yù)覽畫面）

創(chuàng)建之后即可調(diào)用 play 方法展示本地預(yù)覽，并調(diào)用 publish 方法發(fā)布到 RTC 頻道中。注意 play 和 publish 方法的使用沒有先后順序，誰在前在后沒有什么影響。

4）在頻道中添加或移除遠(yuǎn)端用戶邏輯
實(shí)現(xiàn)將同頻道的遠(yuǎn)端用戶添加到本地接口，當(dāng)遠(yuǎn)端用戶取消發(fā)布時，則從本地將用戶移除。

5）訂閱遠(yuǎn)端音視頻邏輯
當(dāng)遠(yuǎn)端用戶發(fā)布音視頻時，本地用戶需要對其訂閱，從而實(shí)現(xiàn)音視頻通話，在 subscribe 函數(shù)中需要傳入兩個參數(shù)，分別是同頻道遠(yuǎn)端用戶 user id 和遠(yuǎn)端 mediaType，并調(diào)用 play 方法，播放遠(yuǎn)端用戶音視頻，從而實(shí)現(xiàn)一對一連麥。

6）監(jiān)聽事件
當(dāng)遠(yuǎn)端用戶發(fā)布或者取消發(fā)布音視頻 track 時，本地還需要對其監(jiān)聽，在 join 函數(shù)中，監(jiān)聽 client.on("user-published", handleUserPublished) 事件和 client.on("user-unpublished", handleUserUnpublished) 事件，具體如下

7）離開頻道
當(dāng)用戶點(diǎn)擊 leave 按鈕時，則將 stop 本地和遠(yuǎn)端音視頻 track。

3.1.2 Demo展示
接下來可以運(yùn)行我們的 Demo 啦，輸入 APPID、Token、Channel、Userid，點(diǎn)擊 join，即可看到自己本地的畫面，如果想和別人連麥，可以再復(fù)制一下網(wǎng)址，輸入相同的 APPID、Token、Channel，即可實(shí)現(xiàn)連麥，趕快試試吧。

3.2?屏幕共享連麥
屏幕共享就是將本地用戶的屏幕內(nèi)容，以視頻畫面的方式分享給其他遠(yuǎn)端用戶觀看。其工作原理實(shí)際上是通過 createScreenVideoTrack 創(chuàng)建一個屏幕共享的視頻軌道對象來實(shí)現(xiàn)。采集屏幕的過程中瀏覽器會詢問需要共享哪些屏幕，根據(jù)終端用戶的選擇去獲取屏幕信息。
在上述音視頻 demo 的基礎(chǔ)上實(shí)現(xiàn)屏幕共享功能。

3.2.1 添加屏幕共享UI
在 index.html 頁面中添加屏幕共享（ScreenShare）button

3.2.2 屏幕共享實(shí)現(xiàn)邏輯
以下代碼均在 basicVideoCall.js 文本中寫入
1）實(shí)現(xiàn) share 函數(shù)

和上述 join 函數(shù)功能類似，主要用于開啟屏幕共享，使用 createScreenVideoTrack 創(chuàng)建屏幕共享的視頻軌道對象，同時也可以對視頻編碼進(jìn)行一些簡單的配置。函數(shù)中同樣也需要添加監(jiān)聽事件。

2）添加屏幕共享音視頻軌道，并調(diào)用 play 方法播放本地屏幕共享的視頻。

3）發(fā)布屏幕共享
發(fā)布本地音頻和屏幕共享畫面至 RTC 頻道中。

4）在 share 函數(shù)實(shí)現(xiàn)邏輯中需要綁定 "track-ended" 事件，當(dāng)屏幕共享停止時，會有一個警報通知最終用戶。

3.2.3 Demo 展示
當(dāng)點(diǎn)擊 ScreenShare 時，會提示用戶選擇哪一個 page 進(jìn)行分享，同時也有一個默認(rèn)音頻選項(xiàng)，點(diǎn)擊分享之后，即可發(fā)布屏幕共享。

04小結(jié)

如果你想實(shí)現(xiàn)音視頻和屏幕共享的 Web 應(yīng)用，完全可以借鑒本篇文章 + 聲網(wǎng)SDK，如果不是很熟悉的話，可以先看聲網(wǎng)給出的「快速開始 - 實(shí)現(xiàn)音視頻通話」。

在實(shí)踐過程中需要注意的是：在創(chuàng)建音視頻 track 時需要先調(diào)用 createMicrophoneAudioTrack ，再調(diào)用 createCameraVideoTrack ，如果先調(diào)用 createCameraVideoTrack ?那么頁面中將不會顯示本地視頻預(yù)覽畫面。

Generally，本篇文章給出的 demo 比較簡單，如果想要添加其他的功能比如，虛擬背景、AI降噪等，可以在此基礎(chǔ)上繼續(xù)添加功能。

（正文完）

參考資料

? 注冊聲網(wǎng)賬號：https://sso2.agora.io/cn/signup?utm_source=bili&utm_medium=referral&utm_campaign=XZ01
??相關(guān) SDK 下載：

https://docs.agora.io/cn/All/downloads?utm_source=bili&utm_medium=referral&utm_campaign=XZ01

? 快速開始 - 實(shí)現(xiàn)音視頻通話：

https://docs.agora.io/cn/video-call-4.x/start_call_android_ng?platform=Android?utm_source=bili&utm_medium=referral&utm_campaign=XZ01