huangyan
/
city_chips


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>H5playerVue</title>
		<link rel="stylesheet" href="/static/css/antd.min.css">
		<style>
			body {
				padding: 0px;
			}

			#app {
				width: 100% !important;
				height: 100% !important;
				display: none;
			}

			.actions {
				padding-left: 8px;
			}

			.ant-form-item {
				margin-bottom: 8px
			}

			.ant-btn {
				margin-right: 2px;
			}

			.icon-wrapper {
				position: relative;
				padding-left: 20px;
			}

			.icon-wrapper .anticon {
				position: absolute;
				top: -2px;
				width: 16px;
				height: 16px;
				line-height: 1;
				font-size: 16px;
				left: 0;
			}

			::-webkit-media-controls {
				display: none !important;
			}

			#player {
				width: 100% !important;
				height: 100% !important;
			}

			.control-wrapper {
				position: fixed;
				z-index: 2025;
				bottom: 4%;
				left: 4%;
				/* width:20%; */
				width: 140px;
				height: 140px;
				margin: 0 auto;
				border-radius: 50%;
			}

			.control-btn {
				position: absolute;
				cursor: pointer;
				width: 38%;
				height: 38%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #78aee4;
				box-sizing: border-box;
				transition: all .3s linear;
			}

			.control-btn:after {
				content: '';
				position: absolute;
				width: 60%;
				height: 60%;
				background: #FFFFFF;
				z-index: 2;
			}

			.control-btn:before {
				content: '';
				position: relative;
				display: block;
				/* width: 16px; */
				/* height: 16px; */
				width: 14%;
				height: 14%;
				border-top: 3px solid #78aee4;
				border-right: 3px solid #78aee4;
				border-radius: 0 4px 0 0;
				box-sizing: border-box;
				z-index: 2;
			}

			.control-top {
				top: 0;
				left: 50%;
				background-color: #FFFFFF;
				transform: translateX(-50%) rotate(-45deg);
				border-radius: 4px 100% 4px 4px;
			}

			.control-top:before {
				transform: translate(30%, -25%);
			}

			.control-top:after {
				left: 0;
				bottom: 0;
				border-top: 1px solid #78aee4;
				border-right: 1px solid #78aee4;
				border-radius: 0 100% 0 0;
			}

			.control-bottom {
				left: 50%;
				bottom: 0;
				background-color: #FFFFFF;
				transform: translateX(-50%) rotate(45deg);
				border-radius: 4px 4px 100% 4px;
			}

			.control-bottom:before {
				transform: translate(25%, 25%) rotate(90deg);
			}

			.control-bottom:after {
				top: 0;
				left: 0;
				border-bottom: 1px solid #78aee4;
				border-right: 1px solid #78aee4;
				border-radius: 0 0 100% 0;
			}

			.control-left {
				top: 50%;
				left: 0;
				background-color: #FFFFFF;
				transform: translateY(-50%) rotate(45deg);
				border-radius: 4px 4px 4px 100%;
			}

			.control-left:before {
				transform: translate(-25%, 30%) rotate(180deg);
			}

			.control-left:after {
				right: 0;
				top: 0;
				border-bottom: 1px solid #78aee4;
				border-left: 1px solid #78aee4;
				border-radius: 0 0 0 100%;
			}

			.control-right {
				top: 50%;
				right: 0;
				background: #FFFFFF;
				transform: translateY(-50%) rotate(45deg);
				border-radius: 4px 100% 4px 4px;
			}

			.control-right:before {
				transform: translate(30%, -25%);
			}

			.control-right:after {
				left: 0;
				bottom: 0;
				border-top: 1px solid #78aee4;
				border-right: 1px solid #78aee4;
				border-radius: 0 100% 0 0;
			}

			.control-round {
				position: absolute;
				cursor: pointer;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 51.2%;
				height: 51.2%;
				background: #FFFFFF;
				border-radius: 50%;
			}

			.control-round-inner {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 66%;
				height: 66%;
				border: 1px solid #78aee4;
				border-radius: 50%;
			}

			.control-round-inner:after {
				content: "| |";
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 50%;
				font-size: 80%;
				text-align: center;
				background: #78aee4;
				font-weight: bolder;
				color: #fff;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app" >
			<div id="player"></div>
			<div class="control-wrapper" id="turntable">
				<div class="control-btn control-top" @click="goTop"></div>
				<div class="control-btn control-left" @click="goLeft"></div>
				<div class="control-btn control-bottom" @click="goBottom"></div>
				<div class="control-btn control-right" @click="goRight"></div>
				<div class="control-round">
					<div class="control-round-inner" @click="goStop"></div>
				</div>
			</div>
		</div>

		<template id="play-log">
			<div></div>
		</template>

		<!-- 移动端调试 -->
		<script src="/static/js/vconsole.min.js"></script>
		<!-- <script>
      if (IS_MOVE_DEVICE) {
        const vc = new VConsole()
      }
  </script> -->

		<script src="/static/js/moment.js"></script>
		<script src="/static/js/vue.js"></script>
		<script src="/static/js/antd.min.js"></script>
		<script src="/static/js/antd-with-locales.min.js"></script>
		<script src="/static/h5player.min.js"></script>
		<script>
			const {
				LocaleProvider,
				locales
			} = window.antd
			moment.locale('/static/js/zh-cn.js')

			const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
			const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse

			// if (IS_MOVE_DEVICE) {
			// 	const vc = new VConsole()
			// }
			let control = {{.control}}
			if (control === true){
				document.getElementById('turntable').style.display = 'block'
			}else {
				document.getElementById('turntable').style.display = 'none'
			}

			// function streamcb(data) {
			//   console.log(data);
			// }

			const app = new Vue({
				el: '#app',
				// components: { Log },
				data() {
					return {
						command: '',
						zh_CN: locales.zh_CN,
						isMoveDevice: IS_MOVE_DEVICE,
						player: null,
						splitNum: 1,
						mseSupport: MSE_IS_SUPPORT,
						tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
						labelCol: {
							span: 5
						},
						wrapperCol: {
							span: 18
						},
						urls: {

							realplay: {{.wsurl}},
							talk: {{.wsurl}},
							playback: {{.wsurl}},
						},
						playback: {
							startTime: '2023-08-16T00:00:00',
							endTime: '2023-08-16T23:00:00',
							valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
							seekStart: '2023-08-16T10:00:00',
							rate: ''
						},
						SmoothDragTime: '2023-08-16T07:47:36.000+08:00',
						ThumbnailsTime: '2023-08-16T07:47:36.000+08:00',
						judgeurlname: 'wss://10.19.147.57:6014/proxy/10.19.147.57:559/EUrl/KjuVUic',
						rate: 1,
						audioType: 2,
						muted: true,
						volume: 50,
						InstantParam: 10,
						token: "",
						volumeOnSvg: {
							template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
						},
						volumeOffSvg: {
							template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
						},

						zoom: {
							rotate: 0,
							ratio: 'fill'
						},
						watermarkConfig: {
							text: 'h5player',
							color: 'rgba(255, 255, 255, 0.5)',
							font: '24px 微软雅黑',
							rotateDegree: -15,
							space: 240
						}
					}
				},
				computed: {
					mode: function() {
						return this.tabActive === 'mse' ? 0 : 1
					}
				},
				methods: {
					init() {
						// 设置播放容器的宽高并监听窗口大小变化
						window.addEventListener('resize', () => {
							this.player.JS_Resize()
						})
					},
					// 向上
					goTop() {
						console.log('向上')
						let arr = {
							action: 0,
							command: 'UP',
						}
						this.command = 'UP'
						this.sendControl(arr)
					},
					// 向左
					goLeft() {
						console.log('向左')
						let arr = {
							action: 0,
							command: 'LEFT',
						}
						this.command = 'LEFT'
						this.sendControl(arr)
					},
					// 向下
					goBottom() {
						console.log('向下')
						let arr = {
							action: 0,
							command: 'DOWN',
						}
						this.command = 'DOWN'
						this.sendControl(arr)
					},
					// 向右
					goRight() {
						console.log('向右')
						let arr = {
							action: 0,
							command: 'RIGHT',
						}
						this.command = 'RIGHT'
						this.sendControl(arr)
					},
					// 停止
					goStop() {
						let arr = {
							action: 1,
							command: this.command,
						}
						this.sendControl(arr)
					},
					// 发送云台控制
					sendControl(value) {
						let cameraIndexCode = {{.cameraIndexCode}}
						const url =
							'./controlling?cameraIndexCode=' + cameraIndexCode +
							'&action=' + value.action + '&command=' + value.command;
						// 使用fetch发送GET请求
						fetch(url)
							.then(response => response.json())
							.then(data => {
								console.log('成功', data);
							})
							.catch(error => {
								console.error('请求出错:', error);
							});
					},
					createPlayer() {
						this.player = new JSPlugin({
							szId: 'player', //父窗口id，需要英文字母开头 必填
							szBasePath: "./", // 必填,与h5player.min.js的引用路径一致
							iMaxSplit: 1,
							iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
							// openDebug: false,
							mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
							bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
							oStyle: {
								borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
							}
						})
						// 事件回调绑定
						this.player.JS_SetWindowControlCallback({
							windowEventSelect: function(iWndIndex) { //插件选中窗口回调
								console.log('windowSelect callback: ', iWndIndex);
							},
							pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调
								console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
							},
							windowEventOver: function(iWndIndex) { //鼠标移过回调
								//console.log(iWndIndex);
							},
							windowEventOut: function(iWndIndex) { //鼠标移出回调
								//console.log(iWndIndex);
							},
							windowEventUp: function(iWndIndex) { //鼠标mouseup事件回调
								//console.log(iWndIndex);
							},
							windowFullCcreenChange: function(bFull) { //全屏切换回调
								console.log('fullScreen callback: ', bFull);
							},
							firstFrameDisplay: function(iWndIndex, iWidth, iHeight) { //首帧显示回调
								console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
							},
							performanceLack: function(iWndIndex) { //性能不足回调
								console.log('performanceLack callback: ', iWndIndex);
							},
							StreamEnd: function(iWndIndex) { //性能不足回调
								console.log('recv StreamEnd: ', iWndIndex);
							},
							StreamHeadChanged: function(iWndIndex) {
								console.log('recv StreamHeadChanged: ', iWndIndex);
							},
							ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
								console.log('recv ThumbnailsEvent: ' + iWndIndex + ", eventType:" +
									eventType + ", eventCode:" + eventCode);
							},
							InterruptStream: (iWndIndex, iTime) => {
								console.log('recv InterruptStream: ' + iWndIndex + ", iTime:" + iTime);
							},
							ElementChanged: (iWndIndex, szElementType) => { //回调采用的是video还是canvas
								console.log('recv ElementChanged: ' + iWndIndex + ", szElementType:" +
									szElementType);
							},
						});
					},
					arrangeWindow() {
						let splitNum = this.splitNum
						this.player.JS_ArrangeWindow(splitNum).then(
							() => {
								console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
							},
							e => {
								console.error(e)
							}
						)
					},
					wholeFullScreen() {
						this.player.JS_FullScreenDisplay(true).then(
							() => {
								console.log(`wholeFullScreen success`)
							},
							e => {
								console.error(e)
							}
						)
					},
					singleFullScreen() {
						this.player.JS_FullScreenSingle(this.player.currentWindowIndex).then(
							() => {
								console.log(`singleFullScreen success`)
							},
							e => {
								console.error(e)
							}
						)
					},
					/* 预览&对讲 */
					realplay() {
						let {
							player,
							mode,
							urls,
							token
						} = this,
						index = player.currentWindowIndex,
							playURL = urls.realplay
						player.JS_SetTraceId(index, true)
						player.JS_Play(playURL, {
							playURL,
							mode,
							keepDecoder: 0,
							token
						}, index).then(
							() => {
								console.log('realplay success');
								player.JS_GetTraceId(index).then((id) => {
									console.log("traceid:", id)
								})
							},
							e => {
								console.error(e)
							}
						)
					},
					stopPlay() {
						this.player.JS_Stop().then(
							() => {
								this.playback.rate = 0;
								console.log('stop realplay success')
							},
							e => {
								console.error(e)
							}
						)
					},
					stopAllPlay() {
						this.player.JS_StopRealPlayAll().then(
							() => {
								this.playback.rate = 0;
								console.log('stopAllPlay success')
							},
							e => {
								console.error(e)
							}
						)
					},
					streamcb(data) {
						console.log(data);
					},
					jsdecoderVersion() {
						let v = this.player.JS_GetSdkVersion();
						console.log("JS_GetSdkVersion:", v);
					},
				},
				mounted() {
					this.$el.style.setProperty('display', 'block')
					this.init()
					this.createPlayer()
					this.realplay()
				}
			})
		</script>
	</body>
</html>