anyRTC Web SDK 实现音视频呼叫功能
前言
大家好，今天小编带给大家一个基于 anyRTC Web SDK 实现音视频呼叫的功能（本项目采用vue开发）。
前提条件
在开始写代码之前还需要做一些准备工作，如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下， 详见：
操作流程
下载并引入项目依赖
npm i ar-rtm-sdk -S
npm i ar-rtc-sdk -S
import ArRTM from ‘ar-rtm-sdk‘;
import ArRTC from ‘ar-rtc-sdk‘;
import config from ‘../config‘;
config.js
export default {
appid: ‘‘, // anyRTC 控制台生成的 appid (详见前提条件)
uid: ‘web‘ + Math.floor(Math.random() * 10000000) // 随机生成本地uid
}
data 初始数据
data() {
return {
localInvitation: null, // 通过 ArRTMClient.createLocalInvitation 创建的实例
ArRTMClient: null, // 通过 ArRTM.createInstance 创建的RTM客户端实例
ArRTCClient: null, // 通过 ArRTC.createClient 创建的客户端对象
audioTrack: null, // 本地音频轨道
videoTrack: null, // 本地视频轨道
audioDevices: [], // 本地音频设备列表
videoDevices: [] // 本地视频设备列表
remoteUid: ‘‘ // 远端用户的 uid
}
}
mounted
mounted() {
this.getRemoteUid(); // 获取远程用户 uid
this.getDevices(); // 获取音视频设备
this.createTrack(); // 创建本地音视频轨道
},
methods
// 获取远端用户 uid (这一步可以用输入框代替)
getRemoteUid() {
const remoteUid = this.$route.query.uid;
if (remoteUid) {
this.remoteUid = remoteUid;
this.createClient();
}
},
// 获取音视频设备
async getDevices() {
const [ videoDevices, audioDevices ] = await Promise.all([
ArRTC.getCameras(),
ArRTC.getMicrophones(),
]);
this.videoDevices = videoDevices;
this.audioDevices = audioDevices;
},
// 创建本地音视频轨道
async createTrack() {
this.audioTrack = await ArRTC.createMicrophoneAudioTrack();
// 如果没有摄像头设备就不创建视频轨道
if (this.videoDevices.length) {
this.videoTrack = await ArRTC.createCameraVideoTrack();
}
},
// 创建 RTM 和 RTC 客户端对象
createClient() {
this.ArRTMClient = ArRTM.createInstance(config.appid);
this.ArRTCClient = ArRTC.createClient({ mode: ‘rtc‘, codec: ‘h264‘ });
// 监听远端用户发布音视频流
this.listenUserPublished();
// 监听点对点消息
this.listenMessageFromPeer();
// 登录 RTM
this.ArRTMClient.login({ uid: config.uid }).then(() => {
// 监听远端用户上下线
this.listenPeersOnlineStatusChanged();
// 订阅人员上下线
this.subscribePeersOnlineStatus();
}).catch((err) => {
console.log(err);
});
},
// 监听点对点消息 (这里主要的作用就是远端通过rtm消息，告诉我们他的一些状态)
listenMessageFromPeer() {
this.ArRTMClient.on(‘MessageFromPeer‘, message => {
// 状态码自己约定
if (message.text === ‘100‘) {
// 对方正在通话中
} else if (message.text === ‘200‘) {
// 对方挂断 我们也要离开房间
this.handleLeave();
}
});
},
// 监听远端用户发布音视频流
listenUserPublished() {
this.ArRTCClient.on("user-published", async (user, mediaType) => {
await this.ArRTCClient.subscribe(user, mediaType);
this.inTheCall = true;
if (mediaType === ‘video‘) {
// 播放远端视频 (传入一个dom元素id)
user.videoTrack.play(‘#remote_video‘);
} else if (mediaType === ‘audio‘) {
// 播放远端音频 (音频不需要元素)
user.audioTrack.play();
}
});
},
// 监听远端用户上下线
listenPeersOnlineStatusChanged() {
this.ArRTMClient.on(‘PeersOnlineStatusChanged‘, (status) => {
const ONLINE = status[this.remoteUid] === ‘ONLINE‘;
// 如果对方在线 就发送呼叫邀请
ONLINE && this.callRemote(this.remoteUid);
});
},
// 监听 localInvitation 状态
localInvitationListen() {
// 被叫已接受呼叫邀请时触发
this.localInvitation.on(‘LocalInvitationAccepted‘, (response) => {
// 对方同意接听 本地加入频道
this.joinChannel();
console.log(response, ‘被叫已接受呼叫邀请时触发‘)
});
},
// 加入频道
joinChannel() {
this.ArRTCClient.join(config.appid, config.uid, null, config.uid).then(() => {
this.videoTrack && this.videoTrack.play(‘local_video‘);
// 发布本地音视频
this.audioTrack && this.ArRTCClient.publish(this.audioTrack);
this.videoTrack && this.ArRTCClient.publish(this.videoTrack);
}).catch((err) => {
console.log(err);
});
},
// 订阅人员上下线
subscribePeersOnlineStatus() {
this.ArRTMClient.subscribePeersOnlineStatus([this.remoteUid]);
},
// 呼叫远端用户
callRemote() {
// 创建一个 LocalInvitation 实例
this.localInvitation = this.ArRTMClient.createLocalInvitation(this.remoteUid);
// 监听 localInvitation 状态
this.localInvitationListen();
// 发起呼叫
this.localInvitation.send();
},
// 挂断
handleLeave() {
// 离开频道
this.ArRTCClient.leave();
// 取消已发送的呼叫邀请
this.localInvitation.cancel();
},
HTML
重新呼叫
CSS
原文：https://blog.51cto.com/u_15232255/2856167