通过本文的指引，你可以在集成 RTC SDK 后，快速构建基础应用，实现基本实时音视频通话。

• 有效的 App Id 和临时 Token

• PC：Windows 或 MacOS 操作系统。

自 V3.50 版本，支持使用搭载 arm64 架构芯片的 Mac 进行开发。

• Electron 开发环境

创建项目文件夹，并创建以下文件：

• package.json: 用于安装和管理项目依赖项。

• index.html：用于设计 app 的用户界面。

• main.js：主进程文件。

• renderer.js：渲染进程文件。

在项目的根目录运行以下命令：

npm install @volcengine/vertc-electron-sdk --save
powershell

如果当前项目路径尚未配置 package.json，运行上述安装命令前，先运行 npm init 进行初始化配置。

1. 下载 Electron SDK

2. 将下载下来的 SDK 拷贝至你项目的目录中。比如：node_modules/vertc-electron-sdk

安装完成后，通过如下代码将 SDK 引入至你的项目中。比如：vertc-electron-sdk

const SDK = require('vertc-electron-sdk');
// 这里示例从 node_modules 文件引入
// 你也可以将 SDK 放置到适合你的目录
javascript

将以下代码复制到 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>
html

以下代码复制到 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()
})
javascript

Mac OS 10.14 以后版本，需要申请麦克风、摄像头权限。在主进程中，调用 Electron 的 systemPreferences.askForMediaAccess() 接口，申请摄像头、麦克风权限。参考代码如下。

async function checkAndApplyDeviceAccessPrivilege() {
  // 检查并申请摄像头权限
  const cameraPrivilege = systemPreferences.getMediaAccessStatus('camera');
  console.log(`checkAndApplyDeviceAccessPrivilege before apply cameraPrivilege: ${cameraPrivilege}`);
  if (cameraPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('camera');
  }
  // 检查并申请麦克风权限
  const micPrivilege = systemPreferences.getMediaAccessStatus('microphone');
  console.log(`checkAndApplyDeviceAccessPrivilege before apply micPrivilege: ${micPrivilege}`);
  if (micPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('microphone');
  }
javascript

实现视频通话需要进行以下步骤

1. 创建 RTCVideo 实例

2. 调用 createRTCVideo 初始化 RTCVideo，需要传入 appid，本地日志路径，例如：logPath = window.veTools.getLogPath();

3. 使用 startVideoCapture 开启视频采集，在通话中使用视频功能

4. 使用 startAudioCapture 开启音频采集，在通话中使用音频功能

5. 使用 setupLocalVideo 设置本地视图，渲染本地图像

6. 使用 setupRemoteVideo 设置远端视图，在本地渲染远端图像

7. 在 RTCVideo 实例中调用 createRTCRoom 创建 RTCRoom，需要传入 roomId

8. 在 RTCRoom 实例中调用 joinRoom 加入房间，需要传入 token，roomId ，userId，用户信息和房间参数配置。默认自动发布、订阅音视频流。

rtcRoom.joinRoom(token: string,{ uid: string }, roomConfig: RTCRoomConfig): number;
javascript

8. 离开房间，并释放 RTCRoom 和 RTCVideo。

// 离开房间
rtcRoom.leaveRoom(): any;
// 销毁RTCRoom
rtcRoom.destroy(): any;
//销毁RTCVideo
rtcVideo.destroyRTCVideo()

javascript

基础音视频通话 API 时序图：

将如下代码复制到 renderer.js 文件，

window.addEventListener('DOMContentLoaded',() => {
    const SDK = require('vertc-electron-sdk')
    const RTCVideo = SDK.RTCVideo;
   
    const os = require('os')
    const path = require('path')
    
    // 填入你的 App ID
    const APPID = ""
    // 填入你的 Token
    const 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 rtcVideo = new RTCVideo()
    let rtcRoom ;
    rtcVideo.createRTCVideo(APPID,sdkLogPath,JSON.stringify('') )
    
    rtcVideo.on('onFirstRemoteVideoFrameDecoded', (key, info) => {        rtcVideo.setupRemoteVideo(key.user_id,key.room_id, remoteVideoContainer, 1);
    });    
    // 开启视频模块
    rtcVideo.startVideoCapture();
    rtcVideo.startAudioCapture();
        // 加入频道
    let roomConfig = {        room_profile_type: 1,
        is_auto_publish: true,
        is_auto_subscribe_audio: true,
        is_auto_subscribe_video: true
    };
    rtcRoom = rtcVideo.createRTCRoom(roomId);
    let ret = rtcRoom.joinRoom(token,{ uid: userId }, roomConfig);
    rtcVideo.setupLocalVideo(localVideoContainer,roomId)
    console.log('join room ret : ' + ret)    
})
javascript

npm run start
bash