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

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

news 2025/9/17 2:23:16

目录

一、声网

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.注册账号

声网官网icon-default.png?t=N7T8https://sso.shengwang.cn/cn/v4/signup/with-sms点击链接，注册账号。

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

2.新建项目

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

     

每个月有免费的10000分钟。

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

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

查看当前项目信息：

二、实时音视频集成

我的项目是vue3框架的。

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

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

后端_声网创建房间APIicon-default.png?t=N7T8https://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等这些参数值都是后端传过来的。

集成声网灵动课堂icon-default.png?t=N7T8https://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集成灵动课堂icon-default.png?t=N7T8https://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.提高进入房间速度 web项目需要实现一个多人会议&#xff0c;对接的声网的灵动课堂。在这里说一下对接流程。 一、声网 声网成立于2014年&#xff0c;是全球…...

编程日记 2024/8/5 21:24:41

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

在智能制造与自动化生产日益成为主流趋势的今天&#xff0c;慧灵科技凭借其卓越的技术创新能力和产品优势&#xff0c;在机器人领域崭露头角。 自2015年在深圳成立以来&#xff0c;慧灵科技专注于核心技术的研发与产品创新&#xff0c;‌为各行业提供性价比极高的机器人产品及自…...

编程日记 2024/8/5 21:22:39

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

作者&#xff1a; 社区小助手 原文来源&#xff1a; https://tidb.net/blog/5cc4ec70 杭州银行 杭州银行采用 TiDB 作为其核心系统数据库&#xff0c;标志着银行资产规模和业务复杂性的大幅增长。通过"分布式透明化"的思考&#xff0c;杭州银行实现了从传统 Orac…...

编程日记 2024/8/5 21:21:38

JetBrains：XML tag has empty body警告

在xml文件中配置时&#xff0c;因为标签内容为空&#xff0c;出现黄色警告影响观感。 通过IDE配置关闭告警...

编程日记 2024/8/5 21:20:37

XMLDecoder反序列化

XMLDecoder反序列化 基础知识 就简单讲讲吧&#xff0c;就是为了解析xml内容的 一般我们的xml都是标签属性这样的写法 比如person对象以xml的形式存储在文件中 在decode反序列化方法后&#xff0c;控制台成功打印出反序列化的对象。 就是可以根据我们的标签识别是什么成分…...

编程日记 2024/8/5 21:19:36

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

文章目录 一、概述二. 数据分区 (Partitioning)三、Join 操作符1. Join 操作符的基本用法2. Join 操作符示例 四、GroupJoin 操作符1. GroupJoin 操作符的基本用法2. GroupJoin 操作符示例 总结 在数据处理中&#xff0c;联接&#xff08;Join&#xff09;操作是一种非常常见的…...

编程日记 2024/8/5 21:16:34

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

1.question solution: 2.做题步骤 一些解释&#xff1a; <1弱实体把强属性的主键写进去&#xff0c;指向强属性。eg:E6_A13指向E5_A13 <21:1&#xff0c;1:n&#xff0c;m:n&#xff1a;将完全参与的一方&#xff08;双线&#xff09;指向另一方&#xff0c;并将对方的…...

编程日记 2024/8/5 21:15:33

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

模式是一条由三部分组成的通用规则&#xff1a;它代表了一个特定环境、一类问题和一个解决方案之间的关系。每一个模式描述了一个不断重复发生的问题&#xff0c;以及该问题解决方案的核心设计。 软件领域的设计模式定义&#xff1a;设计模式是对处于特定环境下&#xff0c;经常…...

编程日记 2024/8/5 21:13:30

【算法】KMP算法

应用场景 有一个字符串 str1 "BBA ABCA ABCDAB ABCDABD"&#xff0c;和一个子串 str2 "ABCDABD"现在要判断 str1 是否含有 str2&#xff0c;如果含有&#xff0c;就返回第一次出现的位置&#xff0c;如果不含有&#xff0c;则返回 -1 我们很容易想到暴力…...

编程日记 2024/8/5 21:12:29

nginx续1：

八、虚拟主机配置 基于域名的虚拟主机 [rootserver2 ~]# ps -au|grep nginx //查看进程 修改Nginx服务配置&#xff0c;添加相关虚拟主机配置如下 1. [rootproxy ~]# vim /usr/local/nginx/conf/nginx.conf 2. .. .. 3. server { 4. listen …...

编程日记 2024/8/5 21:11:28

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

