Electron 开发音视频

忘是亡心i 2022-10-06 05:45 260阅读 0赞

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

## 创建 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  
本地引入：[官网下载][Link 1]  
CDN 引入：

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

[Link 1]: https://docs.anyrtc.io/download