大华监控web调用展示

大华web无插件开发包

https://support.dahuatech.com/tools/sdkExploit/267

<!-- 视频监控开始 -->
				<div class="shipinjiankonglb" v-show="navlist[1].active">
					<div class="title">监控位置</div>
					<div class="contBody">
						<div class="xbt">
							<div>编号</div>
							<div>监控位置</div>
							<div>操作</div>
						</div>
						<div class="contlist" v-for="(item,index) in sysxtList" :class="{active:isjk==index}"
							@click="spjkliClick(index,item)" :id="'play'+index">
							<div>{{index+1}}</div>
							<div>{{item.position}}</div>
							<div>
								<img src="image/caozuo.png" />
							</div>
							
						</div>
					</div>
				</div>
				<div :class="{shipinjiankongVideoA:isxulie==1}" class="shipinjiankongVideo" v-show="navlist[1].active">
					<div class="border_item" v-for="(item,index) in xzspjkList" @click="xzbfqClick(index)">
						<img src="image/jkbt.png" class="top" /><span class="top">{{item.equipmentNo}}</span>
						<!-- :src="item.src" autoplay="true" controls -->
						<canvas :id="'canvas'+index" style="background-color:#000;width:100%;height:100%;" v-show="item.src==10|item.src==11||item.src==12||item.src==13||item.src==14||item.src==15||item.src==16||item.src==17||item.src==18||item.src==19||item.src==20||item.src==21"></canvas>
						<video :id="'video'+index" style="background-color:#000;"  v-show="item.src!=10&&item.src!=11&&item.src!=12&&item.src!=13&&item.src!=14&&item.src!=15&&item.src!=16&&item.src!=17&&item.src!=18&&item.src!=19&&item.src!=20&&item.src!=21"></video>
					</div>
					
				</div>
				<!-- 序列 放大 -->
				<img src="image/xl.png" class="xlimg" @click="xlClick" v-show="navlist[1].active" />
				<img src="image/fd.png" class="fdimg" @click="fdClick" v-show="navlist[1].active" />
				 
				<!-- 视频监控结束 -->

js

<script src="module/playerControl.js"></script>
<script>
//视频监控-选中播放器
					xzbfqClick(index) {
						var that = this;
						that.xzbfqIndex = index
					},
					//视频监控-点击视频监控左侧列表
					spjkliClick(index, item) {
						var that = this
						if (that.xzbfqIndex != null) {
							that.isjk = index
							that.xzspjkList[that.xzbfqIndex].equipmentNo = item.equipmentNo
							that.xzspjkList[that.xzbfqIndex].src = item.passageNo
							//'rtsp://' + item.userName + ':' + item.password +
								//'@' + item.ipAddress + ':80/cam/realmonitor?channel=' + item.passageNo + '&subtype=0';
							//播放监控
							bfjk(that.xzbfqIndex,item.userName,item.password,item.ipAddress,item.passageNo);
						}else{
							that.isjk = index
							that.xzspjkList[that.mrbfwz].equipmentNo = item.equipmentNo
							that.xzspjkList[that.mrbfwz].src = item.passageNo
							bfjk(that.mrbfwz,item.userName,item.password,item.ipAddress,item.passageNo);
							if(that.mrbfwz<5){
								that.mrbfwz++;
							}else{
								that.mrbfwz=0
							}
						}
					},
</script>
<script>
			function bfjk(xzbfqIndex,name,password,ip,tdh){
				var video = document.getElementById('video'+xzbfqIndex);
				var canvas = document.getElementById('canvas'+xzbfqIndex);
				var player = null;
				var options = {
				   wsURL: 'ws://'+ip+'/rtspoverwebsocket',
				   rtspURL: 'rtsp://'+ip+'/cam/realmonitor?channel='+tdh+'&subtype=0',
				   username: name,
				   password: password
				};
				player = new PlayerControl(options);
				player.on('WorkerReady', function(){
					player.connect();  
				});
				player.on('DecodeStart', function(rs){
					console.log('开始解码');
					console.log(rs);
				
				});
				player.on('PlayStart', function(rs){
					console.log('开始播放');
					console.log(rs);
				});
				player.on('Error', function(rs){
					console.log('发生错误');
					console.log(rs);
				});
				player.on('FileOver', function(rs){
					console.log('回放播放完成');
					console.log(rs);
				});
				player.on('MSEResolutionChanged', function(rs){
					console.log('分辨率改变');
					console.log(rs);
				});
				player.on('FrameTypeChange', function(rs){
					console.log('编码模式改变');
					console.log(rs);
				});
				player.on('audioChange', function(rs){
					console.log('音频编码改变');
					console.log(rs);
				});
				player.init(canvas, video);
			}
		</script>