写点什么

Electron 开发音视频

发布于: 2021 年 06 月 11 日

废话不多说,咱直接进入正题!

创建 Electron 项目

前提条件

在使用 Electron 进行开发之前,需要安装 Node.js。


要检查 Node.js 是否正确安装,请在您的终端输入以下命令:


node -vnpm -v
复制代码

脚手架创建

lectron 应用程序遵循与其他 Node.js 项目相同的结构。


首先创建一个文件夹并初始化 npm 包。


mkdir my-electron-app && cd my-electron-appnpm init
复制代码


然后,将 electron 包安装到应用的开发依赖中。


npm install --save-dev electron
复制代码


最后,您希望能够执行 Electron 如下所示,在您的 package.json 配置文件中的 scripts 字段下增加一条 start 命令:


{  "scripts": {    "start": "electron ."  }}
复制代码


start 命令能让您在开发模式下打开您的应用


npm start
复制代码


main.js 文件中的 createWindow 的函数中加入此代码可以打开控制台


mainWindow.webContents.openDevTools()
复制代码

开发音视频

前提

引入 anyRTC 提供的 web RTC SDK 本地引入:官网下载CDN 引入:


<script src="https://ardw.anyrtc.io/sdk/web/ArRTC@latest.js"></script>
复制代码


npm 引入:


npm i ar-rtc-sdk -S
复制代码

构建页面(简易版样式没写)

<div>  <p>AppID</P>  <input id="appid" type="text" placeholder="enter appid" required /></div><div>  <p>Channel</P>  <input id="channel" type="text" placeholder="enter channel" required /></div><div>  <p>Uid</P>  <input id="uid" type="text" placeholder="enter uid" required /></div><!-- 用户视频容器 --><div id="remote-playerlist" class="row video-group"></div>
复制代码

JS 构建语音通话(引用了 JQ)

// ArRTC clientvar client; // 存放音视频var localTracks = {  videoTrack: null,  audioTrack: null,};// 存放频道用户var remoteUsers = {};// ArRTC client optionsvar 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 = $(    `   <div class="col-6" id="local_video">     <p id="local-player-name" class="player-name"></p>     <div class="player-with-stats">       <div id="local-player" class="player"></div>       <div id="local-stats" class="stream-stats stats"></div>     </div>   </div>  `  );  $("#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 = $(      `      <div id="player-wrapper-${uid}" class="col-6">        <p class="player-name">remoteUser(${uid})</p>        <div class="player-with-stats">          <div id="player-${uid}" class="player"></div>          <div class="track-stats stats"></div>        </div>      </div>    `    );    $("#remote-playerlist").append(player);    user.videoTrack.play(`player-${uid}`);  }  if (mediaType === "audio") {    user.audioTrack.play();  }}
复制代码

运行

npm start
复制代码

打包

下载 electron-packager


npm install --save-dev electron-packager
复制代码


package.json 文件的 scripts 加入


 "packager_all": "electron-packager ./ anyrtc --all --out ./dist --overwrite --electron-version=11.1.1 --ignore=node_modules --icon=./assets/images/favicon.icos"
复制代码


执行


npm packager_all
复制代码


发布于: 2021 年 06 月 11 日阅读数: 14
用户头像

实时交互,万物互联! 2020.08.10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
Electron 开发音视频