阿里雲ARTC Web SDK是由阿里雲提供的一套基於Web的即時通訊開發工具。它允許開發人員在Web應用中快速整合高品質的音視訊通話功能、即時訊息傳遞等即時互動功能。本文為您示範快速搭建屬於自己的ARTC應用。
步驟一：開通應用
在左側導覽列單擊。
單擊建立應用。
填寫自訂的執行個體名稱，勾選服務合約後，點擊立即購買。
提示開通成功後，重新整理應用管理頁面，即可查看您建立的即時音視頻應用。
說明建立應用預設不產生費用 ， 實際按照您具體雲上用量後付費。更多資訊，請參見音視訊通話費用。
步驟二：擷取應用ID和AppKey
成功開通應用後，在應用管理列表中找到該應用，單擊操作欄中的管理按鈕，進入基本資料頁面，在該頁面擷取對應的應用ID和AppKey 。
步驟三：整合接入
整合SDK。
Script整合
在您的HTML頁面引入SDK指令碼。
<script src="https://g.alicdn.com/apsara-media-box/imp-web-rtc/7.1.9/aliyun-rtc-sdk.js"></script>NPM整合
在您的專案中使用npm安裝SDK。
npm install aliyun-rtc-sdk --save初始化引擎。
// 以下兩種引入方式二選一 // 當以 npm 包方式引入時執行 import AliRtcEngine from 'aliyun-rtc-sdk'; // 當以 Script 方式引入時執行 const AliRtcEngine = window.AliRtcEngine; // 檢測環境 const checkResult = await AliRtcEngine.isSupported(); if (!checkResult.support) { // 當前環境不支援使用，提示使用者更換或升級瀏覽器 } // 建立引擎執行個體，可以儲存至全域變數中 const aliRtcEngine = AliRtcEngine.getInstance();建立好AliRtcEngine執行個體後，需要監聽、處理相關事件。
// 目前使用者離開頻道 aliRtcEngine.on('bye', (code) => { // code 為原因碼，具體含義請查看 API 文檔 console.log(`bye, code=${code}`); // 這裡做您的處理業務，如退出通話頁面等 }); // 監聽遠端使用者上線 aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => { console.log(`使用者 ${userId} 加入頻道，耗時 ${elapsed} 秒`); // 這裡處理您的商務邏輯，如展示這個使用者的模組 }); // 監聽遠端使用者下線 aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => { // reason 為原因碼，具體含義請查看 API 文檔 console.log(`使用者 ${userId} 離開頻道，原因碼: ${reason}`); // 這裡處理您的商務邏輯，如銷毀這個使用者的模組 }); // 監聽遠端流訂閱變化 aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => { // oldState、newState 類型均為AliRtcSubscribeState，值包含 0（初始化）、1（未訂閱）、2（訂閱中）、3（已訂閱） // interval 為兩個狀態之間的變化時間間隔，單位毫秒 console.log(`頻道 ${channelId} 遠端使用者 ${userId} 訂閱狀態由 ${oldState} 變為 ${newState}`); // 這裡處理觀看遠端流的邏輯 // 當 newState 變為 3 時可以通過 setRemoteViewConfig 播放遠端流 // 當 newState 變為 1 時可以停止播放 }); // 監聽鑒權資訊到期 aliRtcEngine.on('authInfoExpired', () => { // 該回調觸發代表鑒權資訊已到期 // 需要重新擷取 token 等資料，調用 refreshAuthInfo 介面更新鑒權資料 aliRtcEngine.refreshAuthInfo({ userId, token, timestamp }); }); // 監聽使用者鑒權資訊即將到期 aliRtcEngine.on('authInfoWillExpire', () => { // 該回調在鑒權資訊30秒前觸發，收到該回調後應該及時更新鑒權資訊 // 若想要繼續在會中，需要重新擷取 token 等資料，調用 joinChannel 重新入會 });（可選）設定頻道模式，預設通話模式。詳細資料，請參見設定頻道模式和使用者角色。
// 設定頻道模式，支援傳入字串 communication（通話模式）、interactive_live（互動模式） aliRtcEngine.setChannelProfile('interactive_live'); // 設定角色，互動模式時調用才生效 // 支援傳入字串 interactive（互動角色，允許推拉流）、live（觀眾角色，僅允許拉流） aliRtcEngine.setClientRole('interactive');加入頻道。Token計算方式參見Token鑒權，您可以按需選擇單參數入會或者多參數入會的方案。
單參數入會
const userName = '測試使用者1'; // 可以修改為您的使用者名稱（支援中文） try { // fetchToken需要您來實現，從服務端擷取Base64Token const base64Token = await fetchToken(); await aliRtcEngine.joinChannel(base64Token, userName); // 加入成功，繼續執行其他動作 } catch (error) { // 加入失敗 }多參數入會
// 參考文檔 Token 鑒權部分，從服務端或本地產生鑒權資訊 // 注意：為了您的資料安全，任何情況下都不應該將帶有 appKey 的 token 計算邏輯發布給使用者 const appId = 'yourAppId'; // 從控制台擷取 const appKey = 'yourAppKey'; // 從控制台擷取，注意請勿在生產環境露出您的 AppKey const channelId = 'AliRtcDemo'; // 可以修改為您的頻道ID（僅支援英文字母、數字） const userId = 'test1'; // 可以修改為您的使用者ID（僅支援英文字母、數字） const userName = '測試使用者1'; // 可以修改為您的使用者名稱（支援中文） const timestamp = Math.floor(Date.now() / 1000) + 3600; // 一個小時後到期 try { const token = await generateToken(appId, appKey, channelId, userId, timestamp); // 加入頻道，參數 token、nonce 等一般由服務端返回。 // 注意：調用時請保證channelId、userId、appId、timestamp參數與產生Token時保持一致。 await aliRtcEngine.joinChannel({ channelId, userId, appId, token, timestamp, }, userName); // 加入成功，繼續執行其他動作 } catch (error) { // 加入失敗 }
預覽畫面和推流。預設情況下，加入頻道後將自動採集本地的音視頻資料並推送至阿里雲GRTN網路中。您可以參考以下方式預覽您的本地畫面。
在HTML代碼中增加一個
id為localPreviewer的VIDEO元素。<video id="localPreviewer" muted style="display: block;width: 320px;height: 180px;background-color: black;" ></video>通過
setLocalViewConfig方法傳入元素ID開啟預覽。// 第一個參數支援傳入 HTMLVideoElement 或對應的元素 ID，傳入 null 時停止預覽 // 第二個參數支援傳入 1 （預覽相機流）、2（預覽螢幕畫面分享流） aliRtcEngine.setLocalViewConfig('localPreviewer', 1);
訂閱遠端音視頻流。預設情況下，加入頻道後將自動訂閱其他主播使用者的音視頻流，若有音頻流將自動播放，需要觀看相機流、螢幕流，則需要通過
setRemoteViewConfig介面開啟。在HTML代碼中增加一個
id為remoteVideoContainer的DIV元素作為容器。<div id="remoteVideoContainer"></div>監聽到遠端視頻流訂閱變化後，若已訂閱
setRemoteViewConfig介面播放，若未訂閱則移除。// 儲存 Video 元素 const remoteVideoElMap = {}; // 遠端容器元素 const remoteVideoContainer = document.querySelector('#remoteVideoContainer'); function removeRemoteVideo(userId) { const el = remoteVideoElMap[userId]; if (el) { aliRtcEngine.setRemoteViewConfig(null, userId, 1); el.pause(); remoteVideoContainer.removeChild(el); delete remoteVideoElMap[userId]; } } // 同第二步監聽事件範例程式碼中 videoSubscribeStateChanged 樣本 aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => { // oldState、newState 類型均為AliRtcSubscribeState，值包含 0（初始化）、1（未訂閱）、2（訂閱中）、3（已訂閱） // interval 為兩個狀態之間的變化時間間隔，單位毫秒 console.log(`頻道 ${channelId} 遠端使用者 ${userId} 訂閱狀態由 ${oldState} 變為 ${newState}`); // 處理樣本 if (newState === 3) { const video = document.createElement('video'); video.autoplay = true; video.setAttribute('style', 'display: block;width: 320px;height: 180px;background-color: black;'); remoteVideoElMap[userId] = video; remoteVideoContainer.appendChild(video); // 第一個參數傳入 HTMLVideoElement // 第二個參數傳入遠端使用者識別碼 // 第三個參數支援傳入 1 （預覽相機流）、2（預覽螢幕畫面分享流） aliRtcEngine.setRemoteViewConfig(video, userId, 1); } else if (newState === 1) { removeRemoteVideo(userId); } });
結束流程。
// 停止本地預覽 await aliRtcEngine.stopPreview(); // 離開頻道 await aliRtcEngine.leaveChannel(); // 銷毀執行個體 aliRtcEngine.destroy();
快速體驗
在快速體驗代碼的JavaScript部分中，包含了用於計算Token的方法generateToken。在任何情況下，禁止將這部分代碼和AppKey通過JavaScript檔案的方式發布給使用者使用，否則可能會導致資訊泄露並被濫用的風險。因此，建議您通過伺服器端進行Token簽名，並在前端通過需要鑒權的介面來擷取Token。
前提條件
快速體驗demo需要您的開發環境啟動一個HTTP服務，如果您沒有安裝http-server的npm包，可以先執行npm install --global http-server指令全域安裝。
步驟一：建立目錄
建立一個demo檔案夾，並按照下方檔案目錄結構建立好quick.html、quick.js兩個檔案。
- demo
- quick.html
- quick.js步驟二：編輯quick.html
將下方代碼複製到quick.html，並儲存。
步驟三：編輯quick.js
將下方代碼複製到quick.js，並將應用ID和AppKey粘貼至代碼指定變數中儲存。
步驟四：運行體驗
在終端中進入demo檔案夾，然後執行
http-server -p 8080，啟動一個HTTP服務。瀏覽器中建立標籤頁，訪問
localhost:8080/quick.html，在介面上填入頻道ID和使用者ID ，單擊加入頻道按鈕。瀏覽器中再建立一個標籤頁，訪問
localhost:8080/quick.html，在介面上填入與上一步相同的頻道ID和另一個使用者ID ，單擊加入頻道按鈕。介面上將自動訂閱另一個使用者的媒體流。