微信小程序对接萤石云开发平台-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序对接萤石云开发平台。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近收到了一个需求，需要在微信小程序对接萤石云平台，获取到摄像头画面，想到的第一种方法就是得到视频的url地址，直接放到 video 标签下就行了

1、初次尝试

登录萤石云平台，在我的，应用信息中查看AppKey和Secret（用于获取token）
获取token的接口文档地址为：https://open.ys7.com/help/81
拿到这个token后，才能进行后续的获取萤石云平台的设备信息

export function getAccessTokenApi(options: Options) {
	return new Promise((resolve, reject) => {
		const { loading = true } = options
		if (loading) {
			uni.showLoading({
				title: '加载中...'
			})
		}
		uni.request({
			url: 'https://open.ys7.com/api/lapp/token/get',
			method: 'POST',
			header: {
				"Content-Type": "application/x-www-form-urlencoded"  // 这个一定要加上
			},
			data: {
				appKey: appKey,
				appSecret: appSecret
			},
			success(res) {
				resolve(res.data)
				uni.hideLoading()
			},
			fail(err) {
				reject(err)
				uni.hideLoading()
			},
		})
	})
}

按照之前的想法，获取视频url，查看接口文档，确实有拿到视频地址的接口
接口文档地址：https://open.ys7.com/help/1414


interface VideoUrlOpt {
	accessToken: string
	deviceSerial: string
	protocol?: number
}

export function getVideoUrlApi(options: VideoUrlOpt) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: 'https://open.ys7.com/api/lapp/v2/live/address/get',
			method: 'POST',
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			data: {
				...options
			},
			success(res) {
				resolve(res.data)
			},
			fail(err) {
				reject(err)
			}
		})
	})
}

拿到url后，放到video标签中，本以为大功告成，却突然提示
微信小程序接入萤石云摄像头,微信小程序,notepad++,小程序
反复修改参数无果后，觉得这种方法不行，就开始寻找新的方法

2、最终方案

查看萤石云官网，看到了官方给出的一些解决方案
地址：https://open.ys7.com/help/452

需要登录微信公众平台，并且申请插件可半屏小程序，我同时申请了半屏小程序和视频组件，半屏小程序秒同意，组件还需要等，因为时间原因，最终选择了半屏小程序
打开半屏小程序代码如下：

const openVideo = (deviceSerial: string) => {
		const channelNo = 1
		uni.openEmbeddedMiniProgram({
			appId: 'wxf2b3a0262975d8c2',
			path: '/pages/live/live?accessToken=' + accessToken + '&deviceSerial='+ deviceSerial + '&channelNo=' + channelNo
		})
	}