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 界面弹出:

PanoVideoCall 的 Electron Demo 开源了_第1张图片

填入appIdtokenchannelIduserId 等即可开启通话。如果你还没有账号,可以进入拍乐云控制台页面(https://console.pano.video/#/user/register),根据指导创建拍乐云账号,再进入应用管理页面创建一个新的应用,获得 AppID,并生成 token。应用运行截图:

PanoVideoCall 的 Electron Demo 开源了_第2张图片

4、配置ICON、应用名称等

我们已经贴心地把 icon 指定到了 apppico 目录,开发人员只需要替改目录下的资源即可,.icns为macOS 图标资源文件 ,.ico 文件为 Windows 图标资源文件,应用名称修改可通过修改 package.jsonproductName字段实现。

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

你可能感兴趣的:(PanoVideoCall 的 Electron Demo 开源了)