PanoVideoCall 的 Electron Demo 开源了
上周我们发布了 Flutter SDK,本周我们来讲讲 Electron Demo 源码。Electron 是由 Github 开发,是一个用 HTML、CSS、JavaScript 来构建桌面应用程序的开源库,可以打包为 Mac、Windows、Linux 系统下的应用。在线上教育、视频会议等行业场景下,桌面端开发都是刚需,但是从 0 开始构建一套包含实时音视频和互动白板的云课堂或视频会议软件,需要花费很多时间和人力。拍乐云 Pano 开源了 PanoVideoCall(以下简称 PVC)的 Electron Demo 源码,企业开发者可开箱即用,快速打包上线。
一、丰富的功能
本次 Pano 开源的 PVC Demo 客户端支持丰富的功能,可同时满足视频会议和 1 对 N 云课堂需求。客户端集成 Pano 高清实时通信 sdk,可直接开启高性能音视频通信,支持桌面共享;同时集成 Pano 互动白板,实现基本的轨迹同步功能,还支持视角跟随、文档转码、动态课件和激光笔等其他丰富的功能,能够满足会议协作、白板教学等多种场景。
二、多平台支持
本次 Pano 开源的 PVC Demo 客户端基于 Electron,项目代码完全使用 Javascript 编写,前端开发同学即可对接,无需 Native 开发,同时支持打包到 Windows 和 macOS,大大降低了开发和维护的成本和难度。开源项目中已经做好了 Windows 和 macOS 的打包配置,开箱即用,可直接运行打包命令打包到对应平台。
三、项目使用介绍
1、依赖安装
下载好项目代码之后,cd 到 Electron/PanoVideoDemoVue
目录,执行 yarn
或者 npm install
安装项目依赖(国内安装 Electron 可能会比较慢,项目中已经将下载源指定为 taobao
源)
2、编译运行
直接在项目目录运行yarn dev
或者 npm run dev
启动项目
使用 Mac 的开发者注意不要直接在 VSCode 集成的 shell 中执行,需要使用系统的 shell 或者 iTerm 等运行指令,否则运行出来的应用将无法弹出权限申请框导致崩溃
3、设置 appId 和账号信息
步骤 2 成功运行后会自动生成如下的 app 界面弹出:
填入appId
,token
,channelId
,userId
等即可开启通话。如果你还没有账号,可以进入拍乐云控制台页面(https://console.pano.video/#/user/register),根据指导创建拍乐云账号,再进入应用管理页面创建一个新的应用,获得 AppID,并生成 token
。应用运行截图:
4、配置 ICON、应用名称等
我们已经贴心地把 icon 指定到了 apppico
目录,开发人员只需要替改目录下的资源即可,.icns
为 macOS 图标资源文件 ,.ico
文件为 Windows 图标资源文件,应用名称修改可通过修改 package.json
中 productName
字段实现。
5、打包签名和公证
项目中已经做好了打包的配置,直接运行命令即可完成打包:
npm run pkg:win
打包 Windows 平台安装包npm run pkg:mac
打包 macOS 平台安装包
签名和公证:
Windows 平台签名需要
pfx
文件macOS 平台签名需要使用
DeveloperID
证书,打包之后需要公证(notarize)
,项目中已经做好配置,需要在公证的脚本中补充 app 相关的信息和开发者账号以及短密码
上述配置信息均存放在 vue.config.js
中,并做了相应的注释,帮助你轻松上手。
结语
以上 PVC Electron Demo 源代码均开源,你可以在我们 Github 进行下载和体验:
https://github.com/PanoVideo/PanoVideoDemogithub.com
关注拍乐云 Pano 的知乎号,我们将为大家分享更多关于跨平台开发的经验,以及基于 Pano SDK 的详细开发教程。
版权声明: 本文为 InfoQ 作者【拍乐云Pano】的原创文章。
原文链接:【http://xie.infoq.cn/article/687f675911a7f97b118455cce】。文章转载请联系作者。
评论