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/PanoVideoDemo​github.com

关注拍乐云Pano的知乎号，我们将为大家分享更多关于跨平台开发的经验，以及基于 Pano SDK 的详细开发教程。