anyRtc 实时视频通话

Demo代码地址贴在最后面

业务背景：

中台管理系统与前台实时视频通话，不同源

业务需求：

1. 中台向选定用户（前台）发起视频通话
2. 前台接收视频邀请，选择是否加入视频通话
3. 只能由中台向前台发送视频通话邀请
4. 双方都能主动离开房间

实现逻辑

发布频道

加入(join)指定的房间/频道(channel)，创建各自的音频视频轨道(videoTrack/videoTrack)，并发布(public)到房间中

监听频道的发布

在各自的房间中监听(user-published)对方是否发布音频视频轨道，是的话就播放(play)到指定的元素中

用户接收视频通用邀请逻辑

用户在加入到房间后，通过监听后台是否发布轨道，来表示后台是否发布了视频邀请

离开房间

离开(leave)房间前，先释放视频音频轨道后再离开，否则视频音频轨道会一直开启导致资源浪费

anyRtc简介

anyRTC可实现一对一单聊、多人群聊，同时具备纯语音通话和视频通话功能。也可以实现一对一、多对多的音视频互动直播

• 视频通话，不分主播和观众，所有用户都可自由发言，默认流畅和低延时优先，画质稍低，典型场景如多人视频会议。
• 互动直播，用户区分主播和观众，只有主播可以自由发言，默认高画质优先，典型场景如互动课堂。

视频通话 SDK,不区分用户角色，进入同一个频道即可发布自己的音视频流并自动订阅其他用户的音视频流。

安装 SDK

你可以通过如下几种方式获取最新的 SDK:

• 官网下载中心找到 「RTC SDK 下载」 的 Web 端
• 前往阿里云 OSS ，ctrl + s 或 command + s 下载
• 前往 github clone 或 Download ZIP 下载
• 通过 npm 市场下载

本文使用 npm 引入

npm i ar-rtc-sdk

导入 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 rtcClient = ArRTC.createClient({ mode: "live", codec: "h264" });

核心api

加入房间

加入一个指定的房间，用户在加入房间后才能发布本地的音频视频轨道

const { appid, channel, token, uid } = params
this.rtcClient.join(appid, channel, token, uid)
.then(_ => {
  console.log('加入房间成功回调')
})
.catch(err => {
  console.error('加入房间失败回调', err)
})

params 参数说明：

• appid: 在控制台创建项目并获取App ID，使用相同 App ID的应用才能互相通信。获取App ID 官方文档
• channel：房间/频道名字，可以和用户一起约定，也可以由后端生成统一的房间名。
• token: 是一种动态密钥，通过 App ID、权限密钥、用户名和 Token 有效时间戳等参数生成，安全性较高。在正式生产环境等对安全要求较高的场景中，我们推荐使用 RTC Token 鉴权获取Token 官方文档
• uid: 用于确定用户的唯一标识，也是生成用户对应 token 的参数。

创建本地音频视频轨道

创建本地的视频音频流，可以对该流进行播放也可以把该流数据推送到远端（前提：已经加入某一个房间）

视频轨道

/**
 * 通过摄像头采集的视频创建一个视频轨道。
 * @params config 配置指定文件路径、缓存策略和编码配置 详情请见 CameraVideoTrackInitConfig
 * @params videoTrack 本地摄像头视频轨道 详情请见返回值 CameraVideoTrack
 */
ArRTC.createCameraVideoTrack(config).then((videoTrack) => {
  this.videoTrack = videoTrack
});

音频轨道

/**
 * 创建一个自定义的音频轨道
 * @params config 自定义音频的配置 详情请见 CustomAudioTrackInitConfig
 * @params audioTrack 自定义的音频轨道 详情请见返回值 LocalAudioTrack
 */
ArRTC.createCustomAudioTrack(config).then((audioTrack) => {
  this.audioTrack = audioTrack
});

同步创建

/**
 * 同时创建麦克风音频轨道和摄像头视频轨道。
 * @params audioConfig 采集音频的配置，包括采集设备、编码配置等 详情请见 MicrophoneAudioTrackInitConfig
 * @params videoConfig 采集视频的配置，包括采集设备、编码配置等 详情请见 CameraVideoTrackInitConfig
 * @params audioTrack 本地麦克风音频轨道 详情请见返回值 MicrophoneAudioTrack
 * @params videoTrack 本地摄像头视频轨道 详情请见返回值 CameraVideoTrack
 */
ArRTC.createMicrophoneAndCameraTracks(audioConfig, videoConfig).then(([audioTrack, videoTrack]) => {
  this.videoTrack = videoTrack
  this.audioTrack = audioTrack
});

发布本地的音频视频轨道

把已经创建好的音频视频轨道流推送到房间里，等待房间里的其他用户接收

this.rtcClient.publish([this.videoTrack, this.audioTrack])
  .then((uid) => {
    // 发布成功
  })
  .catch(err => {
    // 发布失败
  })

注意: 发布的轨道之前必须加入房间。发布的轨道如果被主动释放（close），需要执行取消发布操作。

监听对方发布的音频视频流轨道数据

this.rtcClient.on('user-published', async(user, mediaType) => {
    console.log('用户发布音频视频流轨道数据')
    // 订阅远端用户的音视频轨道
    await this.rtcClient.subscribe(user, mediaType)
    // 保存对应的视频音频流对象
    if (mediaType === 'video') {
      this.remoteVideoTrack = user.videoTrack
    }
    if (mediaType === 'audio') {
      this.remoteAudioTrack = user.audioTrack
    }
})

播放视频音频源

本地

使用本地创建的音频视频流播放到指定的标签内，视频需要传入标签的id，音频不需要

this.videoTrack.play('elementId')
this.audioTrack.play()

远程

通过监听远程用户是否发布轨道到房间中，拿到的音频视频对象来播放视频音频流到指定的标签内，同理视频需要传入标签的id，音频不需要

this.remoteVideoTrack.play('elementId')
this.remoteAudioTrack.play()

离开房间

离开房间前需要释放自己的视频音频轨道，否则资源不会自己释放

this.audioTrack.close() // 释放音频设备
this.videoTrack.close() // 释放视频设备
this.rtcClient.leave()

其余API

一些不重要的API请看demo代码里的注释或者官方文档

源码

https://github.com/W1ping/anyRtcMixin

官方文档

anyRtc视频通话：https://docs.anyrtc.io/cn/Video/product_video