需求：在小程序上直接查看每个店铺内的实时监控

看似很简单的需求，但是真要动起手来，还真不简单，嗯~ ？？？会遇到哪些问题呢？且听我慢慢说来，把我实现的艰辛路程给大家分享一下。

首先第一个问题：申请直播权限问题？

如果贵公司能正常申请到这些权限，那么很好，接下来就简单很多了，直接走传送门吧, 看看官方 api 直接就可以搞定了。

对于我们这种10线城市以外的小城市小公司，搞不到证书和直播接口权限，该怎么办呢？接下来正是本文要讲解的无权限怎么实现在线直播的功能。

当当当，自然还是我们的H5走天下，是的，估计大家猜到了，那就是使用webview,进行嵌套H5的直播界面。废话不多说了，直接上H5的代码。首先说下这里用到了萤石云的官方后台，反正也是免费的，何必不用呢，毕竟咱们一个店铺摄像头那么多，直接通过硬盘录像机绑定，一键搞定几十台摄像头。

再送大家一个萤石云的传送门吧，我太善良了吧。哈哈，，，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name=viewport
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
		<meta name="referrer" content="no-referrer">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

		<title>辅助停车</title>
		<style type="text/css">
			html,
			body {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
			}

			* {
				margin: 0;
				padding: 0;
			}

			#video-container {
				height: 100vh;
				transform-origin: 0 0;
				transform: rotate(90deg);
				position: fixed;
				top: 0%;
				left: 100%;
				border: none;
			}
		</style>

	</head>
	<body>

		<div id="video-container">
		</div>
		<script src="./js/ezuikit.js"></script>
		<script type="text/javascript">
			
			document.getElementById('video-container').height = window.innerWidth + 'px';
			document.getElementById('video-container').width = window.innerHeight + 'px';


			var params = getUrlParams(window.location.href)
			

			const playr = new EZUIKit.EZUIKitPlayer({
				id: 'video-container', // 视频容器ID
				accessToken: params.token,
				url: params.path,
				template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
				plugin: [], // 加载插件，talk-对讲
				width: window.innerHeight,
				height: window.innerWidth,
				audio: 0,
			});

			function getUrlParams(url) {
				let reg = /([^&?=]+)=([^&?=]+)/g,
					obj = {};
				url.replace(reg, function() {
					obj[arguments[1]] = arguments[2];
				});
				return obj;
			}
		</script>

	</body>
</html>

上面的代码是我们要通过webview进行嵌套的外网地址，那么在小程序端我们该如何调用呢？首先肯定得传参数，告诉H5页面，我们要看哪个店铺的第几个摄像头啊？所以，参数自己定义即可，同时需要后台协助搞一个获取7天有效期的token，这个就很简单了，接口分分钟钟搞定。下面直接上小程序端调用的代码：

<template>
	<view>
		<web-view :src="websrc"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				videoUrl2:'',
				token:'',
				websrc:'',
			}
		},
		onLoad(p) {
			this.parent = p
			this.videoUrl = 'ezopen://open.ys7.com/'+ p.path
			this.videoUrl2 =p.path2 ? 'ezopen://open.ys7.com/'+ p.path2 :''
			this.token =  p.token 
			if(this.videoUrl2){
				this.websrc = `https://pd.XXX.com:8808/play/index2.html?token=${p.token }&path=${this.videoUrl}&path2=${this.videoUrl2}`
			}else{
				this.websrc = `https://pd.XXX.com:8808/play/index.html?token=${p.token }&path=${this.videoUrl}`
			}
			// console.log(78,this.websrc);
			uni.setNavigationBarTitle({
				title: p.name,
			});
		},
		methods: {

		}
	}
</script>

<style>

</style>

ok , 大功告成了。给大家看下效果如何：哈哈，截图一个放了2个摄像头的界面吧。

`全文结束，感谢您耐心阅读，留言富贵，点赞发财！！！`

大家如果有任何疑问，或者需要帮助，随时留言，我尽力回答，想要上线的小程序看真实效果也是可以的噢！！！给我留言即可。

我是如何实现小程序上在线直播海康摄像头（无延迟）？

需求：在小程序上直接查看每个店铺内的实时监控

全文结束，感谢您耐心阅读，留言富贵，点赞发财！！！

`全文结束，感谢您耐心阅读，留言富贵，点赞发财！！！`