#yyds干货盘点#Electron 开发音视频

创建 Electron 项目

前提条件

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

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

node -v
npm -v

脚手架创建

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

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

mkdir my-electron-app && cd my-electron-app
npm 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

<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 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 = $(
        `
     <div class="col-6" >
         <p  class="player-name"></p>
         <div class="player-with-stats">
             <div  class="player"></div>
             <div  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

秒客网