如何高效建设品牌网站,百度收录网站多久,外包做一个网站一般费用,清远市专业网站制作目录
一、声网
1.注册账号
2.新建项目
二、实时音视频集成
1.声网CDN集成
2.iframe嵌入html
3.自定义UI集成
4.提高进入房间速度 web项目需要实现一个多人会议#xff0c;对接的声网的灵动课堂。在这里说一下对接流程。
一、声网
声网成立于2014年#xff0c;是全球…目录
一、声网
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 langheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0!-- 请把 script的src 的版本号替换为你的灵动课堂版本号例如 2.9.40。你可以通过发版说明或 GitHub 仓库分支查看最新版本号。 --scriptsrchttps://download.agora.io/edu-apaas/release/edu_sdk2.9.40.bundle.js/script
/headbodydiv classvideoContainer/divstyle.videoContainer {width: 100%;height: 100%;}/stylescript typetext/javascriptAgoraEduSDK.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
templatediv classappendiframe idiframeEvent srcvideoSW.html width100% height100%/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);
});
/scriptstyle langless scoped
.append {width: 100vw;height: 100vh;
}
/styledocument.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 srcpath/to/your/oss-bucket/edu_sdk.bundle.gz.js //script
验证是否生效 上传成功后在页面加载时打开开发者工具检查此文件的网络请求
