web端agora声网互动直播+vue2使用全教程

前言

声网互动直播(Interactive Live Streaming Premium)可以实现一对多,多对多的音视频互动直播。不同于视频通话。视频通话不区分主播和观众,所有用户都可以发言并看见彼此;互动直播的用户分为主播和观众,只有主播可以自由发言,且被其他用户看见。
本文之所以使用vue2版本 是vue3版本使用agora会出现找不到视讯对象这种莫名其妙的bug 又看到文章是说vue3没有this对象 而agoraSDK返回的对象是非react性的 vue会干扰他们 具体的我也没太理解 如果有同学知道的可以评论区交流一下 之前这个莫名其妙的问题研究了很久没整出来 agora官方也没有对应的vue3的bug回应

版本及安装命令

agora版本: 4.15.0

agora安装: npm install agora-rtc-sdk-ng@4.15.0

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串接及使用

  1. 创建agoraRTC链接 点我了解详情
vue 复制代码
// 创建加入频道的agora实例
this.agoraClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
// 加入频道
await this.agoraClient.join(appid, channel, token, uid);
  1. 开启视频流同时发布音频流,音频可以和视频流一起推流 点我了解详情
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");
  1. 开启屏幕分享并推流 点我了解详情
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(){
    // 此处做逻辑处理
})
  1. 获取相关媒体列表 点我了解详情
vue 复制代码
// 获取用户电脑的摄像头列表
this.agoraCamerasList = await AgoraRTC.getCameras()
// 获取用户电脑的麦克风列表
this.agoraMicrophoneList = await AgoraRTC.getMicrophones()
// 获取用户电脑的扬声器列表
this.agoraSpeakerList = await AgoraRTC.getPlaybackDevices()
  1. 相关媒体设备切换 点我了解详情
vue 复制代码
// 摄像头切换(localCameraClient为本地摄像头实例)
this.localCameraClient.setDevice(deviceId).
// 麦克风切换(localCameraClient为本地麦克风实例)
this.localMicrophoneClient.setDevice(deviceId).
// 扬声器切换(remoteUserAudioList为远端用户音频列表实例)
for (let key in this.remoteUserAudioList) {
    this.remoteUserAudioList[key].audioTrack.setPlaybackDevice(deviceId)
}
相关推荐
come1123413 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架