文档中心





互动直播 (Legacy)

Console 官网社区技术支持





实现视频直播

更新时间 2023/02/01 07:51:45

本文介绍如何使用声网 Electron SDK 实现基础的视频直播功能。

前提条件

正式开始之前，请确保具备以下条件：

Node.js 6.9.1 或更高版本。
可以连网的 Windows 或 macOS 电脑。如果你的网络环境部署了防火墙，请参考应用企业防火墙限制打开相关端口。
一个有效的声网账号以及声网项目。参考开始使用声网平台从声网控制台获得以下信息：
- App ID：声网随机生成的字符串，用于识别你的项目。
- 临时 token：token 也称为动态密钥，在客户端加入频道时对用户鉴权。临时 token 的有效期为 24 小时。
- 频道名：用于标识频道的字符串。

创建 Electron 项目

在本地文件夹中为 Electron 项目新建一个目录，并在项目根目录下创建以下文件：

package.json: 用于安装和管理项目依赖项。
index.html：用于设计 app 的用户界面。
main.js：主进程文件。
renderer.js：渲染进程文件，用于实现与声网 Electron SDK 的交互。

实现视频直播

本节将分步介绍如何在你的 Electron 项目中使用声网 Electron SDK 实现视频直播。

1. 集成 SDK

参考如下步骤，使用 npm 将声网 Electron SDK 集成到你的 Electron 项目：

参考如下代码修改你的 package.json 文件。如果需要安装指定版本的 SDK 和 Electron，请注意以下字段的设置：

electron_version：指定 Electron 的版本号，支持设为 1.8.3、3.0.6、4.2.8、5.0.8、6.1.7、7.1.2、9.0.0、10.2.0、11.0.0、或 12.0.0。
prebuilt：推荐设为 true，防止出现 Electron 或 Node.js 版本与 SDK 不兼容的问题。
agora-electron-sdk：声网 Electron SDK 的版本号。设为 latest 表示获取最新版本的 SDK，其它版本可在 agora-electron-sdk 中查看。
electron：必须和 electron_version 一致。

macOS

如果使用搭载 M1 芯片的 Mac 设备，Electron 的版本号需要设为 11.0.0 或 12.0.0。

 {
     "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"
     }
 }

在终端中进入项目根目录，运行如下命令安装依赖项：
- Windows 平台请先运行 npm install -D --arch=ia32 electron 安装 32 位的 Electron，然后运行 npm install。否则会收到报错：Not a valid win32 application。
- 如果项目根目录下已有 node_modules 文件夹，建议先删除该文件夹，再运行 npm install，以免出现报错。
```
npm install
```

2. 创建用户界面

将以下代码复制到 index.html 文件，创建一个只包含本地视频窗口和远端视频窗口的用户界面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Electron Quickstart</title>
    </head>
    <body>
        <h1>Electron Quickstart</h1>
        <!--在界面中添加本地视频窗口 -->
        <div id="join-channel-local-video"></div>
        <!--在界面中添加远端视频窗口 -->
        <div id="join-channel-remote-video"></div>
    </body>
</html>

3. 设计主进程

将以下代码复制到 main.js 文件，实现基本的 Electron 项目主进程：

const {app, BrowserWindow} = require("electron");
const path = require("path");

// 如果使用 Electron 9.x 及以上版本，需要将 allowRendererProcessReuse 设为 false
app.allowRendererProcessReuse = false;

function createWindow() {
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "renderer.js"),
            nodeIntegration: true,
        },
    });

    // 加载 index.html 文件的内容
    mainWindow.loadFile("./index.html");
    // 开启开发者工具
    mainWindow.webContents.openDevTools();
}

// 管理 Electron 应用的浏览器窗口
app.whenReady().then(() => {
    createWindow();
    // 如果当前没有窗口打开，则新建一个窗口（适用于 macOS）
    app.on("activate", function () {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// 如果所有窗口都已关闭，则退出 Electron 应用（适用于 Windows）
app.on("window-all-closed", function () {
    if (process.platform !== "darwin") app.quit();
});

4. 实现视频直播逻辑

在你的 Electron 项目里实现基础的视频直播功能，至少需要进行以下步骤：

调用 initialize 初始化 AgoraRtcEngine 实例。
调用 setChannelProfile 设置频道场景为直播场景。
调用 setClientRole 设置用户角色为主播或观众。只有主播可以发布音视频流。
调用 enableVideo 启用视频模块。
调用 joinChannel 加入频道。
本地用户加入频道后，调用 setupLocalVideo 设置本地视频窗口。
远端用户加入频道后，调用 setupRemoteVideo 设置远端视频窗口。
离开频道并释放 AgoraRtcEngine 实例。

实现视频互动直播的 API 时序图如下：

你可以将如下代码复制到 renderer.js 文件，实现以上 API 的调用逻辑。复制时需要将 "Your App ID"、"Your token"、“Your channel” 分别替换为你的 App ID、临时 Token 和频道名，详见开始使用声网平台。

window.addEventListener("DOMContentLoaded", () => {
    const AgoraRtcEngine = require("agora-electron-sdk").default
    const os = require("os")
    const path = require("path")

    // 填入你的 App ID
    const APPID = "Your App ID"
    // 填入你的 Token
    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()
    // 初始化 AgoraRtcEngine 实例
    rtcEngine.initialize(APPID)

    // 监听本地用户加入频道事件
    rtcEngine.on("joinedChannel", (channel, uid, elapsed) => {
        // 本地用户加入频道后，设置本地视频窗口
        rtcEngine.setupLocalVideo(localVideoContainer)
    })

    rtcEngine.on("error", (err, msg) => {
        console.log("Error!")
    })

    // 监听远端用户加入频道事件
    rtcEngine.on("userJoined", (uid) => {
        // 远端用户加入频道后，设置远端视频窗口
        rtcEngine.setupRemoteVideo(uid, remoteVideoContainer)
    })

    // 设置频道场景为直播场景
    rtcEngine.setChannelProfile(1)

    // 设置用户角色为主播。如果要以观众身份加入频道，将 1 改为 2
    rtcEngine.setClientRole(1)

    // 开启视频模块
    rtcEngine.enableVideo()

    rtcEngine.setLogFile(sdkLogPath)

    // 填入你的频道名。填入的频道名必须与生成临时 Token 时填入的频道名一致。
    // 加入频道
    rtcEngine.joinChannel(token, "Your channel", null, 123456)
})

运行项目

在终端中进入项目根目录，执行如下命令运行你的 Electron 项目：

npm start

项目成功运行后，你会看到一个自动弹出的窗口。如果设置了用户角色为主播，你可以在窗口中看到本地的视频画面。

你可以邀请一位朋友克隆 API-Examples-Web 项目到本地，在浏览器中打开 Demo/index.html 文件，并输入相同的 App ID、频道名和临时 Token，加入同一频道与 Electron 端互通。成功互通后，主播可以看到自己和其他主播的视频，观众可以看到主播的视频。

后续步骤

为保障通信安全，在正式生产环境中，你需要在自己的 app 服务端生成 Token。详见使用 Token 鉴权。

参考

声网在 GitHub 提供一个开源的声网 Electron Quickstart 示例项目。你可以下载并查看源代码。
除了使用 npm 集成声网 Electron SDK 以外，你也可以进入声网 Electron SDK 手动编译最新的 SDK，集成到应用中。

这篇文章对你有帮助吗？

是

否