uniapp结合萤石视频ezuikit.js的爬坑记录

本是古典何须时尚 2022-10-23 12:46 1142阅读 0赞

# 1.前言 #

由于开发需要，项目需要接入萤石的视频监控。萤石官方提供了三种协议的的视频方式，hls，rtmp，ezopen。三种协议是视频直播有一定差别，由于hls有十多秒的延迟，不符合项目的要求，并且因为hls，rtmp需要用vedio标签，uniapp会对video标签初始化，

所以本人采用了延迟最低的ezopen。

在使用的过程中遇到了很多很多的坑，即使在尝试别人的解决方案依旧无用。希望这篇文章对使用的同学有所帮助。

# 2.初探 #

看看官方文档，他有一个[UIKit JavaScript][]的demo示例，请使用的同学先下载官方demo示例。同时看看官方文档他是这么描述使用的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1][]

第一步：首页把下载的uikit的js文件放到static下，**注意不能放到其他文件夹下，否则在配置decoderPath地址时，会找不到，导致报错**

![2021030515334918.png][]

第二步：在需要的vue文件下引用uikit.js

<template>
    	<view class="">
    		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="监控详情"></uni-nav-bar>
    		<view class="">
    			<view id="myPlayer"></view>
    		</view>
    	</view>
    </template>
    <script>
    	import EZUIKit from '../../static/js/ezuikit.js'
    	export default {
    		data() {
    			return {
    				device_id: '',
    				accessToken: ""
    			}
    		},
    		onLoad(options) {
    			this.device_id = options.device_id
    			this.accessToken = options.accessToken
    			this.getAddr()
    		},
    		methods: {
    			async getAddr() {
    				let url=`ezopen://open.ys7.com/${this.device_id}/1.hd.live`
    				var player = new EZUIKit.EZUIPlayer({
    					id: 'myPlayer',
    					url: url,
    					autoplay: true,
    					accessToken: this.accessToken,
    					decoderPath: 'static/js/',
    					width: 600,
    					height: 400,
    				});
    				player.play();
    			},
    			clickLeft() {
    				uni.navigateBack({
    					delta: 1
    				});
    			},
    		}
    	}
    </script>
    
    <style>
    </style>

常见的报错信息：

1.注意decoderPath如果写错，会出现报错信息，JSPlugin没有定义，点开报错信息，仔细观看官方文档的同学应该都发现了，其实这个JSPlugind对应就是下图的decorderPath路径，如果你的路径写错了肯定是JSPlugin未定义，

![20210305154021251.png][]

![20210305155529188.png][]

那这个路径到底怎么书写，需要把decoderPath写成'static/js/'才行

2.报错信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2][]

这个报错不知道什么原因导致的，但是给初始化方法加个定时器就好了，知道的小伙伴可以评论告诉我哦！

getAddr() {
    				setTimeout(()=>{
    					let url=`ezopen://open.ys7.com/${this.device_id}/1.hd.live`
    					var player = new EZUIKit.EZUIPlayer({
    						id: 'myPlayer',
    						url: url,
    						autoplay: true,
    						accessToken: this.accessToken,
    						decoderPath: 'stic/js/',
    						width: 600,
    						height: 400,
    					});
    					player.play();
    				},500)
    			},

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 3][]

### **但是在PC端运行正常，但是真机测试时监控出不来！！！！！** ###

发现uniapp结合萤石云必需要写h5页面，需要用到uniapp的webview组件，且app的h5页面要放到项目里面，微信小程序的h5页面需要放到服务器上。

![2021071310143512.png][]

具体操作：

**微信小程序：**

webview.vue文件

<template>
    	<view class="webview">
    		<web-view :src="url" id="webcon" @message="handleMessage">
    		</web-view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				url: '',
    				device_id: '',
    				accessToken: ''
    			}
    		},
    		onLoad(options) {
    			this.device_id = options.device_id
    			this.accessToken = options.accessToken
                //uniapp小程序
    			this.url = "https://wx.hnyfwlw.com/wechat?device_id=" + this.device_id +         "&accessToken=" + this.accessToken
    
                //uniapp App
                this.url = "/static/h5.html?device_id=" + this.device_id + "&accessToken=" + this.accessToken
    			//设置 webview 界面的状态栏的 title
    			uni.setNavigationBarTitle({
    				title: '监控详情'
    			});
    		},
    
    	}
    </script>
    
    <style>
    	.webview {
    		width: 100vw;
    		height: 100vh;
    	}
    </style>

h5.html文件

