实践分析:Electron中跨平台视频会议的几个思路是必不可少的一步。过去,每个操作系统的应用程序都必须用特定的编程语言编写,每个客户端都必须单独开发。现在我们可以使用多种工具和框架进行跨平台开发。电子是最受欢迎的之一。Electron的前身是AtomShell,它基于Node.js和Chromium开源项目。它还允许前端开发人员使用JavaScript、HTML和CSS构建跨平台桌面应用程序。Electron与Mac、Windows和Linux兼容。用它构建的应用程序可以在所有三个操作系统上运行。我们在很多著名的项目中都能看到它的身影,比如Slack、CocosCreator、VisualStudioCode等500多个项目。本文将分析使用Electron作为视频会议应用的几种实现思路和优缺点。同时,将基于demo实例分享如何使用Electron和AgoraWebSDK开发一个视频会议应用。实现视频会议的几个思路如何使用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部分,这也是本篇的难点所在实施方法。但是,如果通过AgoraWebSDK实现RTC部分,则无需担心上述问题,是目前最快、最简单的实现方式。AgoraWebSDK结合WebRTC技术,实现网页多方音视频通信,可以快速实现RTC部分的开发。WebRTC用户的音视频数据通过声网Agora.io的SD-RTN实时云传输,可以最大程度保证公网传输质量,结合WebRTC自身的丢包/丢帧重传、带宽预测,以及动态码率调整等策略,可以实现非常好的多方通话用户体验。对于此集成,我们还在Github上提供了一个开源演示项目。下面简单回顾一下Demo中核心的音视频通话功能是如何实现的。基于AgoraWebSDK实现音视频通话,我们需要在Electron环境中创建一个名为web-app的目录,在其中创建基本的网页内容,快速实现视频通话功能。创建一个AgoraRTC实例并加入频道:letclient=AgoraRTC.CreateClient({mode:"interop"})初始化appid并加入频道:client.init(options.key,()=>{console.log("AgoraRTC客户端初始化")client.join(options.key,options.channel,options.uid,(uid)=>{console.log("用户"+uid+"加入频道成功")console.log(newDate().toLocaleTimeString())//创建本地流resolve(uid)})})创建本地流并推送:letstream=AgoraRTC.creatStream(merge(defaultConfig.config))localStream.init(()=>{client.publish(localStream,err=>{console.log("Publishlocalstreamerror:"+err);localStream.play("element_id")})},完成以上步骤后,应该可以看到自己的视频画面了,下载第一步是让这部分代码运行在Electron的App容器中。创建BrowserWindow实例并读取web-app目录中的内容:constelectron=require('electron')//Moduletocontrolapplicationlife.constapp=electron.app//Moduletocreatenativebrowserwindow.constBrowserWindow=electron.BrowserWindowletmainwindowfunctioncreateWindow(){//创建浏览器window.mainWindow=newBrowserWindow({width:800,height:600})//并加载应用程序的index.html。mainWindow.loadURL(url.format({pathname:path.join(__dirname,'./web-app/dist/index.html'),protocol:'file:',slashes:true}))mainWindow.webContents.openDevTools()//打开DevTools//mainWindow.webContents.openDevTools()//当窗口关闭时发出。mainWindow.on('closed',function(){//取消引用窗口对象,通常你会存储窗口//在一个数组中,如果你的应用程序支持多窗口,这是你应该删除相应元素的时间//mainWindow=null})完成后使用npmstart启动Electron即可。最后点这里查看demo源码,通过网站了解SDK接口。
