前言
声网互动直播（Interactive Live Streaming Premium）可以实现一对多，多对多的音视频互动直播。不同于视频通话。视频通话不区分主播和观众，所有用户都可以发言并看见彼此；互动直播的用户分为主播和观众，只有主播可以自由发言，且被其他用户看见。
本文之所以使用vue2版本 是vue3版本使用agora会出现找不到视讯对象这种莫名其妙的bug 又看到文章是说vue3没有this对象 而agoraSDK返回的对象是非react性的 vue会干扰他们 具体的我也没太理解 如果有同学知道的可以评论区交流一下 之前这个莫名其妙的问题研究了很久没整出来 agora官方也没有对应的vue3的bug回应
版本及安装命令
agora版本: 4.15.0
agora安装: npm install [email protected]
vue版本: 2.6.1
agora互动直播工作流程图 点我了解详情
账号注册及项目创建
首先第一步需要先去agora官网注册一个账号 然后创建一个测试项目 然后进入console控制中心 去创建一个测试项目 按顺序创建即可
创建完毕账号之后 进入项目配置设置一个频道号并生成一个测试token用于测试（测试token有效期24小时）
拿到项目的appid 频道号 token即可进行下一步代码开发
agora注意事项
- 频道内uid不可重复 重复会导致用户互踢出现异常 uid可不传 不传即是agora自动生成一个频道内不存在的uid
- agora是没有参数可以区分是视频流还是屏幕分享流的 只能根据uid区分 可以根据自己的需求做uid拼接处理用于判断
- Mac电脑使用屏幕分享会存在分享失败的莫名错误 一定要进行异步处理
- 用户外接设备会出现agora获取不到的情况 需要重新拔插或者禁启用来重新获取设备
- agora建议单个频道内最多17位用户同时发流 需要提高上限需要联系客服开通 超过17个流需要的带宽也需要考虑进去 不然会出现频繁的请求超时
agora串接及使用
- 创建agoraRTC链接 点我了解详情
vue
// 创建加入频道的agora实例
this.agoraClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
// 加入频道
await this.agoraClient.join(appid, channel, token, uid);- 开启视频流同时发布音频流，音频可以和视频流一起推流 点我了解详情
vue
// 创建一个视讯的agora实例
this.agoraCameraClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
// 加入频道
await this.agoraCameraClient.join(appid, channel, token, uid);
// 创建视频流
this.localCameraClient = await AgoraRTC.createCameraVideoTrack();
// 创建音频流
this.localMicrophoneClient = await AgoraRTC.createMicrophoneAudioTrack();
// 加入订阅并推流
await this.agoraCameraClient.publish([this.localCameraClient, this.localMicrophoneClient]);
// 播放本地视频（对应id）
this.localCameraClient.play("local-teacherCamera");- 开启屏幕分享并推流 点我了解详情
vue
// 创建屏幕分享流（使用此处异步是因为Mac电脑的Safari浏览器会存在发流失败问题）
const [ screenTrack ] = await Promise.all([
AgoraRTC.createScreenVideoTrack({encoderConfig: "1080p_1"}, 'auto')
])
// 判断是否有同时分享音频
const screenTrackAll = screenTrack
if (screenTrack && screenTrack.length > 1) {
this.localScreenTrack = screenTrack[0]
} else {
this.localScreenTrack = screenTrack
}
// 创建屏幕分享流的agora实例
this.agoraScreenClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
// 加入频道
await this.agoraScreenClient.join(appid, channel, token, uid);
// 加入订阅推流
await this.agoraScreenClient.publish(screenTrackAll);
// 监听屏幕分享事件终止操作 用于做逻辑处理并停止推流
this.localScreenTrack.on("track-ended", function(){
// 此处做逻辑处理
})- 获取相关媒体列表 点我了解详情
vue
// 获取用户电脑的摄像头列表
this.agoraCamerasList = await AgoraRTC.getCameras()
// 获取用户电脑的麦克风列表
this.agoraMicrophoneList = await AgoraRTC.getMicrophones()
// 获取用户电脑的扬声器列表
this.agoraSpeakerList = await AgoraRTC.getPlaybackDevices()- 相关媒体设备切换 点我了解详情
vue
// 摄像头切换（localCameraClient为本地摄像头实例）
this.localCameraClient.setDevice(deviceId).
// 麦克风切换（localCameraClient为本地麦克风实例）
this.localMicrophoneClient.setDevice(deviceId).
// 扬声器切换（remoteUserAudioList为远端用户音频列表实例）
for (let key in this.remoteUserAudioList) {
this.remoteUserAudioList[key].audioTrack.setPlaybackDevice(deviceId)
}