由于近年国内外疫情肆虐,全国中小学都开始实行网上授课,很多公司也纷纷推出一些音视频通讯类的产品,由于从无到有研发音视频成本较高,所以大部分公司选择使用由 anyRTC 提供的 RTC SDK 进行开发,以求产品可以快速上线,并且稳定运行。
anyRTC 提供 web,微信小程序,flutter,ios, android,windows 等平台的 RTC SDK,本文将以 web端为例,从无到有实现一个基础的音视频通讯demo;
开发前提条件
-
一个有效的 开发者账号。
-
一款支持 RTC SDK 的主流浏览器:
-
一台拥有音视频输入输出设备(麦克风,摄像头)的终端
下载 SDK
-
官网下载中心找到 「RTC SDK 下载」 的 Web 端
-
前往阿里云 OSS ,
ctrl + s
或command + s
下载 -
前往 github
clone
或Download ZIP
下载 -
通过
npm
市场下载
导入 SDK
-
script 标签引入
使用
<script>
标签引入的 SDK ,window 对象中会暴露一个ArRTC
的全局变量。
<script src="/<YOUR_PATH>/to/[email protected]"></script>
- ES6 方式引入
import ArRTC from '/<YOUR_PATH>/to/[email protected]';
- CommonJS 方式引入
var ArRTC = require('/<YOUR_PATH>/to/[email protected]');
- npm 方式引入
import ArRTC from 'ar-rtc-sdk';
操作流程
初始化客户端
通过 ArRTC.createClient
创建本地客户端 rtcClient
的实例。
const rtcClient = ArRTC.createClient({
mode: "live", codec: "h264" });
加入频道
调用 rtcClient.join
方法加入频道,join
方法需要传入以下四个参数:
-
appid
:anyRTC 控制台获取的 App ID。 -
channel
:通话的频道名称。 -
token
:用于 Token 鉴权,提供应用信息的安全级别。 -
uid
: 用来标识用户身份,无缝对接业务系统。必须为字符串,不可超过 64 字节,但是不支持字符串 “null”。
rtcClient.join(appid, channel, token, uid).then((uid) => {
// 加入成功 可以在这里面开始监听各类事件
});
监听远端用户加入频道
远端用户加入频道会触发 user-joined
回调。
rtcClient.on("user-joined", (user) => {
// 处理逻辑
});
监听远端用户发布音视频流
远端用户发布音视频流会触发 user-published
回调。可在此回调中订阅远端用户的音视频流。
rtcClient.on("user-published", (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();
发送本地音视频轨道
将本地音视频轨道发布至频道中,发布音视频轨道之后,远端会收到 user-published
回调。
rtcClient.publish([videoTrack, audioTrack]);
退出频道
调用该方法离开频道。
注意:离开频道需要自行释放本地创建的轨道。否则摄像头和麦克风会处于工作的状态,例如:摄像头灯常亮。
rtcClient.leave();
// 释放音视频采集设备
videoTrack && videoTrack.close();
audioTrack && audioTrack.close();