Start Interactive Live Video Streaming

This page shows you the minimum code you need to add Interactive Live Streaming Premium into your Electron app by using the Agora Video SDK for Electron.

Prerequisites

In order to follow the procedure in this page, you must have:

• Node.js 6.9.1 or later.
• A Windows or macOS computer with access to the internet. If your network has a firewall, follow the instructions in Firewall Requirements.
• A valid Agora account and an Agora project, please refer to Start using the Agora platform and get the following information from Agora Console:
  • The App ID: A randomly generated string provided by Agora for identifying your app.
  • A temporary token: A token is the credential that authenticates a user when your app client joins a channel. A temporary token is valid for 24 hours.
  • The channel name: A string that identifies the channel.

Project setup

In order to create the environment necessary to integrate Interactive Live Streaming Premium into your app, do the following:

1. 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.

2. Integrate the SDK

   To integrate the SDK into your project, do the following:

   1. 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.

   2. Install project dependencies

      In Terminal, go to the root folder of your project.

      • macOS:

        npm install

      • Windows:

        1. Install the 32-bit version of Electron:

           npm install -D --arch=ia32 electron

        2. Install project dependencies:

           npm install

      If you already have a 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.

Implement a client for Interactive Live Streaming Premium

This section shows how to use the Agora Video SDK to implement video live streaming in your Electron app step by step.

1. Create the user interface

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>

2. Create the main process

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"),
            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();
});

3. Implement the client logic

To implement the minimum client logic of Interactive Live Streaming Premium, you need to do the following things:

1. Call initialize to create an AgoraRtcEngine instance.
2. Call setChannelProfile to set the channel profile as live streaming.
3. Call setClientRole to set the user role as host or audience. The host publishes streams to the channel, and the audience subscribes to the streams.
4. Call enableVideo to enable the video module.
5. Call joinChannel to join a channel.
6. Call setupLocalVideo to set up the local video frame.
7. When another user joins the channel, call setupRemoteVideo to set up the remote video frame.
8. Leave the channel and release all the resources used by 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);
    });

    // For a live streaming scenario, set the channel profile as "1".
    rtcEngine.setChannelProfile(1);

    // Set the user role as "1"(host) or "2"(audience).
    rtcEngine.setClientRole(1);

    // 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, "ChannelName", null, 123456);
});

Test your app

Take the following steps to test your Electron app:

1. 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 if you set the user role as 1(host).

2. Ask a friend to join the live streaming with you on the demo app. Enter the same App ID and channel name.

3. If your friend joins as a host, you should be able to see and hear each other; if as an audience member, you should only be able to see yourself while your friend can see and hear you.

Next steps

Generating a token by hand is not helpful in a production context. Authenticate Your Users with Tokens shows you how to start live streaming with a token that you retrieve from your server.

See also

Agora provides an open-source sample project Agora Electron Quickstart on GitHub that implements interactive live video streaming for your reference.