从无到有实现音视频通讯

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

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();

效果展示