写点什么

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

发布于: 2021 年 06 月 04 日
anyRTC Web SDK 实现音视频呼叫功能

前言

大家好,今天小编带给大家一个基于 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';
复制代码

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

<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>
复制代码


发布于: 2021 年 06 月 04 日阅读数: 10
用户头像

实时交互,万物互联! 2020.08.10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
anyRTC Web SDK 实现音视频呼叫功能