Electron 开发音视频

废话不多说，咱直接进入正题！

创建 Electron 项目

前提条件

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

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

node -v

npm -v

脚手架创建

lectron 应用程序遵循与其他 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

本地引入：官网下载

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 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" 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

巴特西