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