本文介绍如何创建一个 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 地址引入，例如， <script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/rtc/4.47.6/1672999438774/VolcEngineRTC_Web_4.47.6.js" /> 引入。最新版本 SDK 的 CDN 地址参见资源获取。

实现功能

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

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

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

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

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

2. 进入 RTC 房间

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

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

const config = {
  appId: '填写项目的appID',
  roomId: '填写roomId',
  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.message);
  }
  
};
typescript

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

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

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

async createLocalStream(){
    await engine.startAudioCapture();
    await engine.startVideoCapture();
    engine.setLocalVideoPlayer(StreamIndex.STREAM_INDEX_MAIN, {
      renderDom: 'local-player'
    });
    // 如果调用 joinRoom 时在 config 中设置了自动发布，这里就不需要发布了
    await engine.publishStream(MediaType.AUDIO_AND_VIDEO)
}
createLocalStream()
typescript

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

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

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

async handleUserPublishStream({ userId }){
    const player = $(`
    <div id="player-wrapper-${userId}" class="player-wrapper re-player">
      <p class="player-name">${userId}</p>
    </div>
    `);
    $('#player-list').append(player);
    
    await engine.setRemoteVideoPlayer(VERTC.StreamIndex.STREAM_INDEX_MAIN, {
      userId: remoteUserId,
      renderDom: player[0],
    });
}
typescript

5. 离开 RTC 房间

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

engine.leaveRoom();
typescript

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