Electron 开发音视频

废话不多说，咱直接进入正题！ ## 创建 Electron 项目 ### 前提条件 > 在使用Electron进行开发之前，需要安装 Node.js。 要检查 Node.js 是否正确安装，请在您的终端输入以下命令： ```java node -v npm -v ``` ### 脚手架创建 > lectron 应用程序遵循与其他 Node.js 项目相同的结构。 首先创建一个文件夹并初始化 npm 包。 ```java mkdir my-electron-app && cd my-electron-app npm init ``` 然后，将 electron 包安装到应用的开发依赖中。 ```java npm install --save-dev electron ``` 最后，您希望能够执行 Electron 如下所示，在您的 ` package.json` 配置文件中的 `scripts` 字段下增加一条 `start` 命令： ```java { "scripts": { "start": "electron ." } } ``` start命令能让您在开发模式下打开您的应用 ```java npm start ``` 在 `main.js` 文件中的 `createWindow` 的函数中加入此代码可以打开控制台 ```java mainWindow.webContents.openDevTools() ``` ## 开发音视频 ### 前提 引入 anyRTC 提供的 web RTC SDK 本地引入：[官网下载](https://docs.anyrtc.io/download) CDN 引入： ```java ``` npm 引入： ```java npm i ar-rtc-sdk -S ``` ### 构建页面(简易版样式没写) ```java

AppID

Channel

Uid

``` ### JS 构建语音通话(引用了JQ) ```java // ArRTC client var client; // 存放音视频 var localTracks = { videoTrack: null, audioTrack: null, }; // 存放频道用户 var remoteUsers = {}; // ArRTC client options var options = { appid: null, channel: null, uid: null， }; // 查看 SDK 版本 console.log(ArRTC.VERSION); // 检测麦克风 const Cameras = await ArRTC.getCameras(); // 检测摄像头 const Microphones = await ArRTC.getMicrophones(); if (Cameras.length || Microphones.length) { options.appid = $("#appid").val(); options.channel = $("#channel").val(); options.uid = $("#uid").val(); // 加入频道 join(); } async function join() { //创建本地视图 const localplayer = $( `

` ); $("#remote-playerlist").append(localplayer); // create ArRTC client client = await ArRTC.createClient({ mode: "rtc", codec: "h264", }); // 用户发布 client.on("user-published", handleUserPublished); // 用户停止发布 client.on("user-unpublished", handleUserUnpublished); [ options.uid, localTracks.audioTrack, localTracks.videoTrack, ] = await Promise.all([ // join the channel client.join( options.appid, options.channel, null, options.uid || null ), // create local tracks, using microphone and camera ArRTC.createMicrophoneAudioTrack(), ArRTC.createCameraVideoTrack(), ]); // play local video track localTracks.videoTrack.play("local-player"); $("#local-player-name").text(`localVideo(${options.uid})`); // 发布本地视频 client.publish(Object.values(localTracks)); } // 远端用户发布 function handleUserPublished(user, mediaType) { const id = user.uid; remoteUsers[id] = user; subscribe(user, mediaType); } // 远端用户停止发布 function handleUserUnpublished(user) { const id = user.uid; delete remoteUsers[id]; $(`#player-wrapper-${id}`).remove(); } // 订阅远端用户发布的音视频 async function subscribe(user, mediaType) { const uid = user.uid; // subscribe to a remote user await client.subscribe(user, mediaType); if (mediaType === "video") { const player = $( `

remoteUser(${uid})

` ); $("#remote-playerlist").append(player); user.videoTrack.play(`player-${uid}`); } if (mediaType === "audio") { user.audioTrack.play(); } } ``` ## 运行 ```java npm start ``` ## 打包 下载 `electron-packager` ```java npm install --save-dev electron-packager ``` 在 `package.json` 文件的 `scripts` 加入 ```java "packager_all": "electron-packager ./ anyrtc --all --out ./dist --overwrite --electron-version=11.1.1 --ignore=node_modules --icon=./assets/images/favicon.icos" ``` 执行 ```java npm packager_all ```

原文地址：https://blog.51cto.com/u_15232255/2896593