快速入门视频互动

本文主要介绍如何将 RTC Web SDK 集成到你的项目中以及相关注意事项。

开发环境要求

一个有效的开发者账号。
一款支持 RTC SDK 的主流浏览器:

浏览器兼容性
Chrome 49+ ✔
Safari 9+ ✔
Firefox 52+ ✔
微信浏览器 ✔
QQ 浏览器 10.5+ ✔
Internet Explorer 11+ ✔
一台拥有音视频输入输出设备(麦克风，摄像头)的终端

浏览器	兼容性
Chrome 49+	✔
Safari 9+	✔
Firefox 52+	✔
微信浏览器	✔
QQ 浏览器 10.5+	✔
Internet Explorer 11+	✔

快速集成

本小节介绍如何获取 AppID 以及如何快速将 SDK 集成到项目中。

获取 AppID

参考以下步骤获取一个 AppID。若已经拥有 AppID，请跳过当前步骤，查看操作流程

1. 创建项目

首先我们需要在开发者控制台创建一个「项目」。
2. 获取 APP ID

获取项目的「APP ID」。

引入 SDK

1: 获取 SDK

你可以通过如下几种方式获取最新的 SDK:

1. 官网下载中心找到「RTC SDK 下载」的 Web 端
1. 前往阿里云 OSS ，ctrl + s 或 command + s 下载
1. 前往 github clone 或 Download ZIP 下载
1. 通过 npm 市场下载
该方法需要安装 npm。详见 Install npm。
```
npm i ar-rtc-sdk
```

2: 导入 SDK

导入 SDK 支持以下方式：

script 标签引入

使用 <script> 标签引入的 SDK ，window 对象中会暴露一个 ArRTC 的全局变量。
```
<script src="/<YOUR_PATH>/to/ArRTC@latest.js"></script>
```

ES6 方式引入

import ArRTC from '/<YOUR_PATH>/to/ArRTC@latest.js';

CommonJS 方式引入

var ArRTC = require('/<YOUR_PATH>/to/ArRTC@latest.js');

npm 方式引入

// ES6
import ArRTC from 'ar-rtc-sdk';
// 或者是 commonJS
var ArRTC = require('ar-rtc-sdk');

操作流程

本节内容主要介绍如何实现视频直播。

初始化客户端

通过 ArRTC.createClient 创建本地客户端 rtcClient 的实例。

const client = ArRTC.createClient({ mode: "live", codec: "h264" });

使用相同 App ID 的应用才能互相通信。

加入频道

调用 rtcClient.join 方法加入频道，join 方法需要传入以下四个参数：

appid：anyRTC 控制台获取的 App ID。
channel：通话的频道名称。
token：用于 Token 鉴权，提供应用信息的安全级别。
uid: 用来标识用户身份，无缝对接业务系统。必须为字符串，不可超过 48 字节。可设为空、null 或 "null"。

rtcClient.join(appid, channel, token, uid).then((uid) => {
// 加入成功
});

监听远端用户加入频道

远端用户加入频道会触发 user-joined 回调。

rtcClient.on("user-joined", (user) => {
 ...
});

监听远端用户发布音视频流

远端用户发布音视频流会触发 user-published 回调。可在此回调中订阅远端用户的音视频流。

rtcClient.on("user-published", async (user, mediaType) => {
  // 订阅远端用户的音视频轨道
  await rtcClient.subscribe(user, mediaType);
  if (mediaType === 'video') {
    // 播放远端视频到指定窗口
    user.videoTrack.play("<ELEMENT_ID>");
  } else if (mediaType === 'audio') {
    // 播放远端音频
    user.audioTrack.play();
  }
});

创建本地音频轨道

该方法枚举可用的音频输入设备，比如麦克风。

调用本方法浏览器会弹出设备授权窗口，由于浏览器安全策略的限制，该操作仅支持在 localhost、127.0.0.1 或者安全的 HTTPS 环境下进行。

const audioTrack = await ArRTC.createMicrophoneAudioTrack();

创建本地视频轨道

该方法枚举可用的视频输入设备，比如摄像头。

调用本方法浏览器会弹出设备授权窗口，由于浏览器安全策略的限制，仅支持 localhost、127.0.0.1 或者安全的 https 环境下进行该操作。

const videoTrack = await ArRTC.createCameraVideoTrack();

设置用户身份

直播模式下有两种用户角色：主播和观众，直播模式下默认的角色为观众，RTC 模式下只有主持人角色，不能设置角色。角色为主持人才能发布音视频。

直播模式下，将角色设置为主持人。

rtcClient.setClientRole("host");

发布本地音视频轨道

将本地音视频轨道发布至频道中，发布音视频轨道之后，远端会收到 user-published 回调。

rtcClient.publish([videoTrack, audioTrack]);

退出频道

调用该方法离开频道。

离开频道需要自行释放本地创建的轨道。否则摄像头和麦克风会处于工作的状态，例如：摄像头灯常亮。

rtcClient.leave();
// 释放音视频采集设备
videoTrack && videoTrack.close();
audioTrack && audioTrack.close();

开发注意事项

在收发音频流，或者频道操作前，需要确保已经成功加入频道。
如果多次监听回调，回调事件会触发多次。
RTC 支持创建多个 rtcClient 实例。