實踐解析：Electron實現(xiàn)跨平臺視頻會議的幾種思路

xi4oh4o 發(fā)布于2019-08-22 15:32 / 2860人閱讀

摘要：而現(xiàn)在我們可以利用多種工具框架進(jìn)行跨平臺開發(fā)。實現(xiàn)視頻會議的幾種思路如何利用實現(xiàn)一個視頻會議應(yīng)用這主要取決于使用什么技術(shù)來實現(xiàn)作為業(yè)務(wù)核心的部分。通過與技術(shù)結(jié)合，實現(xiàn)了網(wǎng)頁端多方音視頻通訊，可以快速實現(xiàn)部分的開發(fā)。

作者簡介：張乾澤，聲網(wǎng) Agora Web 研發(fā)工程師

對于在線教育、醫(yī)療、視頻會議等場景來講，開發(fā)面向 Windows、Mac 的跨平臺客戶端是必不可少的一步。在過去，每個操作系統(tǒng)的應(yīng)用需用特定的編程語言編寫，每個客戶端都需要多帶帶開發(fā)。而現(xiàn)在我們可以利用多種工具、框架進(jìn)行跨平臺開發(fā)。Electron 就是其中最熱門的一個。

Electron 的前身是Atom Shell，是基于Node.js 和 Chromium 開源項目。它讓前端開發(fā)者也可以使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用程序。

Electron 兼容 Mac、Windows 和 Linux。利用它構(gòu)建的應(yīng)用可在這三個操作系統(tǒng)上面運行。我們在很多著名項目中都能看到它的身影，比如 Slack、Cocos Creator、Visual Studio Code 等 500 多個項目。

本文將為大家分析利用 Electron 做視頻會議應(yīng)用的幾種實現(xiàn)思路及其優(yōu)缺點，同時結(jié)合 demo 實例，分享如何基于 Electron 與聲網(wǎng) Agora Web SDK 開發(fā)一個視頻會議應(yīng)用。

實現(xiàn)視頻會議的幾種思路

如何利用 Electron 實現(xiàn)一個視頻會議應(yīng)用？這主要取決于使用什么技術(shù)來實現(xiàn)作為業(yè)務(wù)核心的 RTC 部分。

第一種思路是使用 C++ SDK 來實現(xiàn)。我們可以通過 NodeJS 插件 node-gyp 將 C++ 的庫編譯成 NodeJS 可以直接使用的文件，界面部分則通過 Web 來實現(xiàn)，最后 RTC 業(yè)務(wù)部分則使用編譯的插件直接調(diào)用 C++ 接口。

這種方式的優(yōu)點是直接調(diào)用 C++ 接口，在性能和穩(wěn)定性上有一定優(yōu)勢。但是，缺點是 Native 模塊與 Web 模塊的交互會相對復(fù)雜。

盡管 NodeJS 可以直接調(diào)用 C++ 的接口，但若 C++ 要通過回調(diào)向 Node 部分傳遞數(shù)據(jù)，則需要確保數(shù)據(jù)傳輸?shù)?Electron 所在的線程上， Electron 才可以收到回調(diào)。又比如，若 C++ SDK 使用了具有平臺差異的動態(tài)庫依賴，則在使用 node-gyp 編譯的過程中必須在不同平臺上編譯不同的版本才可以在 Electron 中正常使用。

第二種思路是使用 WebRTC，即界面部分和 RTC 業(yè)務(wù)部分都通過 Web 來實現(xiàn)。

這種方法的優(yōu)點是集成和調(diào)試十分簡單，大部分工作可以在瀏覽器中完成后直接近乎無縫移植到 Electron。

不過，由于 WebRTC 缺少服務(wù)端設(shè)計和部署方案，我們首先還需要將 WebRTC 與 Janus 等開源項目結(jié)合，解決服務(wù)器的部署、NAT 穿透等問題，實現(xiàn) RTC 部分，這也是這種實現(xiàn)方法的難點。但如果通過 Agora Web SDK 來實現(xiàn) RTC 部分，則不需要擔(dān)心以上問題，也是目前最快速簡便的實現(xiàn)方法。

通過與 WebRTC 技術(shù)結(jié)合，Agora Web SDK 實現(xiàn)了網(wǎng)頁端多方音視頻通訊，可以快速實現(xiàn) RTC 部分的開發(fā)。WebRTC 用戶的音視頻數(shù)據(jù)經(jīng)由 Agora.io 的 SD-RTN 實時云傳輸，可以最大程度上保證公網(wǎng)的傳輸質(zhì)量，結(jié)合 WebRTC 自有的丟包/丟幀重傳，以及帶寬預(yù)測，動態(tài)碼率調(diào)整等策略，可以達(dá)到非常良好的多方通話用戶體驗。

針對這方面的集成，我們也已經(jīng)在 Github 上提供了一個開源的 demo 項目。我們下面來簡要梳理一下 demo 中如何實現(xiàn)核心音視頻通話功能。

基于 Agora Web SDK 實現(xiàn)音視頻通話

我們需要在 Electron 環(huán)境中創(chuàng)建一個名為 web-app 的目錄，在里面創(chuàng)建基本的 Web 部分內(nèi)容并快速實現(xiàn)一個視頻通話通能。

創(chuàng)建 AgoraRTC 實例并加入頻道：

let client = AgoraRTC.CreateClient({mode:"interop"})

初始化 appid 并加入頻道：

 client.init(options.key, () => {

                console.log("AgoraRTC client initialized")

                client.join(options.key, options.channel, options.uid, (uid) => {

                    console.log("User " + uid + " join channel successfully")

                    console.log(new Date().toLocaleTimeString())

                    // create localstream

                    resolve(uid)

                })

            })

創(chuàng)建本地流并推送：

let stream = AgoraRTC.creatStream(merge(defaultConfig.config))
localStream.init(() =>{
           client.publish(localStream, err => {
                  console.log("Publish local stream error: " + err);
                  localStream.play("element_id")
           })
},

在完成上面的步驟后，你應(yīng)該就能看到自己的視頻畫面了，下一步我們要讓這部分代碼在 Electron 的 App 容器中跑起來。

創(chuàng)建 BrowserWindow 實例并讀取 web-app 目錄中的內(nèi)容：

const electron = require("electron")
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

let mainwindow

function createWindow () {

  // Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600})
 // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "./web-app/dist/index.html"),
    protocol: "file:",
    slashes: true
  }))
mainWindow.webContents.openDevTools()

//Open the DevTools
//mainWindow.webContents.openDevTools()

//Emitted when the window is closed.
mainWindow.on("closed",function(){
  // Dereference the window object, usually you would store windows

  // in an array if your app supports multi windows, this is the time

  // when you should delete the corresponding element.
   mainWindow = null

})

完成后使用 npm start 啟動 Electron 即可。

最后點擊這里查看 demo 源碼，同時可通過網(wǎng)站了解SDK接口。