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)
}
相关推荐
小图图几秒前
Claude Code 黑箱揭秘
前端·后端
吃饺子不吃馅12 分钟前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
这里有鱼汤37 分钟前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636021 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js