文档中心

Web

最近更新时间：2023.03.29 11:00:22

首次发布时间：2022.04.06 18:20:37

本文介绍如何创建一个 Web RTC 项目，实现音视频通话功能。

参考示例项目

参考示例项目。

前提条件

根据开通服务获取的 AppID 和 Token。
你可以通过阅读密钥说明了解更多 Token 相关信息。
满足以下条件的计算机
- 搭载 Intel 第二代酷睿处理器或更佳性能的处理器
- 有可用的物理音视频采集设备，如内置摄像头和麦克风
- 安装最新版本的 Chrome 浏览器，并设置为默认浏览器
- 具备互联网连接

查看 Web SDK 的浏览器兼容性。

集成 SDK

下载 RTC Web SDK 包。
将 SDK 解压到项目文件目录下。

.
├── index.html
├── package.json
├── index.js
├── lib
    └── index.min.js

在你的 Web 应用的代码中，添加 RTC SDK 的引用。
1. 使用 npm 方式安装 SDK 时，在实现功能的 js 文件中通过 import VERTC from '@volcengine/rtc'; 引入。
2. 使用离线 SDK 包时，在 html 文件中通过 <script src="${文件路径}/index.min.js"></script> 引入。例如，<script src="./lib/index.min.js" type="text/javascript"></script>。
3. 在 html 文件中通过 CDN 地址引入，最新版本 SDK 的 CDN 地址参见资源获取。

实现功能

一次简单的音视频通话的流程图如下：

alt
实现一次简单的音视频通话主要包含以下步骤：

1. 创建和初始化客户端对象

调用 createEngine 创建一个本地 Engine 引擎对象。

import VERTC,{IRTCEngine} from '@volcengine/rtc';
// 创建 RTC 引擎
const engine:IRTCEngine = VERTC.createEngine(appId);

2. 进入 RTC 房间

调用 engine.joinRoom 加入房间，配置音视频流是否自动发布、订阅
进房后，你可以调用 subscribeStream 修改订阅设置。

import { RoomProfileType } from '@volcengine/rtc';

const config = {
  appId: '填写项目的 appID',
  roomId: '填写 roomId',
  uid:'填写 uid',
  token: '填写 token',
};
const join = () => {
  try {
    await engine
      .joinRoom(
        config.token,
        config.roomId,
        {
          userId: config.uid,
        },
        {
          isAutoPublish: true, // 采集音视频时自动发布到房间
          isAutoSubscribeAudio: true, // 自动订阅音频
          isAutoSubscribeVideo: true, // 自动订阅视频
          roomProfileType:RoomProfileType.communication // 普通音视频通话模式，例如，语音聊天室
        }
      )
  } catch(e) {
    console.error('进房错误：', (e as {
      code: typeof VERTC.ErrorCode;
      message: string;
    }).message);
  }
};

3. 创建和播放本地音视频流

调用 startAudioCapture 、startVideoCapture 采集本地音视频后设置本地播放器，并发布。

import { StreamIndex,MediaType } from '@volcengine/rtc';

async createLocalStream(){
    // 开启本地采集
    await engine.startAudioCapture();
    await engine.startVideoCapture();
    // 设置本地播放器
    engine.setLocalVideoPlayer(StreamIndex.STREAM_INDEX_MAIN, {
      // renderDom 为容器元素的 id。可以为一个空的 div 标签，如 <div id="local-player"></div>
      renderDom: 'local-player'
    });
    // 如果调用 joinRoom 时在 config 中设置了自动发布，这里就不需要发布了
    await engine.publishStream(MediaType.AUDIO_AND_VIDEO)
}
createLocalStream()

4. 订阅和播放房间内的音视频流

监听 onUserPublishStream 事件。以下两种情况你都会收到该事件：
- 进入的房间内，其他用户正在发布音视频流；
- 进入房间后，其他用户发布音视频流
上述事件触发后，远端音视频流对象信息将传入handleUserPublishStream。
调用 setRemoteVideoPlayer 设置远端音视频流播放器。

import { MediaType, StreamIndex } from '@volcengine/rtc';

engine.on(VERTC.events.onUserPublishStream, handleUserPublishStream)；// 收到 VERTC.events.onUserPublishStream 事件后进行相应处理

async function handleUserPublishStream(e: {
    userId: string;
    mediaType: MediaType;
}){
    const player = document.querySelector('#video-container');
    
    await engine.setRemoteVideoPlayer(VERTC.StreamIndex.STREAM_INDEX_MAIN, {
      userId: remoteU.userId,
      renderDom: player,
    });
}

5. 离开 RTC 房间

成功离开房间后，将不会收到房间内任何消息通知，音视频流的发布和接收也将停止。

engine.leaveRoom();

至此，我们实现了基础的音视频通话。

实时音视频

Web