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

前言

大家好,今天小编带给大家一个基于 anyRTC Web SDK 实现音视频呼叫的功能(本项目采用vue开发)。网址:yii666.com<

前提条件

在开始写代码之前还需要做一些准备工作,如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下, 详见:开发前期准备网址:yii666.com文章来源地址:https://www.yii666.com/article/332381.html

anyRTC Web SDK 实现音视频呼叫功能文章来源地址https://www.yii666.com/article/332381.html文章地址https://www.yii666.com/article/332381.html

操作流程

下载并引入项目依赖

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

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

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

anyRTC Web SDK 实现音视频呼叫功能-相关文章

  1. 在Asterisk CLI里面采用originate发起一个呼叫

    Asterisk cli下面可以执行很多命令,originate的用途是发起一个呼叫然后连接到指定的应用或上下文。 跟.call呼叫文件和AMI管理接口里的外呼功能一样,有两种语法格式: 呼叫成功转应用:         originate tech/data application appname appdata 呼叫成功转流程:         origin

  2. Freeswitch使用originate转dialplan

    概述Freeswitch是一款非常好用的开源VOIP软交换平台。最近在对fs做一些功能测试,测试的过程中产生的一个需求,如何从fs发起呼叫并把后续的呼叫流程转到某一个dialplan上,这样在测试时会非常方便好用,可以随时修改dialplan定制业务流程。通过对fs官方文档搜索后,排除了“

  3. freeswitch拨打分机号

    概述电话语音服务中,有一种稍微复杂的场景,就是总机分机的落地场景,客户拨打总机号码之后,需要再拨打分机号转接到指定的话机。分机号的拨打一般在总机接通之后,会有语音提示,总机收号之后转接分机。分机号转接的实现方式其实和IVR的实现方式是一致的,都是

  4. FreeSWITCH小结:呼叫的发起与跟踪

    需求描述##虽然现有的FreeSWITCH功能已经很强大,但是很多情况下,为了配合业务上的功能,还需要做一些定制开发。有一个基本需求是:如何控制fs外呼,并跟踪外呼后的一系列状态。解决方案##下面我就把自己现有的解决方案跟大家分享下,以便抛砖引玉,引出大家更好的方

  5. Android呼叫管理服务之会话发起协议(SIP)API

    原文:http://android.eoe.cn/topic/android_sdkAndroid提供了一个支持会话发起协议(SIP)的API,这可以让你添加基于SIP的网络电话功能到你的应用程序。Android包括一个完整的SIP协议栈和集成的呼叫管理服务,让应用轻松无需管理会话和传输层的沟通就可设置传出和传入的语音通话,或直

  6. 小睿开始呼叫用户,然后FS怎么跟用户交互的整个流程原理

    学习从小睿开始呼叫用户,然后FS怎么跟用户交互的整个流程原理;    1.小睿向欣方新发起呼叫请求;    2.欣方新可以通过线路发起SIP协议请求,来呼叫用户;    3.当用户接通后,将建立起双方的基本呼叫场景;    4.然后欣方新将保持对用户的呼叫请求;而用户将会断开对欣方新的

  7. 呼叫转接ECT

    ECT(Explicit Call Transfer,呼叫转接)是一种较为特殊的补充业务。签约ECT业务的用户A先呼叫用户B,在与用户B建立通话后,用户A通过终端发起保持用户B呼叫的请求,此时用户B会听到一段背景音乐,并且与用户A的通话暂时断开。用户A紧接着呼叫另一个用户C,在与用户C建立通话

  8. Android网络功能之会话发起协议SIP

    原文:http://android.eoe.cn/topic/android_sdk* 会话发起协议*Android提供了一个支持会话发起协议(SIP)的API,这可以让你添加基于SIP的网络电话功能到你的应用程序。Android包括一个完整的SIP协议栈和集成的呼叫管理服务,让应用轻松无需管理会话和传输层的沟通就可设置传出和传入的

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png