uniapp(小程序) 配置 海康威视-萤石监控(直播替代方案) 踩坑与解决方法_小程序连接监控摄像头

uniapp(小程序) 配置 海康威视-萤石监控(直播替代方案) 踩坑与解决方法

因为公司业务需求需要获取监控的摄像头，萤石是给出了几种方案去实现。

• 直播接入：萤石开放平台API文档
• 小程序接入：萤石开放平台API文档

原计划是使用直播地址接入：

但是出现了报错：我们的设备编码方式是H265的，且无法转译为H264的格式，无法接入直播地址

只能改用小程序内部插入 web-view 的方法来嵌入H5的页面。这里我为了方便（因为已经在小程序上写好页面了才发现这个问题），使用uniapp来写这个 webview 页面。

一、对接萤石监控接口

1、导入 ezuikit.js

npm 获取 ezuikit-js

$ npm install ezuikit-js
1

部分人（比如我）会出现 npm 导入 ezuikit-js 后无法生效的问题，这就需要使用下载到本地引入的方法：

下载地址：EZUIKit-JavaScript

import  EZUIKit from 'ezuikit-js';
1

2、获取监控地址

首先登录你的萤石平台，在设备处找到监控地址：

3、获取 appKey 和 secret

登录后找到你的 appKey 和 secret 用来动态获取 accessToken 接口:

4、调用接口动态获取 accessToken

这里直接给出官方文档：获取Access Token

官方文档描写的比较详细，但是没有具体的代码示例，我在这里贴出来：

<template>
	<view class="MeterOperation-image">
		<view id="video-container"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				obj: {
						appKey: '这是appKey',
						appSecret: '这是appSecret'
					},
			}
		},
	    onLoad() {
			this.getVideo();
		},
		methods: {
			// 获取监控
			getVideo() {
				jq.ajax({
					type: "POST",
					url: "https://open.ys7.com/api/lapp/token/get",
					data: this.obj,
					success: function(res) {
						let accessToken = res.data.accessToken;
						player = new EZUIKit.EZUIKitPlayer({
                            // 视频容器ID，对应上面的view，会自动变成视频
							id: 'video-container', 
							accessToken: accessToken,
							url: '这里是url咧',
							plugin: ['talk'], // 加载插件，talk-对讲
							width: 480,// 视频宽高自己调，4:3 的宽高比
							height: 360,
						});
						window.player = player;
					}
				})
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

可能出现的问题：

• 视频宽度可能太大撑开页面：

  调取萤石的接口，它会通过 id="video-container" 直接在页面上创建一个容器，容器使用你在接口中定义的宽高呈现（px）。在我开发的时候就出现了在安卓上适配，而ios页面会被撑开的问题。解决办法是在父容器设置 overflow: hidden;

5、效果

大概的效果是这样，放的是萤石官网的图，实际实现后只有画面和底部的时间显示，其他效果要另外配置

二、webview 导入微信 weixin-webview-jssdk

因为业务需求，我需要在 webview 设置倒计时的功能，3分钟后跳转回到小程序的首页，并且还要传递参数告知页面已销毁，更新接口。

为了满足这个需求，我需要导入 weixin-webview-jssdk 来实现在 webview 使用微信小程序的API。

官方文档：web-view | 微信开放文档

1、接口说明

web-view 网页中可使用 JSSDK 1.3.2 提供的接口返回小程序页面。 支持的接口有：

这里我要跳回的是首页，也就是 Tabar 页面，要使用 wx.miniProgram.switchTab

销毁时传递参数，要使用 wx.miniProgram.postMessage

2、导入 weixin-webview-jssdk

一开始我还是用了下载到本地，本地引入的方法，发现这个方法不生效后，选择了 npm 导入就可以了

npm install weixin-js-sdk
1

成功导入后我遇到了两个问题：

• 跳转失败
• postMessage 接收不到参数

跳转失败

我为了解决这个问题查了很多文档，一开始是因为导入报错，导入成功后提示找不到路径 switchTab:fail page "pages/tabbar/home/home" is not found

最后找到了原因：我使用的是 绝对路径 而不是 相对路径

错误案例：

wx.miniProgram.switchTab({
	url: '/pages/tabBar/home/home',// 这里的绝对路径是无效的
	success: res => {
		that.tip('退回成功', 'res')
	},
	fail: function(error) {
		// console.log(error);
	},
	complete: function() {
		// console.log('complete');
	}
});
1
2
3
4
5
6
7
8
9
10
11
12

正确案例：

wx.miniProgram.switchTab({
	url: '../tabBar/home/home',// 这里的相对路径生效
	success: res => {
		that.tip('退回成功', 'res')
	},
	fail: function(error) {
		// console.log(error);
	},
	complete: function() {
		// console.log('complete');
	}
});
1
2
3
4
5
6
7
8
9
10
11
12

postMessage 接收不到参数

在这里推荐一篇博客，写的很好（不是我写的），大家可以去看看，包含了H5，uniapp，小程序等多个解决方案，非常详细：uniapp项目webview页面给小程序传参 postMessage 接收不到参数

这里的出错主要是在：

• 传递的参数错误
• 接收的函数出错

传递的参数错误：

postMessage传递的参数必须放在data中，否则无法获取

// 错误示例
wx.miniProgram.postMessage({ data1: 'data',data2:13500000000 })
// 正确示例
wx.miniProgram.postMessage({data:{ data1: 'data',data2:13500000000 }})
1
2
3
4

接收的函数出错：

小程序中的 webview 属性说明：在uniapp中使用了小程序的 bindmessage 属性

官方文档：web-view | 微信开放文档

uniapp中的 webview 属性说明：使用 @message 接收就成功了

官方文档：web-view | uni-app官网

接收代码：

<template>
	<view>
		<web-view @message="handleGetMessage" src=""></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liveToken: '',
			}
		},
		methods: {
			handleGetMessage(e) {
				console.log(e.detail.data)
				this.liveToken = e.detail.data[0];
			},
		}
	}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25