支持 TypeScript、Promise API，來體驗一下新一代的 Web SDK

時間 2020-03-06

標籤支持 typescript promise api 體驗一下新一代 web sdk 欄目 HTML 简体版

原文原文鏈接

Agora Web SDK NG 版：agoraio-community.github.io/AgoraWebSDK…html

聲網 Agora Web SDK 過不了多久即將發佈新版本。如今，咱們已經有一個穩定的內測版本了。咱們在新的 SDK 中增長了一些新功能，並且相對上一版更易用，集成起來更順滑。爲了讓部分開發者也一塊兒來體驗一下，咱們決定再開啓一次「嚐鮮之旅」。老朋友、新用戶，均可以來免費試用！前端

在各位加入「體驗服」以前，咱們先講講 Agora Web SDK NG（Next Generation）版有哪些新特性。android

有哪些新特性

全部異步方法使用 Promise

現在 Promise 或者說 async/await 對於前端開發者來講早已經再也不陌生，甚至若是某個異步方法不支持 Promise，優秀的開發者也會將這些方法包裝成 Promise 來方便本身代碼中的異步管理。ios

不過，目前正式版 Agora Web SDK 還在使用的 callback/事件回調等令不少人詬病的方式來實現異步管理，緣由天然是多方面的。因此 NG 版本中，全部異步方法將改用 Promise。不過NG 版 SDK 在支持 Promise API 同時，將再也不向下兼容 callback 調用。咱們相信，擁抱 Promise 是一個正確的選擇，由於這會極大地提高開發者的開發效率和開發體驗。咱們從接下來的兩段代碼對比就能看出來：git

// 使用 Agora Web SDK 3.0 實現加入頻道以後發佈
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }); const stream = AgoraRTC.createStream({ audio: true, video: true });
client.init("YOUR APPID", () => {
  client.join("YOUR TOKEN", "YOUR CHANNEL", null, (uid) => {
    console.log("join channel success");
    stream.init(() => {
console.log("stream init success");
      client.publish(stream);
      client.on("stream-published", () => {
        console.log("publish success");
       }); 
    });
  }); 
});
複製代碼

能夠看到，目前官網的版本是標準的回調寫法，由於各類歷史包袱和 API 向下兼容的腳鏈，若是再這樣下去，會讓咱們的 SDK 變得愈來愈難用。github

這個狀況在 Agora Web SDK NG 版上獲得了改變:web

// 使用 Agora Web SDK NG 實現加入頻道以後發佈
// 咱們假設這段代碼運行在一個 async 環境下，因此直接使用 await
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }); 
const localAudio = await AgoraRTC.createMicrophoneAudioTrack(); 
const localVideo = await AgoraRTC.createCameraVideoTrack();

const uid = await client.join("YOUR APPID", "YOUR CHANNEL", "YOUR TOKEN",
null);
console.log("join channel success");

await client.publish([localAudio, localVideo]);
console.log("publish success");
複製代碼

很明顯，使用 Promise 配合 async/await 讓整個代碼邏輯更加清晰易懂，咱們相信將來的 Agora Web SDK能夠幫你寫出更漂亮的代碼。api

細心的你可能會發現，在新的 SDK 中，採集本地流被拆分紅了 2 個方法（createMicrophoneAudioTrack 和 createCameraVideoTrack），返回的不是一個 Stream 對象而是兩個 Track 對象。這也是一大改動，咱們會在後面介紹。瀏覽器

完美支持 TypeScript

隨着 TypeScript 的不斷壯大，愈來愈多的開發者開始使用 TypeScript 來開發 Web 應用。TypeScript 的優點很是明顯，它能夠幫助咱們寫出高質量、高可維護性的代碼，對於大型的前端應用開發具備很是重要的意義。Agora Web SDK NG 版使用 TypeScript 開發，因此也導出了完備的類型定義文件供 TypeScript 開發者使用，配合編輯器的 TypeScript 插件，這將會極大得提高你的開發體驗。bash

咱們的 Typescript 類型導出默認會攜帶英文版本的 API 文檔。

更靈活的音視頻控制

在官網版本的 Web SDK 中，全部音視頻控制的方法都經過 Stream 對象來向外提供。不管是本地流仍是遠端流，不管是音頻流仍是視頻流，所有都被封裝成 Stream 對象、這使得一些須要很精細控制音視頻行爲的需求變得難以實現，須要不斷地依賴 Stream.addTrack / Stream.removeTrack 。

在 Agora Web SDK NG 版中，咱們刪除了 Stream 對象，相對應的，咱們使用 Track 對象來控制音視頻。咱們把音視頻控制的最小單位從一個音視頻流改爲了一個一個音視頻軌道，每種軌道對象都有它自己的方法，不會出現 Stream.setBeautyEffect 沒法在純音頻流上調用，Stream.getAudioVolume 沒法在純視頻流上調用的狀況。咱們從一個需求例子來看這樣改動有什麼好處。

