PanoVideoCall 的 Electron Demo 開源了

上週咱們發佈了 Flutter SDK，本週咱們來說講 Electron Demo 源碼。Electron是由Github開發，是一個用 HTML、CSS、JavaScript 來構建桌面應用程序的開源庫，能夠打包爲 Mac、Windows、Linux 系統下的應用。在線上教育、視頻會議等行業場景下，桌面端開發都是剛需，可是從0開始構建一套包含實時音視頻和互動白板的雲課堂或視頻會議軟件，須要花費不少時間和人力。拍樂雲Pano開源了 PanoVideoCall(如下簡稱PVC)的 Electron Demo源碼，企業開發者可開箱即用，快速打包上線。

1、豐富的功能

本次 Pano 開源的 PVC Demo 客戶端支持豐富的功能，可同時知足視頻會議和1對N雲課堂需求。客戶端集成Pano高清實時通訊sdk，可直接開啓高性能音視頻通訊，支持桌面共享；同時集成Pano互動白板，實現基本的軌跡同步功能，還支持視角跟隨、文檔轉碼、動態課件和激光筆等其餘豐富的功能，可以知足會議協做、白板教學等多種場景。

2、多平臺支持

本次 Pano 開源的 PVC Demo 客戶端基於Electron，項目代碼徹底使用Javascript編寫，前端開發同窗便可對接，無需 Native 開發，同時支持打包到Windows和macOS，大大下降了開發和維護的成本和難度。開源項目中已經作好了 Windows 和 macOS 的打包配置，開箱即用，可直接運行打包命令打包到對應平臺。

3、項目使用介紹

一、依賴安裝

下載好項目代碼以後，cd 到 Electron/PanoVideoDemoVue 目錄，執行 yarn 或者 npm install 安裝項目依賴(國內安裝Electron 可能會比較慢，項目中已經將下載源指定爲 taobao 源)

二、編譯運行

直接在項目目錄運行yarn dev 或者 npm run dev 啓動項目

使用Mac 的開發者注意不要直接在 VSCode 集成的 shell 中執行，須要使用系統的 shell 或者 iTerm 等運行指令，不然運行出來的應用將沒法彈出權限申請框致使崩潰

三、設置appId和帳號信息

步驟 2 成功運行後會自動生成以下的 app 界面彈出：

填入appId，token，channelId，userId 等便可開啓通話。若是你尚未帳號，能夠進入拍樂雲控制檯頁面（https://console.pano.video/#/user/register），根據指導建立拍樂雲帳號，再進入應用管理頁面建立一個新的應用，得到 AppID，並生成 token。應用運行截圖：

四、配置ICON、應用名稱等

咱們已經貼心地把 icon 指定到了 apppico 目錄，開發人員只須要替改目錄下的資源便可，.icns爲macOS 圖標資源文件 ，.ico 文件爲 Windows 圖標資源文件，應用名稱修改可經過修改 package.json 中 productName字段實現。

五、打包簽名和公證

項目中已經作好了打包的配置，直接運行命令便可完成打包：

• 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 的詳細開發教程。