<!DOCTYPE html>
    <html lang=zh-CN>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport"
    			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>监控详情页</title>
    		<style type="text/css">
    			body {
    				margin: 0;
    				background-color: #f3f3f3;
    			}
    
    		
    			.btn-box {
    				margin-top: 20px;
    				display: flex;
    				flex-direction: row;
    				justify-content: space-around;
    				align-items: center;
    			}
    
    			.more,
    			.less {
    				flex: 1
    			}
    
    			img {
    				width: 100%;
    			}
    
    			.direc {
    				width: 150px;
    				height: 150px;
    				background: url('http://static.yfpyx.com/bigdata_app/image/monitor/1.png');
    				background-size: 100% auto;
    				background-repeat: no-repeat;
    				position: relative;
    			}
    
    			.direc div {
    				width: 50px;
    				height: 50px;
    				position: absolute;
    			}
    
    			.top {
    				top: 0;
    				left: 50px
    			}
    
    			.bottom {
    				bottom: 0;
    				left: 50px
    			}
    
    			.left {
    				left: 0;
    				top: 50px
    			}
    
    			.right {
    				right: 0;
    				top: 50px
    			}
    
    			#box {
    				height: 300px;
    				width: 100%;
    				background: #000;
    			}
    
    			#dialog {
    				display: none;
    				width: 200px;
    				line-height: 80px;
    				background: rgba(0, 0, 0, .8);
    				color: #fff;
    				text-align: center;
    				position: absolute;
    				left: 50%;
    				margin-left: -100px;
    				border-radius: 4px;
    				z-index: 999;
    				top: 50%;
    				margin-top: -40px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box"></div>
    		<div id="dialog">
    
    		</div>
    		<div class="btn-box">
    			<div class="more" ontouchstart="configCamera('move', 8)" ontouchend="stopConfigCamera()">
    				<image src="http://static.yfpyx.com/bigdata_app/image/monitor/3.png" mode="widthFix"></image>
    			</div>
    			<div class="direc">
    				<div class="top" ontouchstart="configCamera('move', 0)" ontouchend="stopConfigCamera()">
    
    				</div>
    				<div class="bottom" ontouchstart="configCamera('move', 1)" ontouchend="stopConfigCamera()">
    
    				</div>
    				
    				<div class="left" ontouchstart="configCamera('move', 2)" ontouchend="stopConfigCamera()">
    
    				</div>
    				<div class="right" ontouchstart="configCamera('move', 6)" ontouchend="stopConfigCamera()">
    
    				</div>
    			</div>
    			<div class="less" ontouchstart="configCamera('move', 9)" ontouchend="stopConfigCamera()">
    				<image src="http://static.yfpyx.com/bigdata_app/image/monitor/2.png" mode="widthFix"></image>
    			</div>
    		</div>
    	</body>
    	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    	
    	
    	
    	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    	<script type="text/javascript" src="http://static.yfpyx.com/bigdata_app/js/ezuikit.js"></script>
    	<script type="text/javascript">
    		function configCamera(ctrl, movenum) {
    			if (ctrl == "takephoto") {
                    //拍照    
    				$.ajax({
    					type: "POST",
    					url: "XXX",
    					data: {
    						device_id: device_id,
    					}
    				}).then((res) => {
    					if (res.data.data) {
    						var data = JSON.parse(res.data.data);
    						var picUrl = data.data.picUrl;
    					} else {
    						console.log(res.data.message)
    					}
    				});
    			} else {
    				//上下左右、放大、缩小
    				$.ajax({
    					type: "POST",
    					url: "XXX",
    					data: {
    						device_id: device_id,
    						ctrl: ctrl,
    						movenum: movenum,
    					}
    				}).then((res) => {
    					$('#dialog').html('指令下发成功,请等待...').stop().show(500).delay(3000).hide(500)
    
    				})
    			}
    		}
    
    		function stopConfigCamera() {
    			$.ajax({
    				type: "POST",
    				url: "XXX",
    				data: {
    					device_id: device_id,
    					ctrl: "stop",
    				},
    			});
    		}
    		var str = window.location.search.substr(1)
    		var arr = str.split('&')
    		var device_id = arr[0].split('=')[1]
    		var accessToken = arr[1].split('=')[1]
    		$.ajax({
    			type: "POST",
    			url: "xxx",
    			data: {
    				device_id: device_id,
    			}
    		}).then((res) => {
    			var data = eval("(" + res.data + ")");
    			var hlsHdSrc = data.hlsHd;
    			var playHtml =
    				`<video id="myPlayer" autoplay   poster='' controls playsInline  webkit-playsinline src=${hlsHdSrc}  style="width:100%; height:100%;"></video>`;
    			$("#box").html(playHtml)
    			var myVideo = new EZUIKit.EZUIPlayer("myPlayer");
    			setTimeout(() => {
    				myVideo.play();
    			}, 150);
    
    		})
    	</script>
    </html>

[UIKit JavaScript]: https://open.ys7.com/mobile/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221023/b8e38873749945a49d15f7c27f04437d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20221023/253481521d754084aa8d4059cb5556e9.png
[2021030515334918.png]: /images/20221023/89918bdac83e40cbb8726a926fa8650c.png
[20210305154021251.png]: /images/20221023/fd0aa90948dc487f9a3a96f2ce20cd55.png
[20210305155529188.png]: /images/20221023/a331ccaccf084632a4083e5e1ddbef95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]: /images/20221023/d1a1cc98b54f4a7ab7a62fc3e3025abc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 3]: /images/20221023/3dc1f58ec52f4ada82d3cde807f64b88.png
[2021071310143512.png]: /images/20221023/affb7d3e68c343e4a27888e2aee0ad7f.png