本文主要介绍如何将 RTC Web SDK 集成到你的项目中以及相关注意事项。
开发环境要求
-
一个有效的 开发者账号。
-
一款支持 RTC SDK 的主流浏览器:
浏览器 兼容性 Chrome 49+ ✔ Safari 9+ ✔ Firefox 52+ ✔ 微信浏览器 ✔ QQ 浏览器 10.5+ ✔ Internet Explorer 11+ ✔ -
一台拥有音视频输入输出设备(麦克风)的终端
快速集成
本小节介绍如何获取 AppID 以及如何快速将 SDK 集成到项目中。
获取 AppID
参考以下步骤获取一个 AppID。若已经拥有 AppID,请跳过当前步骤,直接查看操作流程。
引入 SDK
1: 获取 SDK
你可以通过如下几种方式获取最新的 SDK:
-
- 官网下载中心找到 「RTC SDK 下载」 的 Web 端
-
- 前往阿里云 OSS ,
ctrl + s
或command + s
下载
- 前往阿里云 OSS ,
-
- 前往 github
clone
或Download ZIP
下载
- 前往 github
-
- 通过
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) => {
if (mediaType === "audio") {
// 订阅远端用户的音频轨道
await rtcClient.subscribe(user, mediaType);
// 播放远端音频
user.audioTrack.play();
}
});
创建本地音频轨道
该方法枚举可用的音频输入设备,比如麦克风。
调用本方法浏览器会弹出设备授权窗口,由于浏览器安全策略的限制,该操作仅支持在 localhost
、127.0.0.1
或者安全的 HTTPS
环境下进行。
const audioTrack = await ArRTC.createMicrophoneAudioTrack();
发送本地音频流
将本地音频轨道发布至频道中,发布音频轨道之后,远端会收到 user-published
回调。
rtcClient.publish(audioTrack);
退出频道
调用该方法离开频道。
离开频道需要自行释放本地创建的轨道。否则摄像头和麦克风会处于工作的状态,例如:摄像头灯常亮。
rtcClient.leave();
audioTrack && audioTrack.close();
开发注意事项
- 在收发音频流,或者频道操作前,需要确保已经成功加入频道。
- 如果多次监听回调,回调事件会触发多次。
- RTC 支持创建多个
rtcClient
实例。