This page shows you the minimum code you need to add Video Call into your Electron app by using the Agora Video SDK for Electron.
In order to follow the procedure in this page, you must have:
In order to create the environment necessary to integrate Video Call into your app, do the following:
Create an Electron project
Create a new directory named agora_electron_quickstart
. For a basic Electron app, create the following files in the directory:
package.json
: The configuration of your Electron project, such as project name and dependencies.index.html
: The visual interface with the user.main.js
: The main process of your Electron app.renderer.js
: The renderer process of your Electron app, where the APIs provided by the Agora SDK are implemented.Integrate the SDK
To integrate the SDK into your project, do the following:
Add the following to package.json
:
macOS:
{
"name": "electron-demo-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"agora_electron": {
"electron_version": "12.0.0",
"platform": "darwin",
"prebuilt": true
},
"devDependencies": {
"agora-electron-sdk": "latest",
"electron": "12.0.0"
}
}
Windows:
{
"name": "electron-demo-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"agora_electron": {
"electron_version": "12.0.0",
"platform": "win32",
"prebuilt": true,
"arch": "ia32"
},
"devDependencies": {
"agora-electron-sdk": "latest",
"electron": "12.0.0"
}
}
Some tips for modifying the properties in package.json
:
electron_version
:To prevent compatibility issues, set it as 12.0.0
, 11.0.0
, 10.2.0
, 9.0.0
, 7.1.2
, 6.1.7
, 5.0.8
, 4.2.8
, 3.0.6
, or 1.8.3
. If you use a Mac device with an M1 chip, sei it as 12.0.0
or 11.0.0
.prebuilt
: To prevent compatibility issues, set it as true
.agora-electron-sdk
: The version number of the Agora SDK for Electron. See Release notes for details.electron
: Set it as the same as electron_version
.Install project dependencies
In Terminal, go to the root folder of your project.
macOS:
npm install
Windows:
Install the 32-bit version of Electron:
npm install -D --arch=ia32 electron
Install project dependencies:
npm install
node_modules
folder in the root folder of your project, Agora recommands deleting the node_modules
folder before installing project dependencies. Otherwise, an error might occur.This section shows how to use the Agora Video SDK to implement Video Call in your Electron app step by step.
To create the user interface, copy the following code into index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Electron Quickstart</title>
</head>
<body>
<h1>Electron Quickstart</h1>
<!--Add a frame for local video -->
<div id="join-channel-local-video"></div>
<!--Add a frame for remote video -->
<div id="join-channel-remote-video"></div>
</body>
</html>
const {app, BrowserWindow} = require("electron");
const path = require("path");
// If you use Electron 9.x or later, be sure to set allowRendererProcessReuse as false
app.allowRendererProcessReuse = false;
function createWindow() {
// Create a browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "renderer.js"),
nodeIntegration: true,
},
});
// Load contents in index.html
mainWindow.loadFile("./index.html");
// Enable developer tools in the browser window
mainWindow.webContents.openDevTools();
}
// Manage the lifecycle of the browser window
app.whenReady().then(() => {
createWindow();
// Open a window if none are open (macOS)
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
// Quit the app when all windows are closed (Windows)
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
To implement the minimum client logic of Video Call, you need to do the following things:
initialize
to create an AgoraRtcEngine
instance.enableVideo
to enable the video module.joinChannel
to join a channel.setupLocalVideo
to set up the local video frame.setupRemoteVideo
to set up the remote video frame.AgoraRtcEngine
.The API call sequence is shown in the following diagram:
Copy the following code into renderer.js
and fill in APPID
, token
, and ChannelName
with values from your Agora project:
window.addEventListener("DOMContentLoaded", () => {
const AgoraRtcEngine = require("agora-electron-sdk").default;
const os = require("os");
const path = require("path");
// Pass your App ID here.
const APPID = "Your App ID";
// Pass your token here.
const token = "Your token";
const localVideoContainer = document.getElementById("join-channel-local-video");
const remoteVideoContainer = document.getElementById("join-channel-remote-video");
const sdkLogPath = path.resolve(os.homedir(), "./test.log");
let rtcEngine = new AgoraRtcEngine();
// Initialize AgoraRtcEngine.
rtcEngine.initialize(APPID);
// Listen for the "joinedChannel" event of the local user.
rtcEngine.on("joinedChannel", (channel, uid, elapsed) => {
// If the local user joins the channel, set up the local video frame.
rtcEngine.setupLocalVideo(localVideoContainer);
});
rtcEngine.on("error", (err, msg) => {
console.log("Error!");
});
// Listen for the "userJoined" event of the remote user.
rtcEngine.on("userJoined", uid => {
// If the remote user joins the channel, set up the remote video frame.
rtcEngine.setupRemoteVideo(uid, remoteVideoContainer);
});
// Enable the video module
rtcEngine.enableVideo();
rtcEngine.setLogFile(sdkLogPath);
// Pass your channel name here, which must be the same as the channel name you filled in to generate the temporary token.
// Join the channel.
rtcEngine.joinChannel(token, "Your channel", null, 123456);
});
Take the following steps to test your Electron app:
In Terminal, go to the root folder of your project and run the following command:
npm start
If the app launches successfully, you should be able to see yourself on the local view.
Ask a friend to join the call with you on the demo app. Enter the same App ID and channel name.
After your friend joins the channel, you should be able to see and hear each other.
Generating a token by hand is not helpful in a production context. Authenticate Your Users with Tokens shows you how to start Video Call with a token that you retrieve from your server.
Agora provides an open-source sample project Agora Electron Quickstart on GitHub that implements Video Call for your reference.