anyRTC Web SDK 实现音视频呼叫功能

Myth丶恋晨 2022-10-18 00:52 334阅读 0赞

### 前言 ###

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

### 前提条件 ###

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

### 操作流程 ###

#### 下载并引入项目依赖 ####

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 ###

<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>

### CSS ###

[Link 1]: https://juejin.cn/post/6956045461396389901/