从无到有实现音视频通讯

由于近年国内外疫情肆虐，全国中小学都开始实行网上授课，很多公司也纷纷推出一些音视频通讯类的产品，由于从无到有研发音视频成本较高，所以大部分公司选择使用由 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();