当前位置：首页 > news >正文

Vue3_对接声网实时音视频_多人视频会议

news 2025/7/7 8:48:34

一、声网

1.注册账号

2.新建项目

二、实时音视频集成

1.声网CDN集成

2.iframe嵌入html

3.自定义UI集成

4.提高进入房间速度

web项目需要实现一个多人会议，对接的声网的灵动课堂。在这里说一下对接流程。

一、声网

声网成立于2014年，是全球实时互动云服务开创者和引领者。开发者只需简单调用声网 API，即可在应用内构建多种实时音视频互动场景。声网 API 已经赋能社交直播、教育、游戏电竞、IoT、AR/VR、金融、保险、医疗、企业协作等 20 余行业赛道，共计 200 多种场景。2020年6月26日，声网母公司 Agora, Inc. 成功登陆纳斯达克，股票代码为“API”。截至2023年12月31日，声网全球注册应用数超过74.2万。

声网的实时互动技术服务覆盖全球 200 多个国家和地区。声网的客户包括小米、陌陌、斗鱼、哔哩哔哩、小红书、Yalla等巨头、独角兽及创业企业。

1.注册账号

声网官网https://sso.shengwang.cn/cn/v4/signup/with-sms点击链接，注册账号。

注册后，登录，进入声网首页：

2.新建项目

首先实名认证，然后创建项目。

每个月有免费的10000分钟。

我的项目用的灵动课堂，你可以选择通用项目。

创建完成后，首页左上角选择创建好的项目，如果有多个项目，在这个切换。

查看当前项目信息：

二、实时音视频集成

我的项目是vue3框架的。

后端创建了声网会议房间，前端直接使用cdn进入房间。

创建房间相关接口，都在后端API:

后端_声网创建房间APIhttps://doc.shengwang.cn/doc/flexible-classroom/restful/api/api-classroom#%E5%88%9B%E5%BB%BA%E8%AF%BE%E5%A0%82

先说一下实现方式。使用html引入声网cdn，然后用iframe嵌入到vue页面。传参使用window。

1.声网CDN集成

在vue项目的public文件夹下新建一个文件，videoSW.html

videoSW.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 请把 script的src 的版本号替换为你的灵动课堂版本号，例如 2.9.40。你可以通过发版说明或 GitHub 仓库分支查看最新版本号。 --><scriptsrc="https://download.agora.io/edu-apaas/release/edu_sdk@2.9.40.bundle.js"></script>
</head><body><div class="videoContainer"></div><style>.videoContainer {width: 100%;height: 100%;}</style><script type="text/javascript">AgoraEduSDK.config({appId: window.appidB,region: 'cn'});// 启动在线课堂。AgoraEduSDK.launch(document.querySelector('.videoContainer'), {userUuid: window.userUuid,userName: window.userName,roomUuid: window.roomUuid,roleType: Number(window.roleType), // 用户角色：1 为老师，2 为学生, 3助教。roomType: Number(window.roomType), // 房间类型：0 为一对一，2 为大班课，4 为小班课。roomName: window.roomName,pretest: true, // 是否开启课前设备检测。rtmToken: window.rtmToken,language: 'zh', // 课堂界面的语言。如需界面为英文，设为 'en' 即可。duration: 60 * 30, // 课程时间，单位为秒。// recordUrl: 'https://teaching-research-1314823014.cos.ap-nanjing.myqcloud.com/js/shengwang/edu_sdk.bundle.gz.js',courseWareList: [],webrtcExtensionBaseUrl: 'https://solutions-apaas.agora.io/static', // WebRTC 插件部署地址uiMode: 'light', // 设置课堂界面为明亮模式。如需界面为暗黑模式，设为 'dark' 即可。mediaOptions: {  //（选填）媒体流相关设置，包含媒体流加密、摄像头视频流编码参数配置和屏幕共享视频流编码参数配置。cameraEncoderConfiguration: {width: 160,height: 120,frameRate: 10,bitrate: 100,},lowStreamCameraEncoderConfiguration:{width: 160,height: 120,frameRate: 10,bitrate: 100,}},// 课堂启动状态：ready: 课堂准备完毕 destroyed: 课堂已销毁listener: (evt, args) => {if (evt == 2) {//教室已销毁，传参给父元素，也就是index.vue，然后在index.vue里面进行一些路由跳转。window.parent.postMessage(2)}if (evt == 101) {//被踢出房间window.parent.postMessage(101)}if (evt == 202 && args == 3) {//课堂已结束window.parent.postMessage(202)}},});</script>
</body></html>

window.userUuid等这些参数值都是后端传过来的。

集成声网灵动课堂https://doc.shengwang.cn/doc/flexible-classroom/javascript/get-started/integrate

2.iframe嵌入html

新建一个vue页面，在里面请求需要后端传过来的数据。并且嵌入iframe。

idnex.vue

