Electron develops audio and video

Without further ado, let’s cut to the chase!

Creating the Electron Project

The premise condition

Before developing with Electron, you need to install Node.js.

To check that Node.js is installed correctly, type the following command on your terminal:

node -v
npm -v
Copy the code

Scaffolding creation

Lectron applications follow the same structure as other Node.js projects.

Start by creating a folder and initializing the NPM package.

mkdir my-electron-app && cd my-electron-app
npm init
Copy the code

The electron pack is then installed into the application’s development dependencies.

npm install --save-dev electron
Copy the code

Finally, you want to be able to add a start command under the scripts field in your package.json configuration file by performing Electron as shown below:

{
  "scripts": {
    "start": "electron ."}}Copy the code

The start command enables you to open your application in development mode

npm start
Copy the code

Add this code to the createWindow function in the main.js file to open the console

mainWindow.webContents.openDevTools()
Copy the code

Develop audio and video

The premise

Introduction of anyRTC web RTC SDK local introduction:

<script src="https://ardw.anyrtc.io/sdk/web/[email protected]"></script>
Copy the code

NPM introduction:

npm i ar-rtc-sdk -S
Copy the code

Build the page (easy version style not written)

<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> <! User video container --> <div id="remote-playerlist" class="row video-group"></div>
Copy the code

JS building voice calls (reference to JQ)

// ArRTC client
var client; 
// Store audio and video files
var localTracks = {
	videoTrack: null,
	audioTrack: null};// Store channel users
var remoteUsers = {};
// ArRTC client options
var options = {
	appid: null,
	channel: null,
	uid: null};// Check the SDK version
console.log(ArRTC.VERSION);
// Check the microphone
const Cameras = await ArRTC.getCameras();
// Check the camera
const Microphones = await ArRTC.getMicrophones();
if (Cameras.length || Microphones.length) {
	options.appid = $("#appid").val();
	options.channel = $("#channel").val();
	options.uid = $("#uid").val();
	// Join the channel
	join();
}
async function join(a) {
	// Create a local view
	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"});// User publishing
    client.on("user-published", handleUserPublished);
    // The user stops publishing
	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})`);
	// Publish local videos
	client.publish(Object.values(localTracks));
}
	
// Remote user publishing
function handleUserPublished(user, mediaType) {
	const id = user.uid;
	remoteUsers[id] = user;
	subscribe(user, mediaType);
}
// The remote user stops publishing
function handleUserUnpublished(user) {
	const id = user.uid;
	delete remoteUsers[id];
	$(`#player-wrapper-${id}`).remove();
}
// Subscribe to audio and video published by remote users
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(); }}Copy the code

run

npm start
Copy the code

packaging

Download the electron – packager

npm install --save-dev electron-packager
Copy the code

Add it to scripts in package.json file

 "packager_all": "Electron packager./ anyrTC --all --out./dist --overwrite --electron-version=11.1.1 --ignore=node_modules --icon=./assets/images/favicon.icos"
Copy the code

perform

npm packager_all
Copy the code