写点什么

Agora 教程:结合 Electron 与 Agora SDK 实现视频会议

2020 年 2 月 25 日

Agora 教程:结合 Electron 与 Agora SDK 实现视频会议

对于在线教育、医疗、视频会议等场景来讲,开发面向 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 中正常使用。


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


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


创建 AgoraRTC 实例并加入频道:


1let client = AgoraRTC.CreateClient({mode:"interop"}) 
复制代码


初始化 appid 并加入频道:


1 client.init(options.key, () => {2                console.log("AgoraRTC client initialized")3                client.join(options.key, options.channel, options.uid, (uid) => {4                    console.log("User " + uid + " join channel successfully")5                    console.log(new Date().toLocaleTimeString())6                    // create localstream7                    resolve(uid)8                })9            })
复制代码


创建本地流并推送:


1let stream = AgoraRTC.creatStream(merge(defaultConfig.config))2localStream.init(() =>{3           client.publish(localStream, err => {4                  console.log("Publish local stream error: " + err);5                  localStream.play("element_id")6           })7},
复制代码


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


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


 1const electron = require('electron') 2// Module to control application life. 3const app = electron.app 4// Module to create native browser window. 5const BrowserWindow = electron.BrowserWindow 6let mainwindow 7function createWindow () { 8  // Create the browser window. 9mainWindow = new BrowserWindow({width: 800, height: 600})10 // and load the index.html of the app.11  mainWindow.loadURL(url.format({12    pathname: path.join(__dirname, './web-app/dist/index.html'),13    protocol: 'file:',14    slashes: true15  }))16mainWindow.webContents.openDevTools()17//Open the DevTools18//mainWindow.webContents.openDevTools()19//Emitted when the window is closed.20mainWindow.on('closed',function(){21  // Dereference the window object, usually you would store windows22  // in an array if your app supports multi windows, this is the time23  // when you should delete the corresponding element.24   mainWindow = null25})
复制代码


完成后使用 npm start 启动 Electron 即可。


最后附上 demo 源码:https://github.com/AgoraIO/Agora-Web-Electron-Demo


作者介绍:张乾泽,声网 Agora Web 研发工程师


本文转载自声网 Agora 公众号。


原文链接:https://mp.weixin.qq.com/s/DEysouDRmWsnH8Y2mdb_7Q


2020 年 2 月 25 日 17:48256

评论

发布
暂无评论
发现更多内容

第一周作业

Castie!

spring: 我是如何解决循环依赖的?

互联网架构师小马

Java spring 编程 软件开发 循环依赖

产品经理第一周作业

月亮 😝

产品经理训练营

产品经理训练营第一周作业

我不是你的小可爱

产品经理训练营

产品学习笔记01:让正确的事情相继发生

狷介

产品经理训练营

初创团队的团队成长

dowell87

28天写作

第一期作业

糯米~

产品训练营第一课作业

innovator琳

冰山模型 产品训练营

细说MAC地址漂移

网络技术平台

第0期产品经理训练营-第一周作业

nobody

产品经理训练营

产品策略经理岗位要求

赵志广

网络安全 产品安全 产品经理训练营 极客大学产品经理训练营

产品经理训练营之每周作业

vipyinzhiwei

产品经理训练营

产品经理的招聘信息归纳

撒.野

产品经理训练营

大数据知识专栏 - MapReduce工作机制详解

小马哥

大数据 hadoop mapreduce 日更挑战

不同公司产品岗位差异

三生赤水

你真的知道如何删除list集合中特定元素吗

万里无云

Java List remove

【HTML】<blockquote> 和 <q>

学习委员

CSS html html5 前端 28天写作

HDFS杂谈:SnapShot快照

罗小龙

hadoop hdfs 28天写作

写点什么

青城

28天写作

打破 “996” 与 “35岁”魔咒,需要一个“领头羊”

李忠良

28天写作

《清单革命》读书笔记

Young先生

读书笔记 读书感悟 清单革命

产品经理学习第一次作业

海风涯

产品训练营第一周总结

mayue

产品 总结 产品经理训练营

产品经理训练营之第一章作业

vipyinzhiwei

产品经理训练营

智能合约业务场景探索(二)

石君

智能合约 28天写作

第一章作业

大小姐

G20210639010067-产品训练营第一次作业

Wangyunnfei

Windows DHCP最佳实践(一)

Young先生

windows Windows Server 2012 R2 DHCP

读书笔记:《异类》

lidaobing

28天写作 异类

第一周作业

胜负师

作业

《追风筝的人》读书笔记

Young先生

读书笔记 读书感悟 追风筝的人

Agora 教程:结合 Electron 与 Agora SDK 实现视频会议-InfoQ