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 的详细开发教程。