### 循环队列和阻塞队列 #### 循环队列 - **定义**: 一个固定大小的数组&#xff0c;通过两个指针&#xff08;front 和 back&#xff09;管理队列的头部和尾部元素。 - **特点**: - **循环性**: 当指针到达数组的末尾时&#xff0c;可以回绕到数组的开头&#xff0c;从而利…...

编程日记 2024/8/5 21:09:26

物理笔记-八年级上册

0.梦开始的地方 物理研究什么&#xff1f; 电学&#xff0c;力学&#xff0c;声学&#xff0c;光学&#xff0c;热学。 1.1.1长度的单位 国际基本单位制 单位转换 魔法记忆&#xff1a;千米-米-毫米-微米-纳米&#xff08;进率都是1000&#xff09; 单位换算计算方法 用科学…...

编程日记 2024/8/5 21:08:25

QT键盘和鼠标事件

这些事件都在QWidget 中的保护成员方法中 都是虚函数在头文件中声明了 需要类外重现实现 如果头文件中声明 类外无实现就会报错 void Widget::keyPressEvent(QKeyEvent *event) {switch (event->key()) {//获取按键case Qt::Key_W://按键wqDebug()<<"按下w"…...

编程日记 2024/8/5 21:06:22

文件Io编程基础

1. 标准I/O (stdio.h) stdio.h 是标准C库的头文件&#xff0c;包含了输入输出函数的声明。位置&#xff1a;/usr/include/stdio.h 2. 文件I/O操作步骤 打开文件: 使用 fopen 函数&#xff0c;返回 FILE* 指针。读/写操作: 使用 fread、fwrite、fgets、fputs、fprintf、fscan…...

编程日记 2024/8/5 21:05:21

本地项目提交到Gitee

在项目目录 右键 git bash here 可以在黑屏输入命令 也可以在项目里面 命令都是一样的 要排除哪些 git add . 添加所有文件 git commit -m "Initial commit" 提交到本地 git remote add origin https://gitee.com/xxxx/xxxx.git 添加远程仓库 …...

编程日记 2024/8/5 21:04:21

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

有的朋友可能遇到过&#xff0c;自己注册或购买了谷歌账号以后&#xff0c;在自己的手机上可以正常登录&#xff0c;也完成了相关的设置&#xff0c;看起来一切都很完美&#xff0c;可以愉快地玩耍了。 但是&#xff0c;随后要登录一个游戏的时候&#xff08;或者登录一个新的…...

编程日记 2024/8/5 21:02:19

rsyslog如何配置日志轮转

以下是在 Linux 系统中配置 rsyslog 日志轮转策略的一般步骤&#xff1a; 编辑 rsyslog 的配置文件&#xff0c;通常为 /etc/rsyslog.conf 或 /etc/rsyslog.d/*.conf 。 在配置文件中添加类似以下的日志轮转配置示例&#xff1a; $template myLogs,"/var/log/mylog-%Y%m%d…...

编程日记 2024/8/5 21:00:17

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

文章目录 1. HuggingFace模型下载2. 模型推理&#xff1a;文本问答 1. HuggingFace模型下载 模型在 HuggingFace 下载&#xff0c;如果下载速度太慢&#xff0c;可以在 HuggingFace镜像网站 或 ModelScope 进行下载。 使用HuggingFace的下载命令&#xff08;需要先注册Huggin…...

编程日记 2024/8/5 20:59:16

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

作者&#xff1a;CSDN _养乐多_ 本文将介绍如何实现一个可视化图片和标签信息的查看器&#xff0c;代码使用python实现。点击下一张和上一张可以切换图片。 文章目录 一、脚本界面二、完整代码 一、脚本界面 界面如下图所示&#xff0c; 二、完整代码 使用代码时&#xff0…...

编程日记 2024/8/5 20:58:15

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

搞清楚模型对知识或模式的学习与迁移对于泛化意味什么&#xff0c;或者说两者间的本质&#xff1f;相信大家对泛化性作为大语言模型LLM的突出能力已经非常了解了 - 这也是当前LLM体现出令人惊叹的通用与涌现能力的基础前提&#xff0c;这里不再过多赘述&#xff0c;但仍希望大家…...

编程日记 2024/8/5 20:57:14

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/9/15 13:18:22

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/15 13:18:16

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/9/11 21:14:42

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/8/10 0:21:56

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/9/9 10:09:30

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/8/6 9:00:09

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/8/11 18:29:12