实践解析：Electron实现跨平台视频会议的几种思路

xi4oh4o 发布于2019-08-22 15:32 / 2634人阅读

摘要：而现在我们可以利用多种工具框架进行跨平台开发。实现视频会议的几种思路如何利用实现一个视频会议应用这主要取决于使用什么技术来实现作为业务核心的部分。通过与技术结合，实现了网页端多方音视频通讯，可以快速实现部分的开发。

作者简介：张乾泽，声网 Agora Web 研发工程师

对于在线教育、医疗、视频会议等场景来讲，开发面向 Windows、Mac 的跨平台客户端是必不可少的一步。在过去，每个操作系统的应用需用特定的编程语言编写，每个客户端都需要多带带开发。而现在我们可以利用多种工具、框架进行跨平台开发。Electron 就是其中最热门的一个。

Electron 的前身是Atom Shell，是基于Node.js 和 Chromium 开源项目。它让前端开发者也可以使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。

Electron 兼容 Mac、Windows 和 Linux。利用它构建的应用可在这三个操作系统上面运行。我们在很多著名项目中都能看到它的身影，比如 Slack、Cocos Creator、Visual Studio Code 等 500 多个项目。

本文将为大家分析利用 Electron 做视频会议应用的几种实现思路及其优缺点，同时结合 demo 实例，分享如何基于 Electron 与声网 Agora Web SDK 开发一个视频会议应用。

实现视频会议的几种思路

如何利用 Electron 实现一个视频会议应用？这主要取决于使用什么技术来实现作为业务核心的 RTC 部分。

第一种思路是使用 C++ SDK 来实现。我们可以通过 NodeJS 插件 node-gyp 将 C++ 的库编译成 NodeJS 可以直接使用的文件，界面部分则通过 Web 来实现，最后 RTC 业务部分则使用编译的插件直接调用 C++ 接口。

这种方式的优点是直接调用 C++ 接口，在性能和稳定性上有一定优势。但是，缺点是 Native 模块与 Web 模块的交互会相对复杂。

尽管 NodeJS 可以直接调用 C++ 的接口，但若 C++ 要通过回调向 Node 部分传递数据，则需要确保数据传输到 Electron 所在的线程上， Electron 才可以收到回调。又比如，若 C++ SDK 使用了具有平台差异的动态库依赖，则在使用 node-gyp 编译的过程中必须在不同平台上编译不同的版本才可以在 Electron 中正常使用。

第二种思路是使用 WebRTC，即界面部分和 RTC 业务部分都通过 Web 来实现。

这种方法的优点是集成和调试十分简单，大部分工作可以在浏览器中完成后直接近乎无缝移植到 Electron。

不过，由于 WebRTC 缺少服务端设计和部署方案，我们首先还需要将 WebRTC 与 Janus 等开源项目结合，解决服务器的部署、NAT 穿透等问题，实现 RTC 部分，这也是这种实现方法的难点。但如果通过 Agora Web SDK 来实现 RTC 部分，则不需要担心以上问题，也是目前最快速简便的实现方法。

通过与 WebRTC 技术结合，Agora Web SDK 实现了网页端多方音视频通讯，可以快速实现 RTC 部分的开发。WebRTC 用户的音视频数据经由 Agora.io 的 SD-RTN 实时云传输，可以最大程度上保证公网的传输质量，结合 WebRTC 自有的丢包/丢帧重传，以及带宽预测，动态码率调整等策略，可以达到非常良好的多方通话用户体验。

针对这方面的集成，我们也已经在 Github 上提供了一个开源的 demo 项目。我们下面来简要梳理一下 demo 中如何实现核心音视频通话功能。

基于 Agora Web SDK 实现音视频通话

我们需要在 Electron 环境中创建一个名为 web-app 的目录，在里面创建基本的 Web 部分内容并快速实现一个视频通话通能。

创建 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)

                })

            })

创建本地流并推送：

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

在完成上面的步骤后，你应该就能看到自己的视频画面了，下一步我们要让这部分代码在 Electron 的 App 容器中跑起来。

创建 BrowserWindow 实例并读取 web-app 目录中的内容：

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 源码，同时可通过网站了解SDK接口。

服务器托管超融合服务器最基本的几种 html的几种轮播 js的几种数据类型 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93526.html

优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
Electron，从玩玩具的心态开始，到打造出一款越来越优秀的桌面客户端产品

摘要：首发于酷家乐前端博客标题是我以第一视角基于开发客户端产品的体验，我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触到去开发客户端产品，最后随着业务和功能的复杂度提升再不断地优化客户端。首发于酷家乐前端博客标题是我以第一视角基于 Electron 开发客户端产品的体验，我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Ele...

Markxu 2019-08-21 17:14 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系...

isaced 2019-05-21 19:50 评论0 收藏0