实时音视频
实时音视频
文档指南
请输入
- 文档首页
实时音视频实时音视频快速入门实现音视频通话Electron
复制全文
下载 pdfElectron
文档反馈
问问助手通过本文的指引，你可以在集成 RTC SDK 后，快速构建基础应用，实现基本实时音视频通话。
前提条件
- 有效的 AppId 和临时 Token。
- PC：Windows 或 macOS 操作系统，可访问互联网。
- 自 RTC SDK V3.50 版本，支持使用搭载 arm64 架构芯片的 macOS 进行开发。
- Electron 开发环境。
操作步骤
1. 创建项目
创建项目文件夹，并创建以下文件：
- package.json: 用于安装和管理项目依赖项。
- index.html：用于设计 app 的用户界面。
- main.js：主进程文件。
- renderer.js：渲染进程文件。
如果项目尚未初始化，在项目根目录运行以下命令，并将 package.json 中的 main 设为 main.js：
npm init -y
npm install electron@11 --save-dev
在 package.json 的 scripts 中添加启动命令：
"start": "electron ."
2. 集成 SDK
【推荐】NPM 方式
在项目的根目录运行以下命令：
npm install @volcengine/vertc-electron-sdk --save
离线方式
- 下载 Electron SDK
- 将下载的 SDK 复制到项目目录中，例如 node_modules/@volcengine/vertc-electron-sdk。
3. 实现视频通话
安装完成后，通过如下代码将 SDK 引入项目：
const SDK = require('@volcengine/vertc-electron-sdk');
创建用户界面
将以下代码复制到 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" style="width: 240px; height: 180px; background-color: lightblue;"></div>
<!--远端视频窗口 -->
<div id="join-channel-remote-video" style="width: 240px; height: 180px; background-color: lightblue;"></div>
</body>
</html>
主进程
以下代码复制到 main.js 文件，实现基本的 Electron 项目主进程
const { app, BrowserWindow, systemPreferences } = 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,
contextIsolation: false
}
})
// 加载 index.html 文件的内容
mainWindow.loadFile('./index.html')
// 开启开发者工具
mainWindow.webContents.openDevTools()
}
// 管理 Electron 应用的浏览器窗口
app.whenReady().then(async () => {
await checkAndApplyDeviceAccessPrivilege()
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()
})
申请麦克风和摄像头权限
Mac OS 10.14 以后版本，需要申请麦克风、摄像头权限。在主进程中，调用 Electron 的 systemPreferences.askForMediaAccess() 接口，申请摄像头、麦克风权限。将以下函数添加到同一个 main.js 文件中。
async function checkAndApplyDeviceAccessPrivilege() {
// 检查并申请摄像头权限
const cameraPrivilege = systemPreferences.getMediaAccessStatus('camera');
console.log(`checkAndApplyDeviceAccessPrivilege before apply cameraPrivilege: ${cameraPrivilege}`);
if (cameraPrivilege !== 'granted') {
if (process.platform === 'darwin') {
await systemPreferences.askForMediaAccess('camera');
}
}
// 检查并申请麦克风权限
const micPrivilege = systemPreferences.getMediaAccessStatus('microphone');
console.log(`checkAndApplyDeviceAccessPrivilege before apply micPrivilege: ${micPrivilege}`);
if (micPrivilege !== 'granted') {
if (process.platform === 'darwin') {
await systemPreferences.askForMediaAccess('microphone');
}
}
}
渲染进程
实现视频通话需要进行以下步骤
- 创建 RTCEngine 实例。
- 调用 createRTCEngine 初始化引擎，传入包含 AppId 和私有参数的 EngineConfig。
- 调用 startVideoCapture 开启视频采集。
- 调用 startAudioCapture 开启音频采集。
- 调用 setupLocalVideo 设置本地视图。
- 在 RTCEngine 实例中调用 createRTCRoom 创建房间实例。
- 在房间实例中调用 joinRoom 加入房间。将 user_visibility 设为 true，允许当前用户发布音视频流；通过房间配置分别控制音频和视频的自动发布与订阅。
- 从 onUserPublishStreamVideo 回调取得远端 stream_id。远端发布视频流时，调用 setupRemoteVideo 设置远端视图；远端取消发布时，调用 removeRemoteVideo 解除绑定。
- rtcRoom.joinRoom(token, { uid: userId }, true, roomConfig);
- 离开房间，并释放房间和引擎实例。
- // 离开房间rtcRoom.leaveRoom();// 销毁RTCRoomrtcRoom.destroy();// 销毁 RTCEnginertcEngine.destroyRTCEngine();
基础音视频通话 API 时序图：
将如下代码复制到 renderer.js 文件，
window.addEventListener('DOMContentLoaded', () => {
const { RTCEngine } = require('@volcengine/vertc-electron-sdk');
// 填入你的 AppId 和 Token
const APP_ID = '';
const token = '';
// 填入你的 Room ID 和 User ID
const roomId = 'test_room';
const userId = 'test_user';
const localVideoContainer = document.getElementById('join-channel-local-video');
const remoteVideoContainer = document.getElementById('join-channel-remote-video');
const rtcEngine = new RTCEngine();
const createRet = rtcEngine.createRTCEngine({
app_id: APP_ID,
parameters: JSON.stringify({}),
});
if (createRet !== 0) {
console.error('createRTCEngine failed:', createRet);
return;
}
rtcEngine.startVideoCapture();
rtcEngine.startAudioCapture();
rtcEngine.setupLocalVideo(localVideoContainer);
const roomConfig = {
room_profile_type: 1,
is_auto_publish_audio: true,
is_auto_publish_video: true,
is_auto_subscribe_audio: true,
is_auto_subscribe_video: true,
};
const rtcRoom = rtcEngine.createRTCRoom(roomId);
rtcRoom.on('onUserPublishStreamVideo', (streamId, streamInfo, isPublish) => {
if (streamInfo.is_screen) {
return;
}
if (isPublish) {
rtcEngine.setupRemoteVideo(streamId, remoteVideoContainer);
} else {
rtcEngine.removeRemoteVideo(streamId);
}
});
const ret = rtcRoom.joinRoom(token, { uid: userId }, true, roomConfig);
console.log('join room ret:', ret);
window.addEventListener('beforeunload', () => {
rtcEngine.stopVideoCapture();
rtcEngine.stopAudioCapture();
rtcEngine.removeLocalVideo();
rtcRoom.leaveRoom();
rtcRoom.destroy();
rtcEngine.destroyRTCEngine();
});
});
在项目根目录运行 npm start 启动应用。
4. 打包可执行程序
推荐使用 electron-builder 和 native-ext-loader 工具打包你的 Electron 项目。
安装打包工具
工具安装命令如下：
- electron-builder
- npm install electron-builder@latest --save-dev
- native-ext-loader
- npm install native-ext-loader@latest --save-dev
配置构建文件
- 找到 webpack.config.js。通常你可以在项目根目录找到 webpack.config.js。
- RTC 快速开始 demo 项目中，构建配置文件为 webpack.config.preload.js。
- 对于一个 vue 项目，你可以在 vue.config.js 配置中的 chainWebpack 选项中进行相应配置。
- 对于一个 react 项目，如果是通过 create-react-app 构建的项目，配置文件路径为 node_modules/react-scripts/config/webpack.config.js
- 参考 RTC 快速 Demo 项目的 webpack.config.preload.js 为你的项目进行构建配置。native-ext-loader 将在打包后的 app/@volcengine/vertc-electron-sdk/build/Release 子目录中加载对应 .node 模块。
- rules: [{test: /\.node$/,loader: "native-ext-loader",options: {emit: false,basePath: ["@volcengine/vertc-electron-sdk/build/Release"], // 这里写入火山electron node 模块本地路径},},]
参考 RTC 快速 Demo 项目的 package.json 和 copySdkAddon.js 脚本为你的项目进行配置。
- 在 package.json 指定打包配置，位于项目根目录。
- "main": "main.js",// 指定实际项目入口文件"asar": true,// 用于将 web 资源文件压缩并加密"asarUnpack": "@volcengine/vertc-electron-sdk" // 如果 asar 为true，需要指定 node 模块所在的路径，用来排除需要压缩的 node 模块，否则 node 无法正常加载
- 在 scripts 节点下调整打包命令，在打包时调用 copySdkAddon 脚本，将 node_modules 里 RTC 的 node 复制到 app 目录。
- "scripts": {"start": "electron ./app","build": "npm run buildApp && npm run start","buildApp": "npm run copySdkAddon && npm run buildMain && npm run buildRenderer && npm run buildSetting && npm run buildPreload ","buildMain": "webpack --config webpack.config.main.js --mode development","buildRenderer": "webpack --config webpack.config.renderer.js --mode development","buildPreload": "webpack --config webpack.config.preload.js --mode development","buildSetting": "webpack --config webpack.config.setting.js --mode development","copySdkAddon": "node ./scripts/copySdkAddon.js","packageWin32": "electron-builder --win --ia32 --config builder-config-win.js","packageWin64": "electron-builder --win --x64 --config builder-config-win64.js","packageDarwin": "electron-builder --mac --x64 --config builder-config-mac.js","packageArm64": "electron-builder build --arm64 --config builder-config-arm64.js"},
- 运行打包命令，例如：
- npm run packageWin32
- 成功执行后，打包工具会生成可执行文件。
-
后续步骤
常见问题
Q：使用 electron-builder 工具打包时，node 模块加载报错：RTCEngine is not a constructor。
最近更新时间：2026.10.10 20:08:48
这个页面对您有帮助吗？
有用
有用
无用
无用