Real-time video chatting immerses people in the sights and sounds of human connections, keeping them engaged in your app longer.
This page shows the minimum code you need to integrate high-quality, low-latency Video Call function into your app using the Agora RTC SDK for Electron.
The following figure shows the workflow you need to integrate into your app in order to achieve Video Call functionality.
To start Video Call, implement the following steps in your app:
1. Set the role
Set both app clients as the host.
2. Join a channel
Call joinChannel
to create and join a channel. When using the same App ID, users who pass in the same channel name enter the same channel.
3 and 4. Publish and subscribe to audio and video in the channel
After joining a channel, both hosts can publish video and audio stream to the channel and subscribe to each other.
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 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.Follow these steps to integrate the Agora RTC SDK for Electron into your project.
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": {
"platform": "darwin",
"prebuilt": true
},
"dependencies": { "agora-electron-sdk": "latest" },
"devDependencies": { "electron": "latest" }
}
Windows:
{
"name": "electron-demo-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"agora_electron": {
"platform": "win32",
"prebuilt": true,
"arch": "ia32"
},
"dependencies": { "agora-electron-sdk": "latest" },
"devDependencies": { "electron": "latest" }
}
Some tips for modifying the properties in package.json
:
agora-electron-sdk
: The version number of the Agora SDK for Electron. See Release notes for details.
electron
: The Electron version. You can set it as 5.0.0 or later (including the latest verison). If you use a Mac device with an M1 chip, sei it as 11.0.0
or later.
(Optional) platform
: Defaults as darwin
for macOS and win32
for Windows.
(Optional) prebuilt
: Defaults as true
to prevent compatibility issues.
(Optional) arch
: If not set, the script automatically chooses the architecture.
npm install
npm install -D --arch=ia32 electron
npm install
node_modules
folder in the root folder of your project, Agora recommends deleting the node_modules
folder before installing project dependencies. Otherwise, an error might occur.This section introduces how to use the Agora SDK to implement Video Call into your app step by step.
To create a user interface containing a local video frame and a remote video frame, 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"
style="width: 300px; height: 300px; float: left"
></div>
<!--Add a frame for remote video-->
<div
id="join-channel-remote-video"
style="width: 300px; height: 300px; float: left"
></div>
</body>
</html>
To set up a basic main process for your Electron app, copy the following code into main.js
:
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"),
// Set both nodeIntegration and contextIsolation as false
nodeIntegration: false,
contextIsolation: false
},
});
// 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();
});
The following figure shows the API call sequence of implementing Video Call.
To implement this logic, copy the following code into renderer.js
:
const {
createAgoraRtcEngine,
VideoMirrorModeType,
VideoSourceType,
RenderModeType,
ChannelProfileType,
ClientRoleType,
} = require("agora-electron-sdk");
let rtcEngine;
let localVideoContainer;
let remoteVideoContainer;
const EventHandles = {
// Listen for the joining event of the local user.
onJoinChannelSuccess: ({channelId, localUid}, elapsed) => {
// When the local user joins the channel, set up the local video frame.
rtcEngine.setupLocalVideo({
sourceType: VideoSourceType.VideoSourceCameraPrimary,
view: localVideoContainer,
mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
renderMode: RenderModeType.RenderModeFit,
});
},
// Listen for the joining event of the local user.
onUserJoined: (connection, remoteUid, elapsed) => {
// When the remote user joins the channel, set up the remote video frame.
rtcEngine.setupRemoteVideoEx(
{
sourceType: VideoSourceType.VideoSourceRemote,
uid: remoteUid,
view: remoteVideoContainer,
mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
renderMode: RenderModeType.RenderModeFit,
},
{channelId: connection.channelId},
);
},
};
window.onload = () => {
const os = require("os");
const path = require("path");
// Pass your App ID here.
const APPID = "Your App ID";
// Pass your temporary token here.
const token = "Your token";
// Pass the channel name you filled in to generate the temporary token.
const channel = "Your channel name";
localVideoContainer = document.getElementById("join-channel-local-video");
remoteVideoContainer = document.getElementById("join-channel-remote-video");
const sdkLogPath = path.resolve(os.homedir(), "./test.log");
// Create an RtcEngine instance.
rtcEngine = createAgoraRtcEngine();
// Register event handlers
rtcEngine.registerEventHandler(EventHandles);
// Initialize an RtcEngine instance.
rtcEngine.initialize({
appId: APPID,
logConfig: {filePath: sdkLogPath}
});
// For a video call scenario, set the channel profile as LiveBroadcasting.
rtcEngine.setChannelProfile(ChannelProfileType.ChannelProfileLiveBroadcasting);
// Set the user role as ClientRoleBroadcaster (host) or ClientRoleAudience (audience)
rtcEngine.setClientRole(ClientRoleType.ClientRoleBroadcaster);
// By default, video is disabled. You need to call enableVideo to start a video stream.
rtcEngine.enableVideo();
// Start local preview.
rtcEngine.startPreview();
// Join the channel with a temp token.
// You need to specify the user ID yourself, and ensure that it is unique in the channel.
rtcEngine.joinChannel(token, channel, 123456, {});
};
Take the following steps to test your Electron app:
In renderer.js
, replace "Your App ID", "Your token", and “Your channel” with your values from Agora Console. See Getting started with Agora.
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 video call with you on the demo app. Enter the same App ID and channel name.
After your friend joins, you can see and hear each other.
In a test or production environment, use a token server to generate token is recommended to ensure communication security, see Authenticate Your Users with Tokens for details.
This section provides additional information for your reference.
Agora provides an open source API example project Electron API Example on GitHub for your reference.
In addition to integrating the Agora RTC SDK for Electron through npm, you can go to Electron-SDK, manually compile the SDK, and copy the files to your project directory.