bigDataApp/static/h52.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>
		<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="./font/iconfont.css" />
		<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;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.direc div {
				width: 50px;
				height: 50px;
				position: absolute;
			}

			.photo {
				font-size: 30px;
				color: #4ec467;
				padding: 16px;
			}

			.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;
				min-width: 200px;
				max-width: 90%;
				box-sizing: border-box;
				line-height: 1.6;
				padding: 12px;
				background: rgba(0, 0, 0, .8);
				color: #fff;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 4px;
				z-index: 999;
				top: 50%;
				word-break: break-all;
			}

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

			.imgBtn div {
				/* padding: 0 16px; */
			}

			.imgBtn img {
				display: inline-block;
				width: 20px;
				height: 20px;
				vertical-align: middle;
				margin-right: 2px;
				margin-bottom: 3px;
			}

			.imgBtnDgp {
				display: none;
			}
			#myCanvas{
				display: none;
			}
		</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>
		<canvas id="myCanvas" width="400" height="300"></canvas>
		<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>
				<p class="photo yficonfont icon-paizhao-xianxing" ontouchstart="_configCamera('takephoto', '')">

				</p>
				<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">
			<div class="imgBtnCamrea"> <img
					src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看图片</div>
			<div class="imgBtnDgp"><img
					src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看光谱图片</div>

		</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="./jquery-3.5.1.min.js"></script>
	<!-- <script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script> -->
	<script type="text/javascript" src="./jweixin-1.6.0.js"></script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="./uni.webview.1.5.6.js" defer></script>
	<script src="./video.min.js"></script>
	<!-- <script src="./js/flv.min.js"></script> -->
	<script >
		// import Player from './videoPlayer/videoPlay-js.js'
		const domin = 'https://wx.hnyfwlw.com'
		// const domin = 'http://218.28.198.186:10508'
		
		let player = null
		let stopTimer = 0
		//上下左右和拍照
		var str = window.location.search.substr(1)
		var arr = str.split('&')
		console.log(str, arr, '参数');
		var device_id = arr[0].split('=')[1]
		var accessToken = arr[1].slice(12)
		var videoType = arr[2]?.split('=')[1]
		var token = accessToken

		window._configCamera = configCamera;
		window._stopConfigCamera = stopConfigCamera;
		window._postPic = postPic;
		if (videoType == 'dgp') {
			$('.imgBtnDgp').show()
		} else {
			$('.imgBtnDgp').hide()
		}
		function captureFrame() {
		  const video = document.getElementById('myPlayer_html5_api');
		  const canvas = document.getElementById('myCanvas');
		  const ctx = canvas.getContext('2d');
		  
		  // 设置 canvas 尺寸与视频一致
		  canvas.width = video.videoWidth;
		  canvas.height = video.videoHeight;
		  console.log(ctx,'---')
		  // 绘制当前帧到 canvas
		  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
		  
		  // 获取图片数据
		  const imageData = canvas.toDataURL('image/jpg');
		  canvas.toBlob((blob)=>{
			  
			  postPic(blob)
		  }, 'image/jpg', 0.92);
		  // postPic(imageData)
		  // // 可以创建图片显示或下载
		  // const img = new Image();
		  // img.src = imageData;
		  // document.body.appendChild(img);
		  
		  // // 或者下载图片
		  // downloadImage(imageData, 'captured-frame.png');
		}
		function initFlvPlayer(hlsHdSrc) {
			var playHtml =
				`<video width="100%" height="300px" id="huifangPlayer" controls autoplay muted></video>`;
			$("#box").html(playHtml)
			const container = document.getElementById('huifangPlayer')

			if (flvjs.isSupported()) {
				// console.log(videoElement);
				// let hlsHdSrc =
				// 	'https://cmgw-vpc.lechange.com:8890/flv/LCO/BE049D6PAJ704F1/0/1/20251126103056/openhze749205130814fecba32ac68f5d30fe0.flv?proto=https&source=open';
				// 创建 FLV 播放器实例
				player = flvjs.createPlayer({
					type: 'flv', // 设置视频类型为 FLV
					isLive: true, // 指定这是点播
					hasAudio: false, // 指定视频流中没有音频
					url: hlsHdSrc
				})

				// 将播放器绑定到 HTML 视频元素
				player.attachMediaElement(container)
				// 加载视频流
				player.load()
				// 播放视频
				player.play()

			}
		}

		function destroyPlayer() {
			if (player) {
				const container = document.getElementById('huifangPlayer')
				player.pause()
				player.unload()
				player.detachMediaElement()
				player.destroy()
				player = null
				player = ''
			}
		}

		// videojs 播放失败时的统一处理：显示环境信息 + 改用原生 video 直接播 HLS 兜底
		function showPlayerError(myPlayer, src) {
			var err = myPlayer.error() || {}
			var os = videojs.browser.IS_ANDROID ? 'Android' : (videojs.browser.IS_IOS ? 'iOS' : 'PC')
			var mse = window.MediaSource || window.WebKitMediaSource
			var info = os + ' MSE:' + (mse ? 'y' : 'n') + ' code:' + (err.code || '?')
			console.log('videojs error:', info, err)
			$('#dialog').html('播放失败[' + info + ']<br>' + (err.message || '未知错误') + '<br>尝试原生播放兜底...').stop().show(0)
			try {
				myPlayer.dispose()
			} catch (e) {}
			$('#box').html('<video id="nativePlayer" src="' + src + '" controls autoplay playsinline webkit-playsinline style="width:100%;height:100%"></video>')
			var nv = document.getElementById('nativePlayer')
			if (nv) {
				nv.onerror = function() {
					var e2 = nv.error || {}
					$('#dialog').html('原生播放也失败[' + info + '] code:' + (e2.code || '?')).stop().show(0)
				}
				nv.onplaying = function() {
					$('#dialog').stop().hide(0)
				}
			}
		}

		// 播放开始后检查视频轨是否真的渲染出来了（安卓可能出现有声无画）
		function watchVideoTrack(myPlayer, src) {
			myPlayer.on('timeupdate', function() {
				if (myPlayer.currentTime() > 2 && !watchVideoTrack._done) {
					watchVideoTrack._done = true
					var vw = myPlayer.videoWidth()
					if (!vw) {
						$('#dialog').html('检测到有声无画(视频轨未渲染)<br>正在尝试原生播放兜底...').stop().show(0)
						try {
							myPlayer.dispose()
						} catch (e) {}
						$('#box').html('<video id="nativePlayer" src="' + src + '" controls autoplay playsinline webkit-playsinline style="width:100%;height:100%"></video>')
						var nv = document.getElementById('nativePlayer')
						if (nv) {
							nv.onplaying = function() {
								$('#dialog').html('原生播放中 ' + (nv.videoWidth || '?') + 'x' + (nv.videoHeight || '?')).stop().show(0).delay(2500).hide(500)
								// 2秒后复查：仍无画面则输出详细诊断信息
								setTimeout(function() {
									if (!nv.videoWidth) {
										var e3 = nv.error || {}
										var u = ''
										try {
											var uu = new URL(nv.currentSrc || nv.src)
											u = uu.host + uu.pathname.slice(-12)
										} catch (ex) {}
										var ua = navigator.userAgent
										var cm = ua.match(/Chrome\/([\d.]+)/)
										var kern = /TBS\/|MQQBrowser/.test(ua) ? 'X5' : (cm ? 'Chrome/' + cm[1] : 'other')
										$('#dialog').html('兜底2秒后仍无画面<br>ready:' + nv.readyState + ' net:' + nv.networkState +
											' t:' + nv.currentTime.toFixed(1) + ' err:' + (e3.code || '-') +
											'<br>src:' + u +
											'<br>内核:' + kern + ' MSE:' + (window.MediaSource ? 'y' : 'n')).stop().show(0)
									}
								}, 2000)
							}
							nv.onerror = function() {
								$('#dialog').html('原生播放也失败 code:' + ((nv.error && nv.error.code) || '?')).stop().show(0)
							}
						}
					} else {
						$('#dialog').html('播放中 ' + vw + 'x' + myPlayer.videoHeight()).stop().show(0).delay(2500).hide(500)
					}
				}
			});
		}

		function configCamera(ctrl, movenum) {
			if (ctrl == "takephoto") {
				if (player) {
					// 云联的拍照特殊处理
					// player.screenshot('yunlianPlayer')
					$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
					captureFrame()
				} else {

					$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
					let url = domin+"/api/api_gateway?method=camera.camera_manage.camera_takephoto"
					if (videoType == 'dgp') {
						url = domin+"/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto"
					}
					$.ajax({
						type: "POST",
						url: url,
						data: {
							device_id: device_id,
							token
						}
					}).then((res) => {

						if (res.message == '') {
							$('#dialog').html('拍照成功').stop().show(500).delay(1000).hide(500)
						} else {
							$('#dialog').html(res.message).stop().show(500).delay(1000).hide(500)
						}
					});
				}

			} else {
				let url = domin+"/api/api_gateway?method=camera.camera_manage.ctrl_camera"
				let postData = {
					device_id: device_id,
					token
				}
				if (videoType == 'dgp') {
					url = domin+"/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera"
					postData.ctrl = movenum
				} else {
					postData.ctrl = ctrl
					postData.movenum = movenum
				}
				//上下左右、放大、缩小
				$.ajax({
					type: "POST",
					url: url,
					data: postData
				}).then((res) => {
					$('#dialog').html('指令下发成功,请等待...').stop().show(500).delay(3000).hide(500)
				})
			}
		}

		function stopConfigCamera() {
			if (player) {
				// 云联不需要停止
				return
			}
			if (videoType == 'dgp') {
				if (stopTimer) clearTimeout(stopTimer)
				stopTimer = setTimeout(() => {
					$.ajax({
						type: "POST",
						url: domin+"/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
						data: {
							device_id: device_id,
							token
						},
					});
				}, 3000)

			} else {
				$.ajax({
					type: "POST",
					url: domin+"/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: domin+"/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.message).stop().show(500).delay(1500).hide(500)
				}
			});

		}

		$('.videoBtnPlay').click(function() {
			watchVideoTrack._done = false
			$('.videoBtnPlay').hide()
			if (videoType == 'dgp') {
				$.ajax({
					type: "POST",
					url: domin+"/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
					data: {
						device_id: device_id,
						token
					}
				}).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');

						let hlsHdSrc = data.rtmp;
						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('开始播放')
						})
						myVideo.on('error', function() {
							showPlayerError(myVideo, hlsHdSrc)
						})
						watchVideoTrack(myVideo, hlsHdSrc)


					} else {
						$('#dialog').html('获取播放地址失败: ' + res.message).stop().show(0)
					}

				}).fail(function(xhr) {
					$('#dialog').html('获取播放地址接口异常: ' + xhr.status).stop().show(0)
				})

			} else {
				$.ajax({
					type: "POST",
					url: domin+"/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,
						is_dahua_app:'1',
						token
						// device_id: 'FA8690323-1',
						// token: localStorage.getItem('session_key')
					}
				}).then((res) => {
					if (res.message == '') {
						var data = null
						if (typeof res.data == 'string') {
							data = eval('(' + res.data + ')');
						} else {
							data = res.data;
						}
						var hlsHdSrc = ""
						if (data.type_id == 2) {
							// 大华云联
							// initFlvPlayer(data.rtsp)
				
							player = 1
							hlsHdSrc = data.rtsp;
						} else {
							// 高清主码流是 H.264 High@L5.1，安卓 webview MSE 解不了（有声无画），改用子码流
							hlsHdSrc = data.hls || (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('开始播放')
						})
						myVideo.on('error', function() {
							showPlayerError(myVideo, hlsHdSrc)
						})
						watchVideoTrack(myVideo, hlsHdSrc)
					} else {
						$('#dialog').html('获取播放地址失败: ' + res.message).stop().show(0)
					}

				}).fail(function(xhr) {
					$('#dialog').html('获取播放地址接口异常: ' + xhr.status).stop().show(0)
				})

			}

		})
		document.addEventListener('UniAppJSBridgeReady', function() {

			$('.imgBtnCamrea').click(function() {
				// if (player) {
				// 	player.close('yunlianPlayer')
				// 	player = null
				// }

				uni.navigateTo({
					url: '/pages/monitor/imagelist?id=' + device_id
				})
			})
			$('.imgBtnDgp').click(function() {
				// if (player) {
				// 	player.close('yunlianPlayer')
				// 	player = null
				// }

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