从无到有实现音视频通讯

2022-03-09 作者: anyRTC开发者

由于近年国内外疫情肆虐，全国中小学都开始实行网上授课，很多公司也纷纷推出一些音视频通讯类的产品，由于从无到有研发音视频成本较高，所以大部分公司选择使用由提供的 RTC SDK 进行开发，以求产品可以快速上线，并且稳定运行。

提供 web，微信小程序，flutter，ios， android，windows 等平台的 RTC SDK，本文将以 web端为例，从无到有实现一个基础的音视频通讯demo；

开发前提条件

一个有效的。
一款支持 RTC SDK 的主流浏览器:
一台拥有音视频输入输出设备(麦克风，摄像头)的终端

下载 SDK

官网找到「RTC SDK 下载」的 Web 端
前往，或下载
前往或下载
通过市场下载

导入 SDK

script 标签引入

ES6 方式引入

import ArRTC from '//to/ArRTC@latest.js';

CommonJS 方式引入

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

npm 方式引入

import ArRTC from 'ar-rtc-sdk';

操作流程

初始化客户端

通过创建本地客户端的实例。

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

加入频道

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

：anyRTC 控制台获取的 App ID。
：通话的频道名称。
：用于 Token 鉴权，提供应用信息的安全级别。
: 用来标识用户身份，无缝对接业务系统。必须为字符串，不可超过 64 字节，但是不支持字符串 “null”。

rtcClient.join(appid, channel, token, uid).then((uid) => { 
    // 加入成功 可以在这里面开始监听各类事件
});

监听远端用户加入频道

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

rtcClient.on("user-joined", (user) => {
	// 处理逻辑
});

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

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

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

创建本地音频轨道

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

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

const audioTrack = await ArRTC.createMicrophoneAudioTrack();

创建本地视频轨道

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

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

const videoTrack = await ArRTC.createCameraVideoTrack();

发送本地音视频轨道

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

rtcClient.publish([videoTrack, audioTrack]);

退出频道

调用该方法离开频道。

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

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