微信小程序_对接声网

微信小程序_对接声网_视频会议

news2024/9/22 15:42:14

一、开通声网账号

1.注册账号

2.新建项目

3.开启小程序服务

二、对接声网小程序

1.前提条件

2.跑通API示例项目

3.合并两个项目

三、嵌入声网web网页

1.准备html页面

2.web-view组件

开发的微信小程序项目里面有多人会议，对接声网，有两种实现方式，各有利弊，下面分别说一下。

一、开通声网账号

1.注册账号

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

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

2.新建项目

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

每个月有免费的10000分钟。

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

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

查看当前项目信息：

3.开启小程序服务

二、对接声网小程序

1.前提条件

对接声网小程序，你的微信小程序账号需要具备两个条件：

①企业认证，个人的不行。

②拥有以下类目中的一种，这样才能开通实时音视频媒体组件。

小程序官方文档，关于开通实时音视频权限https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

对接声网小程序，要求你的开发代码是微信原生框架（Vanilla）。如果你使用的uniapp，而且你项目已经开发了一部分那也不要慌。说一下解决办法;

uniapp经过编译才在微信开发者工具执行，编译后的代码就是微信原生框架代码，可以在这个基础上对接声网小程序，但是一定注意，把代码拷贝出去，要不然你哪次忘了，重新编译，那对接的代码就没了。

你的uniapp项目运行到微信开发者工具，运行一次后，在你的uniapp项目找到unpackage文件夹，dev文件夹，下面的mp-weixin,就是编译后的微信原生框架代码，拷贝一份出去，直接用微信开发者工具打开，在这个基础上进行接入声网小程序。

2.跑通API示例项目

如果从0开始一点一点往自己的项目集成声网小程序，肯定花费时间更多，我们可以跑通他的示例项目，然后把我们的代码移植过来，改一下路由跳转以及首页即可。

跑通声网小程序API示例项目https://doc.shengwang.cn/doc/rtc/mini-program/get-started/run-demo运行起来之后，用手机扫微信开发者工具预览功能的二维码，进行预览：

注：你需要先在后端创建一个房间，才能获得房间号。

声网创建一个会议房间https://doc.shengwang.cn/doc/flexible-classroom/restful/api/api-classroom#%E5%88%9B%E5%BB%BA%E8%AF%BE%E5%A0%82

3.合并两个项目

如果你的你的项目已经开发了一部分，使用uniapp编译成微信原生框架后。

现在需要合并两个项目，最好是将你的项目移植到声网小程序示例项目上，只需要注意以下几点：

①pinia / vuex 的store文件夹移植。

②对接后端api的封装api文件夹移植。

③app.js、app.json，引入的文件，在声网小程序再添加一下。

④package.json、package-lock.json，将你下载的一些依赖，在声网小程序再下载一下。

三、嵌入声网web网页

小程序对接声网音视频还有一种方式，就是嵌入声网web网页，但是此种方法有很大弊端：

①声网不建议这么做，用户体验不好。

②无法适配手机端样式，画面左侧被截掉一部分，剩余部分需要左右滚动屏幕。我这个是灵动课堂，你在声网选择的实时音视频产品，如果不是声网，则跟我这个显示不一样。但是接入方法一样。滚动前左侧图片，滚动后右侧图片。

1.准备html页面

在阿里云或腾讯云，开一个存储桶（也就几块钱），把下面这个html文件放进去。权限设置为所有都可以访问。

enterSW.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 仓库分支查看最新版本号。 -->

		<script src="https://download.agora.io/edu-apaas/release/edu_sdk@2.9.40.bundle.js"></script>
	</head>

	<body>
		<div class="videoContainer"></div>
		<style>
			.videoContainer {
				width: 100vw;
				height: 100vh;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">

			var fullUrl = window.location.href;
			let data = String(decodeURIComponent(fullUrl)).split('*&=&*')[1];
			let agoraData = data.split(',');
			AgoraEduSDK.config({
				appId: '你的声网appid,在声网项目详情查看',
				region: 'cn'
			});
			// 启动在线课堂。
			AgoraEduSDK.launch(document.querySelector('.videoContainer'), {
				userUuid: agoraData[2],
				userName: agoraData[3],
				roomUuid: agoraData[4],
				roleType: Number(agoraData[5]), // 用户角色：1 为老师，2 为学生, 3助教。
				roomType: Number(agoraData[7]), // 房间类型：0 为一对一，2 为大班课，4 为小班课。
				roomName: agoraData[1],
				pretest: true, // 是否开启课前设备检测。
				rtmToken: agoraData[6],
				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' 即可。
				platform: 'H5',
			});
		</script>
	</body>

</html>

2.web-view组件

要想使用web-view组件，需要先在微信公众平台，也就是小程序后台，填写业务域名。需要是企业认证账号，个人不行。然后填写上一步enterSW.html所在域名，并根据提示进行校验。

在你的小程序项目里面，使用web-view组件，引入上面的html，并给他传参。

index.vue

<template>
	<web-view :src="'你的存储桶地址/enterSW.html?data*&=&*' + encodeURI(videoData)"></web-view>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

const state = reactive({
	videoData: []
});
const { videoData} = toRefs(state);

// 从后端获得videoData数组,并赋值给state.videoData 。
// videoData包含这些数据（theme(房间名字)、userUuid、userName、roomUuid、rtmRole、rtmToken、roomType）

</script>

<style scoped lang="scss">

</style>

后端创建一个房间，并传参给前端，此时就可以进入房间了。如果你想从enterSW.html,给小程序页面传参，参考这个：

web-view组件能力https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html