yf_lj
/
bigDataApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
							<!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>
		<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				margin: 0;
				background-color: #f3f3f3;
			}

			span.vjs-control-text {
				display: none;
			}

			/* iframe {
				width: 375px;
				height: 667px;
				background-color: #fff;
				box-sizing: content-box;
				border: none;
			} */
			.btn-box {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

			.btn-container {
				position: relative;
			}

			.videoBtnPlay {
				position: absolute;
				height: 100px;
				width: 100px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.more,
			.less {
				flex: 1
			}

			img {
				width: 100%;
			}

			.direc {
				width: 150px;
				height: 150px;
				background: url('https://s3.hnyfwlw.com/webstaticimg/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;
				overflow: hidden;
			}

			#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;
			}

			.imgBtn {
				position: absolute;
				width: 100%;
				padding: 10px;
				bottom: 0;
				left: 0;
				text-align: center;
				color: #338cd9;
				font-size: 16px;
				box-sizing: border-box;
			}

			.imgBtn img {
				display: inline-block;
				width: 20px;
				height: 20px;
				vertical-align: middle;
				margin-right: 2px;
				margin-bottom: 3px;
			}
		</style>
	</head>
	<body>
		<div class="btn-container">
			<div id="box"> </div>
			<div class="videoBtnPlay">
				<img src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/wxplayer.png" />
			</div>
		</div>
		<div id="dialog">

		</div>
		<div class="btn-box">
			<div class="more" ontouchstart="_configCamera('move', 8)" ontouchend="_stopConfigCamera()">
				<image src="https://s3.hnyfwlw.com/webstaticimg/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="photo" ontouchstart="_configCamera('takephoto', '')">
					11111
				</div> -->
				<div class="left" ontouchstart="_configCamera('move', 2)" ontouchend="_stopConfigCamera()">

				</div>
				<div class="right" ontouchstart="_configCamera('move', 3)" ontouchend="_stopConfigCamera()">

				</div>
			</div>
			<div class="less" ontouchstart="_configCamera('move', 9)" ontouchend="_stopConfigCamera()">
				<image src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/2.png" mode="widthFix">
				</image>
			</div>
		</div>
		<div class="imgBtn">
			<img src="images/image.png" />查看图片
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
	<!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
	<script type="module">
		import Player from './videoPlayer/videoPlay-js.js'
		let player = null
		//上下左右和拍照
		var str = window.location.search.substr(1)
		var arr = str.split('&')
		// console.log(str);
		var device_id = arr[0].split('=')[1]
		// console.log(device_id);
		var accessToken = arr[1].split('=')[1]
		var token=localStorage.getItem('session_key')
		// console.log(accessToken)
		window._configCamera = configCamera;
		window._stopConfigCamera = stopConfigCamera;
		window._postPic = postPic;

		function configCamera(ctrl, movenum) {
			if (ctrl == "takephoto") {
				if (player) {
					// 云联的拍照特殊处理
					player.screenshot('yunlianPlayer')
				} else {
					$.ajax({
						type: "POST",
						url: "https://wx.hnyfwlw.com/api/api_gateway?method=camera.camera_manage.camera_takephoto",
						data: {
							device_id: device_id,
							token
						}
					}).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: "https://wx.hnyfwlw.com/api/api_gateway?method=camera.camera_manage.ctrl_camera",
					data: {
						device_id: device_id,
						ctrl: ctrl,
						movenum: movenum,
						token
					}
				}).then((res) => {
					$('#dialog').html('指令下发成功,请等待...').stop().show(500).delay(3000).hide(500)
				})
			}
		}

		function stopConfigCamera() {
			if (player) {
				// 云联监控不需要这个指令
				return
			}
			$.ajax({
				type: "POST",
				url: "https://wx.hnyfwlw.com/api/api_gateway?method=camera.camera_manage.ctrl_camera",
				data: {
					device_id: device_id,
					ctrl: "stop",
					token
				},
			});
		}

		function postPic(file) {
			let form = new FormData()
			form.append('img_file', file)
			form.append('device_id', device_id)
			form.append('token', token)
			$.ajax({
				type: "POST",
				url: "https://wx.hnyfwlw.com/api/api_gateway?method=camera.camera_manage.save_camera_photo",
				contentType : false,
				processData : false,
				data: form
			}).then((res) => {
			
				if (res.message == '') {
					$('#dialog').html('拍照成功').stop().show(500).delay(1500).hide(500)
				} else {
					$('#dialog').html(res.data.message).stop().show(500).delay(1500).hide(500)
				}
			});

		}
		async function initYunlianPlayer(videoURL) {
			var playHtml =
				`<div id="yunlianPlayer" style="width: 100%;height: 300px;overflow: hidden;"></div>`;
			$("#box").html(playHtml)
			player = new Player(['yunlianPlayer'], {
				playFileOver: () => {
					console.log('播放结束')
				},
				playError: (id, e) => {
					console.log('播放错误', id, e)
				},
				talkStart: () => {
					console.log('对讲开始')
				},
				runtimeInitializedCallBack: () => {
					console.log('播放器初始化完成')
				},
				captureCallback: (id, data) => {
					// console.log('截图返回的数据', data.buffer)
					const blob = new Blob([data], {
						type: 'image/jpeg'
					})
					_postPic(blob)
				}
			})
			await player.init()
			setTimeout(() => {
				player.play('yunlianPlayer', {
					streamURL: videoURL,

					channelId: '0',

					bitStream: '0',

					isLive: true
				})
			}, 1000)
		}


		$('.videoBtnPlay').click(function() {
			$('.videoBtnPlay').hide()
			$.ajax({
				type: "POST",
				url: "https://wx.hnyfwlw.com/api/api_gateway?method=camera.camera_manage.addr_camera",
				// url: "http://192.168.0.117:8003/api/api_gateway?method=camera.camera_manage.addr_camera",
				data: {
					device_id: device_id,
					token
					// device_id: 'FA8690323-1',
					// token: localStorage.getItem('session_key')
				}
			}).then((res) => {
				// console.log(JSON.stringify(res))
				if (res.message == '') {
					var data = null
					if (typeof res.data == 'string') {
						data = eval('(' + res.data + ')');
					} else {
						data = res.data;
					}
					console.log(data, 'data');
					if (data.type_id == 2) {
						// 大华云联
						initYunlianPlayer(data.rtsp)

					} else {
						let hlsHdSrc = data.type_id == 0 ? data.hls : data.hlsHd;
						var playHtml =
							`<video id="myPlayer"   poster='' controls playsInline  webkit-playsinline src=${hlsHdSrc}  style="width:100%; height:100%;"></video>`;
						$("#box").html(playHtml)
						var myVideo = videojs(`myPlayer`, {
							controls: true,
							autoplay: 'play',
							url: hlsHdSrc,
							sources: [{
								type: 'application/x-mpegURL',
								src: hlsHdSrc,
							}],
						}, function onPlayerReady() {
							myVideo.play()
							console.log('准备好了')
						});
						myVideo.on('play', function() {
							console.log('开始播放')
						})
					}

				} else {
					alert(res.message)
				}

			})

		})
		document.addEventListener('UniAppJSBridgeReady', function() {
			$('.imgBtn').click(function() {
				// if (player) {
				// 	player.close('yunlianPlayer')
				// 	player = null
				// }

				uni.navigateTo({
					url: '/pages/monitor/imagelist?id=' + device_id
				})
			})
		});
	</script>
</html>