Electron 开发音视频

Posted 2021-06-27 anyRTC

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

创建 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/[e-mail]"></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