<template><div class="append"><iframe id="iframeEvent" src="videoSW.html" width="100%" height="100%"></iframe></div>
</template>
<script setup>
import { onMounted, reactive, watchEffect, toRefs, computed, onUnmounted } from "vue";//后端已经新建会议房间，前端直接进入房间，需要从后端获得数据。
//需要这些数据 userUuid、userName、roomUuid、rtmRole、rtmToken、theme（房间名名称）、roomType、appid//以下数据是你从后端请求得到的数据。
let userId = userUuid;
let user = userName;
let roomId = roomUuid;
let role = rtmRole;
let token = rtmToken;
let room = theme;
let eduId = eduId;
let type = roomType;
let appidA = appid;const event = (e) => {if (e.data == 2) {//教室已销毁，填入你的逻辑，进行页面跳转} else if (e.data == 101) {//被踢出房间} else if (e.data == 202) {//课堂已结束}
};onMounted(() => {// 房间参数，传给videoSW.html，然后好进入会议房间document.querySelector("#iframeEvent").contentWindow.userUuid = userId;document.querySelector("#iframeEvent").contentWindow.userName = user;document.querySelector("#iframeEvent").contentWindow.roomUuid = roomId;document.querySelector("#iframeEvent").contentWindow.roleType = role;document.querySelector("#iframeEvent").contentWindow.rtmToken = token;document.querySelector("#iframeEvent").contentWindow.roomName = room;document.querySelector("#iframeEvent").contentWindow.roomType = type;document.querySelector("#iframeEvent").contentWindow.appidB = appidA;window.addEventListener("message", event, false);});onUnmounted(() => {window.removeEventListener("message", event, false);
});
</script><style lang="less" scoped>
.append {width: 100vw;height: 100vh;
}
</style>

document.querySelector("#iframeEvent").contentWindow.userUuid = userId;

contentWindow这个属性：

此时即可进入多人会议了。

你的界面可能和这个不一样，这个是声网的一个低代码产品_灵动课堂，右侧中间部分为白板，也是他们的产品。如果你想更改他的UI，下面介绍一下自定义UI方式集成。

3.自定义UI集成

具体步骤文档写的很详细。

自定义UI集成灵动课堂https://doc.shengwang.cn/doc/flexible-classroom/javascript/get-started/integrate#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89-ui-%E7%9A%84%E6%96%B9%E5%BC%8F%E9%9B%86%E6%88%90如果你不是灵动课堂产品，你就找他相应的文档，按照上面操作即可。

按照文档改完UI后，进行打包：

把 edu_sdk.bundle.js ，放到可以访问的服务器就可以，比如阿里oss或者腾讯云cos存储桶也可以。

4.提高进入房间速度

如果想让进入房间时访问速度加快，就需要使用CDN,步骤如下：

①压缩代码

② 阿里云oss设置

上传文件至阿里云OSS
如果使用阿里云OSS，可以使用管理界面上传。上传文件至OSS后，通过管理界面增加 content-encoding 响应头：

修改引用文件
修改页面中引入的 sdk 文件路径：<script src="path/to/your/oss-bucket/edu_sdk.bundle.gz.js" /></script>

验证是否生效
上传成功后，在页面加载时打开开发者工具，检查此文件的网络请求：

Vue3_对接声网实时音视频_多人视频会议

一、声网

1.注册账号

2.新建项目

二、实时音视频集成

1.声网CDN集成

2.iframe嵌入html

3.自定义UI集成

4.提高进入房间速度

相关文章：

Vue3_对接声网实时音视频_多人视频会议

慧灵科技：创新引领自动化未来

【TiDB 社区智慧合集】TiDB 在核心场景的实战应用

JetBrains：XML tag has empty body警告

XMLDecoder反序列化

C# 高级数据处理：深入解析数据分区 Join 与 GroupJoin 操作的应用与实例演示

数据库典型例题2-ER图转换关系模型

Java：设计模式（单例，工厂，代理，命令，桥接，观察者）

【算法】KMP算法

nginx续1：

循环队列和阻塞有什么关系？和生产者消费者模型又有什么关系？阻塞队列和异步日志又有什么关系

物理笔记-八年级上册

QT键盘和鼠标事件

文件Io编程基础

本地项目提交到Gitee

有了谷歌账号在登录游戏或者新APP、新设备时，要求在手机上点击通知和数字，怎么办？

rsyslog如何配置日志轮转

LLM推理入门实践：基于 Hugging Face Transformers 和 Qwen2模型进行文本问答

python：YOLO格式数据集图片和标注信息查看器

AGI思考探究的意义、价值与乐趣 Ⅴ

Python爬虫实战：研究MechanicalSoup库相关技术

＜6＞-MySQL表的增删查改

golang循环变量捕获问题

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

连锁超市冷库节能解决方案：如何实现超市降本增效

css的定位（position）详解：相对定位绝对定位固定定位

大数据学习（132）-HIve数据分析

Pinocchio 库详解及其在足式机器人上的应用

Spring是如何解决Bean的循环依赖：三级缓存机制

GruntJS-前端自动化任务运行器从入门到实战