前言

大家好，今天小编带给大家一个基于 anyRTC Web SDK 实现音视频呼叫的功能（本项目采用vue开发）。

前提条件

在开始写代码之前还需要做一些准备工作，如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下， 详见：开发前期准备

操作流程下载并引入项目依赖

npm i ar-rtm-sdk -Snpm i ar-rtc-sdk -S

import ArRTM from 'ar-rtm-sdk';import ArRTC from 'ar-rtc-sdk';import config from '../config';

export default {    appid: '', // anyRTC 控制台生成的 appid (详见前提条件)    uid: 'web' + Math.floor(Math.random() * 10000000) // 随机生成本地uid}

data() {    return {        localInvitation: null, // 通过 ArRTMClient.createLocalInvitation 创建的实例        ArRTMClient: null,     // 通过 ArRTM.createInstance 创建的RTM客户端实例        ArRTCClient: null,     // 通过 ArRTC.createClient 创建的客户端对象        audioTrack: null,      // 本地音频轨道        videoTrack: null,      // 本地视频轨道           audioDevices: [],      // 本地音频设备列表        videoDevices: []       // 本地视频设备列表        remoteUid: ''          // 远端用户的 uid    }}

mounted() {    this.getRemoteUid(); // 获取远程用户 uid    this.getDevices();   // 获取音视频设备    this.createTrack();  // 创建本地音视频轨道},

// 获取远端用户 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();},

<!-- 挂断 --><div class='hangUp' @click='handleLeave'>    <img src="../assets/images/hangUp.png" alt=""></div><!-- 重新呼叫 --><div class='replay' @click='callRemote'>    <div>        <img src="../assets/images/replay.png" alt="">    </div>    <p>重新呼叫</p></div><!-- 本地视频容器 --><div id='local_video'></div><!-- 远端视频容器 --><div id='remote_video'></div>

<style lang='less' scoped>#call {    position: fixed;    z-index: 90;    top: 0;    left: 0;    right: 0;    bottom: 0；    .hangUp {        position: fixed;        z-index: 999;        left: 0;        right: 0;        bottom: 100px;        margin: auto;        width: 78px;        height: 78px;        cursor: pointer;    }    .replay {        position: fixed;        z-index: 999;        left: 0;        right: 0;        bottom: 100px;        margin: auto;        display: flex;        flex-direction: column;        align-items: center;        div {            width: 78px;            height: 78px;            cursor: pointer;        }        p {            margin-top: 17px;            font-size: 16px;            font-family: PingFang, PingFang-Regular;            font-weight: 400;            color: #fff;        }    }    #local_video {        position: fixed;        z-index: 300;        top: 38px;        left: 32px;        width: 297px;        height: 167px;    }    #remote_video {        position: fixed;        z-index: 200;        top: 0;        bottom: 0;        left: 0;        right: 0;    }}</style>