需求： 用戶加入頻道後採集音視頻並將視頻播放在⻚面上，可是默認只發布音頻，待用戶點擊⻚面上某個按鈕後再發布視頻(用戶可能須要確認本身的儀容/鏡頭位置等狀況。

// 使用 Agora Web SDK NG
// 咱們假設這段代碼運行在一個 async 環境下，因此直接使用 await，同時咱們假設這個時候已經加 入了頻道
const audioTrack = await AgoraRTC.createMicrophoneAudioTrack(); 
const videoTrack = await AgoraRTC.createCameraVideoTrack();

// 播放本地視頻
videoTrack.play("DOM_ELEMENT");
// 發佈本地音頻

await client.publish(audioTrack);
// ... 待用戶點擊某個按鈕後, 再發布本地視頻 
await client.publish(videoTrack);

// ...固然，只取消發佈部分 Track 也是能夠的 
await client.unpublish(audioTrack);
複製代碼

在 Stream 的版本下咱們不能重複發佈，每當咱們須要改動音視頻結構時邏輯就會很混亂。在使用了 Track 以後，咱們能夠根據需求隨意地發佈/取消發佈任意數量的 Tracks，這並不會給咱們的代碼增長太大的複雜度，可是會更有助於咱們管理音視頻對象。

Agora Web SDK NG 版容許用戶發佈多個音頻軌道，SDK 會自動混音以後發送給對端，但不容許用戶同時發佈多個視頻軌道。對多視頻軌道的支持已在咱們的計劃中。

背景音樂混音

有了基於 Track 的音視頻管理，音樂混音的場景也變得更靈活了。在官網版本的 SDK 中，咱們經過 Stream.startAudioMixing 實現混音，它存在一些缺點：一是不能同時配合多種音樂進行混音；二是混音的 API 設計的也不夠好用（好比 replace 參數來控制背景音樂，是和人聲混音仍是替代人聲？）；三就是沒法將「在本地播放背景音樂」和「將背景音樂發佈到對端」這兩個操做很好地剝離。舉個例子，主播 KTV 的場景中，主播端但願只聽到伴奏（背景音樂），可是觀衆端但願聽到伴奏和主播的聲音（背景音樂和人聲的混音），在官網版本的 Web SDK 中是沒法實現的。

如今，你能夠用 Agora Web SDK NG 版很優雅地解決這個需求:

// 使用 Agora Web SDK NG
// 咱們假設這段代碼運行在一個 async 環境下，因此直接使用 await，同時咱們假設這個時候已經加 入了頻道

// 主播的⻨克⻛音頻軌道
const microphoneTrack = await AgoraRTC.createMicrophoneAudioTrack();
// 背景音樂1的音頻軌道
const bgmTrack1 = await AgoraRTC.createBufferSourceAudioTrack({ source: "https://xxx.xxx.mp3" });
// 背景音樂2的音頻軌道
const bgmTrack2 = await AgoraRTC.createBufferSourceAudioTrack({ source: "https://xxx.xxx.233.mp3" });

// 在本地播放背景音樂
bgmTrack1.play(); bgmTrack1.startProcessAudioBuffer(); bgmTrack2.play(); bgmTrack2.startProcessAudioBuffer();

// 同時發佈⻨克⻛/背景音樂，SDK 會自動混音
await client.publish([bgmTrack1, bgmTrack2, microphoneTrack]);
複製代碼

和繁瑣的 Autoplay 說再見

相信不少開發者在處理瀏覽器 Autoplay 限制時都遇到了很多阻礙。官網版本的 SDK 也對這方面下了一番功夫（詳見聲網文檔中心「處理瀏覽器的自動播放策略」頁面）。

簡單來講，由於瀏覽器 Autoplay 的限制，讓咱們沒法自動播放帶有聲音的媒體，咱們必須經過和⻚面交互來解除這個限制。這個限制在 iOS Safari 上更爲嚴格，開發者須要作不少額外處理才能給用戶很好的自動播放體驗。

Agora Web SDK NG 版中，這些處理已經在 SDK 中「內部消化」了。若是你的應用會自動播放一些帶有聲音的媒體內容，而此時用戶尚未和⻚面發生交互，在官網版本中播放會失敗，但 Agora Web SDK NG 版中的播放不會被阻塞，視頻仍然能夠正常播放，只是在最開始會聽不到聲音。當用戶和⻚面發生任何交互時，聲音的播放會自動恢復。(部分能夠經過 UI 引導用戶)同時由於 Agora Web SDK NG 版音頻架構的升級，即便是在 iOS Safari 上，也只須要一次任意的⻚面交互就能全⻚面生命週期地解鎖 autoplay 限制。

Next Step

Agora Web SDK NG 版目前提供的功能已能知足絕大多數的使用場景，可是咱們在將來還會不斷添加一些你們關心的新功能，這裏簡單列舉一下 Agora Web SDK NG 接下來會實現的重點功能:

一站式的移動端/低端機解決方案

2019 年下半年咱們推出了 H5 實時直播這個移動端的解決方案，獲得了很不錯的反響。同時咱們也發現這個方案中值得改進的幾個點:

接入方式對用戶不太友好，須要引入兩個 SDK，是否開啓 H5 實時直播也須要用戶自行實現瀏覽器的判斷邏輯
在低端機(ios 8/ android 4.4)上的表現不如人意

咱們計劃在以後的迭代中讓 Agora Web SDK 直接集成 H5 實時直播的方案，同時由 SDK 本身智能檢測設備解碼能力來自動選擇是否使用 H5 實時直播，作到用戶能夠無感知集成，擴大 Agora Web SDK NG 的兼容範圍。對於低端機，咱們會推出一個更定製化的解決方案來確保在老設備上也能有流暢清晰的視頻體驗，這個解決方案會首先在 Agora Web SDK NG版本中實現。

Vue SDK

咱們收到了不少來自開發者的反饋，但願咱們能夠提供 Vue 或者 React 專用的 Agora Web SDK，讓使用這些框架的開發者能夠快速集成咱們的 SDK，實現實時互動場景。目前基於 Agora Web SDK NG 版的官方 Vue SDK 已經在開發中，很快就能夠和你們⻅面了，React SDK 也在計劃中。

在使用了 Vue SDK 以後，能夠很大程度上利用 Vue 的雙向數據綁定輕鬆地展現本地/遠端媒體流和一些頻道信息/媒體信息，無需本身綁定事件，實現起來會更爲便捷。