基於[聲網]開發互動直播應用的技術調研
摘要
為滿足業務需求而調研實時互動直播應用服務的實現方式後發現，
聲網 Agora 是提供實時互動 API 的專業服務商。開發者通過整合其SDK和簡單呼叫 API，可以快速建立擁有社交直播、線上教育等多種實時音視訊互動場景的應用。
本文將介紹如何在聲網平臺建立賬號和測試專案，實際演示如何編譯執行Web客戶端和安卓客戶端的示例程式碼，並加入到同一個直播間頻道中，進行音視訊互動。
1. 建立聲網賬號
登入聲網官網首頁 ，點選右上方的註冊登入按鈕後，輸入手機號建立賬號，並輸入真實姓名，公司名，郵箱地址，密碼等相關資訊，完成整個註冊流程。
註冊過程中有簡訊驗證碼和郵箱驗證碼的相關驗證操作，根據網站指示操作即可。儘量一次性完成所有資訊的填寫和驗證，避免出現問題。
由於聲網每個月提供有一萬分鐘的測試流量，在真正確定採購聲網服務之前，不需要付費就可以進行技術調研和驗證。
2. 建立聲網直播專案
賬號建立並登入成功後，進入到聲網控制檯頁面 ，可以看到一個叫做專案列表的頁籤。
點選頁籤中的“建立專案”，輸入專案名稱（應為要開發的互動直播應用的唯一標識），並選擇使用場景，以及實名認證方式。認證應選擇APP ID + Token方式，以符合生產環境需要。
專案建立完畢後，進入專案列表 可以找到已建立的專案。
聲網為每個建立的專案，提供了一個簡單的網頁預覽功能。
單擊“網頁演示”圖示，可以開啟一個臨時的頻道頁面。
加入頻道後，可以看到一個類似於視訊會議的互動直播頁面，並出現本機的攝像頭畫面。
將連結複製給其他人訪問，可以達到實時音視訊互動的效果。網頁測試專案已經執行成功。
3. 建立測試頻道及訪問Token
下面將編譯執行聲網提供的Web客戶端和安卓客戶端的示例原始碼，讓這兩個客戶端可以加入到一個直播頻道中，實現互動直播功能。為此需要做一些準備工作：
- 首先，需要決定一個頻道名，客戶端都要加入這個頻道；
- 其次，為了模擬生產環境的安全機制需求，頻道會設定一個訪問Token，想進入這個頻道的客戶端，必須持有合法的訪問Token。
在生產環境中，頻道名以及每個頻道的訪問Token由業務服務端動態生成並分配給每個客戶端。
為了快速實現主要功能的演示，暫時採用聲網控制檯中提供的“音視訊臨時Token”功能，生成一個測試用的Token，並臨時寫入到客戶端的原始碼中使用。
點選鑰匙圖示，開啟一個生成臨時Token的頁面。在這個頁面中，有兩個重要的字串是客戶端連線該專案的依據：
- APP ID
- App證書
這兩個字串的位置，都可以通過點選進行復制，以後在客戶端的原始碼中會用到。
在這個頁面中，輸入一個測試用的頻道名為：ch1，然後點選“生成臨時Token”按鈕，得到如下的一個“臨時Token”字串：
這個臨時Token的字串可以複製，將在下面的客戶端原始碼中使用到。
4. 下載客戶端示例程式碼
聲網的官網中提供了很多業務場景的示例程式碼,其中叫做Open Live的示例專案參考價值較大：
在這個專案的原始碼中可以看到，它包含了多個平臺下的客戶端的實現。
從github.com將該專案下載到本地，本文將選取下面兩個平臺客戶端的原始碼，進行簡單的修改和編譯執行，連入上文建立的測試頻道中，進行音視訊互動：
- 基於Node.js實現的Web客戶端 - OpenLive-Web
- 安卓客戶端 - OpenLive-Android
5. Web客戶端的執行示例
5.1 環境準備
要編譯和執行OpenLive-Web專案，首先需要在開發機上安裝Node.js的當前長期維護（LTS）版本。在Node官網可以下載到Windows、Mac及Linux等平臺的安裝檔案，按照官方文件說明安裝即可。
Node原始碼的編輯器或整合開發環境建議採用：
- Visual Studio Code（https://code.visualstudio.com/）
- IntelliJ Idea社群版（https://www.jetbrains.com/idea/download/）
5.2 修改原始碼中的配置
使用VS Code（或者Idea）開啟OpenLive-Web原始碼資料夾，重新命名資料夾中的“.env.example”檔案為“.env”
然後編輯這個“.env”檔案的內容：
在這個檔案中，有兩個配置項：
- REACT_APP_AGORA_APP_ID的值設為從聲網控制檯複製過來的“APP ID”；
- REACT_APP_AGORA_APP_TOKEN的值設為“臨時Token”。
因為示例程式碼使用的是寫死到配置檔案中的臨時Token，所以控制檯中的“App證書”值暫時沒有用到。
在生產環境中，使用的是業務服務端動態生成的Token，在生成和驗證的過程中，需要用到“App證書”值。
5.3 啟動Node.js專案
npm是Node.js的包管理器，在OpenLive-Web原始碼所在目錄下，執行npm install命令，可以安裝專案所需要的所有依賴包。
然後，執行npm run dev命令，啟動Web專案。
專案啟動成功後，本機瀏覽器將開啟一個新頁面：http://localhost:3000/#/，基於瀏覽器的Web客戶端已成功開啟。
5.4進入直播間
選擇身份為“host”以啟用攝像頭和麥克風，然後填入在聲網控制檯建立的頻道名“ch1”,點選“Start Live Streaming”按鈕，即可進入直播間。
如果在區域網內另外一臺電腦上用瀏覽器訪問這個Web站點，或者採用同樣的原始碼和配置啟動Web專案，則可以用同樣的方式，加入到ch1這個測試直播間中，以畫中畫的形式，達到實時音視訊互動的效果。
6. 安卓客戶端的執行示例
6.1 環境準備
為編譯執行首先需要下載並參考官方安裝說明，安裝Android Studio整合開發環境。
6.2修改原始碼中的配置
Android Studio安裝成功後，開啟OpenLive-Android原始碼資料夾，修改/res/values目錄中的strings_config.xml檔案，填入測試用的APP ID和臨時Token值：
6.3建立虛擬安卓裝置
從Android Studio的Tools選單中，開啟“AVD Manager”，這是虛擬安卓裝置的管理介面。如果還沒有虛擬裝置，可以通過“Create Virtual Device”按鈕建立一個新的裝置。
如果是建立新裝置，需要選擇裝置種類，具體型號，然後點選“Next”按鈕。
然後選擇Android系統的版本為最新版11.0，API版本為30，繼續點選Next
為了讓虛擬裝置可以使用本機的攝像頭，需要改一下高階設計，點選“Show Advance Settings”按鈕：
開啟高階設定後，可以看到Camera設定，將前置攝像頭Front以及後置攝像頭Back都改為“Webcam0”，在虛擬裝置中啟用本機的物理攝像頭。
在AVD Manager的列表中，將至少有一個可用的虛擬手機裝置。
6.4在虛擬安卓裝置上啟動應用
在Android Studio中選擇剛才建立的虛擬裝置，並點選“啟動APP”。
在虛擬裝置中啟動APP後，輸入頻道名ch1,點選“開始直播”按鈕，選擇“我是主播”，進入直播間。
可以看到本機的攝像頭的實時視訊畫面：
6.5和Web客戶端實時互動
在另一臺電腦上，本地啟動Web專案或者用瀏覽器開啟已啟動的Web專案地址，輸入ch1測試頻道名加入到直播間中。
此時可以看到，虛擬安卓客戶端的畫面分成了上下兩部分，兩個客戶端實現了實時音視訊互動。
7. 動態頻道及訪問Token的建立
示例程式碼中，客戶端加入到特定頻道名所需的訪問Token，是寫死到原始碼的配置檔案中的。在生產過程中，應建立一個服務端應用，為不同的頻道名和使用者建立不同的訪問Token，並返給客戶端使用。其大致流程如下：
服務端如何生成Key，聲網也提供了各種語言版本的實現程式碼, 以JAVA程式碼實現為例：
package io.agora.sample;
import io.agora.media.RtcTokenBuilder;
import io.agora.media.RtcTokenBuilder.Role;
public class RtcTokenBuilderSample {
static String appId = "970CA35de60c44645bbae8a215061b33";
static String appCertificate = "5CFd2fd1755d40ecb72977518be15d3b";
static String channelName = "7d72365eb983485397e3e3f9d460bdda";
static String userAccount = "2082341273";
static int uid = 2082341273;
static int expirationTimeInSeconds = 3600;
public static void main(String[] args) throws Exception {
RtcTokenBuilder token = new RtcTokenBuilder();
int timestamp = (int)(System.currentTimeMillis() / 1000 + expirationTimeInSeconds);
String result = token.buildTokenWithUserAccount(appId, appCertificate,
channelName, userAccount, Role.Role_Publisher, timestamp);
System.out.println(result);
result = token.buildTokenWithUid(appId, appCertificate,
channelName, uid, Role.Role_Publisher, timestamp);
System.out.println(result);
}
}
可以看到，生成Token需要以下入參：
-
APP ID（業務應用在聲網平臺建立的相應專案的唯一標識）
-
APP證書（聲網平臺提供的一個特殊的認證用字串）
-
要加入的直播頻道名
-
使用者ID（字串或者整型數字，唯一標識參與直播的使用者）
-
使用者角色（決定是否可以傳送音視訊）
-
當前時間（決定Token有效期）
對此，聲網文件中有詳細說明：（https://docs.agora.io/cn/Interactive%20Broadcast/token_server?platform=All%20Platforms）
小結
多平臺客戶端的互動直播應用示例已完整呈現，除了訪問Token的管理，後端可以不需要一行程式碼的開發量。核心的音視訊後臺功能，完全由聲網平臺提供。
同時，聲網所提供的Open Live客戶端示例程式碼，完整的集成了SDK等所需各項依賴，幾乎可以一鍵啟動。
因此，在聲網的基礎上，開發一個完整的互動直播的應用，難度大大降低，為業務快速上線提供了可靠的基礎。
（完）
--------------路漫漫其修遠兮