|
|
|
|
@ -5,38 +5,19 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body" style="padding:0;">
|
|
|
|
|
<div class="row video-container" style="min-width:320px; min-height:240px; width:100%; height:auto; margin: 0 auto;background-color:#333;position:relative;">
|
|
|
|
|
<video controls muted autoplay :class="device.number" v-if="isFlvSupported" v-on:volumechange="volumeChange($event)" style="width:100%;height:100%;object-fit:contain;"></video>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<canvas width="1080" height="720" style="width:100%;max-width:1080px;height:100%;object-fit:contain;background: #333;margin:0 auto;" :class="device.number" v-on:click="showControls()"></canvas>
|
|
|
|
|
<div :class="'control '+device.number" style="position:absolute;height:30px;left:0;right:0;bottom:0;background-color:#333;display: none;">
|
|
|
|
|
<a href="javascript:;" v-on:click="play()" style="color: #fff; margin: 0 10px; line-height: 30px;">
|
|
|
|
|
<i class="ion ion-md-pause" v-if="playing"></i>
|
|
|
|
|
<i v-else class="ion ion-md-play"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<template v-if="playing">
|
|
|
|
|
<a href="javascript:;" v-on:click="fullScreen()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
|
|
|
|
|
<i class="ion ion-md-expand"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" v-on:click="mute()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
|
|
|
|
|
<i class="ion ion-md-volume-off" v-if="muted"></i>
|
|
|
|
|
<i class="ion ion-md-volume-high" v-else></i>
|
|
|
|
|
</a>
|
|
|
|
|
<input type="range" min="0" max="1" step="0.1" :value="volume" style="-webkit-appearance:none;float:right;width:80px;height:4px;margin:13px 2px;background:#666;outline:none;" v-on:change=volumeChange2($event) />
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<video controls muted autoplay :class="device.number" v-on:volumechange="volumeChange($event)" style="width:100%;height:100%;object-fit:contain;"></video>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="box-sizing: border-box; min-width: 320px;margin: 5px auto; padding:15px;position:relative;" :class="'row ptz '+ device.number">
|
|
|
|
|
<table style="width: 100%; max-width:320px; height: 100px; margin: 5px auto;">
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartRecord')" style="margin: 5px;" >启动推流</button></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartRecord')" style="margin: 5px;">启动推流</button></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopRecord')" style="margin: 5px;" >停止推流</button></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopRecord')" style="margin: 5px;">停止推流</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartPush')" style="margin: 5px;" >开始录像</button></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartPush')" style="margin: 5px;">开始录像</button></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopPush')" style="margin: 5px;" >停止录像</button></td>
|
|
|
|
|
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopPush')" style="margin: 5px;">停止录像</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<template v-if="ptz">
|
|
|
|
|
<tr>
|
|
|
|
|
@ -48,15 +29,15 @@
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Zoomin')" :src="config.apigateway+'/IoTCenter/images/zoomin.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Left')" :src="config.apigateway+'/IoTCenter/images/left.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Stop')" :src="config.apigateway+'/IoTCenter/images/stop.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Right')" :src="config.apigateway+'/IoTCenter/images/right.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Zoomout')" :src="config.apigateway+'/IoTCenter/images/zoomout.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Left')" :src="config.apigateway+'/IoTCenter/images/left.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Stop')" :src="config.apigateway+'/IoTCenter/images/stop.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Right')" :src="config.apigateway+'/IoTCenter/images/right.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Zoomout')" :src="config.apigateway+'/IoTCenter/images/zoomout.png'" style="margin: 5px;" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Down')" :src="config.apigateway+'/IoTCenter/images/down.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td style="text-align: center;"><img v-on:click="execApi(device.number,'/Onvif/Down')" :src="config.apigateway+'/IoTCenter/images/down.png'" style="margin: 5px;" /></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
@ -65,8 +46,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="weui-panel weui-panel_access">
|
|
|
|
|
<div class="weui-panel__hd" >设备信息</div>
|
|
|
|
|
<div class="weui-panel__bd" >
|
|
|
|
|
<div class="weui-panel__hd">设备信息</div>
|
|
|
|
|
<div class="weui-panel__bd">
|
|
|
|
|
<code class="weui-cell" v-for="item in device.data" style="word-wrap:break-word; color:#212529">
|
|
|
|
|
{{item.name}}
|
|
|
|
|
{{item.value}}
|
|
|
|
|
@ -95,7 +76,7 @@
|
|
|
|
|
this.playByFlvJs();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.playByWXInlinePlayer();
|
|
|
|
|
this.playHls();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
destroyed: function () {
|
|
|
|
|
@ -111,6 +92,9 @@
|
|
|
|
|
this.wxInlinePlayer.play();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
playHls: function () {
|
|
|
|
|
$('video.' + this.device.number).attr('src', this.url);
|
|
|
|
|
},
|
|
|
|
|
playByFlvJs: function () {
|
|
|
|
|
var videoElement = $('video.' + this.device.number)[0];
|
|
|
|
|
var push = Enumerable.from(this.device.data).where(o => o.name === '推流').firstOrDefault();
|
|
|
|
|
@ -267,13 +251,16 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
url: function () {
|
|
|
|
|
//return location.protocol + '//' + location.hostname + '/live/' + this.device.number + '.flv';
|
|
|
|
|
return config.liverUrl + '/live/' + this.device.number + '.flv';
|
|
|
|
|
//return getDeviceDataValue(this.device, 'flv');
|
|
|
|
|
url: function () {
|
|
|
|
|
if (this.isFlvSupported) {
|
|
|
|
|
return location.protocol + '//' + location.hostname + '/live/' + this.device.number + '.flv';
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return location.protocol + '//' + location.hostname + '/live/' + this.device.number + '.m3u8';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
isFlvSupported: function () {
|
|
|
|
|
return flvjs.isSupported();
|
|
|
|
|
return flvjs.isSupported() && window.navigator.userAgent.indexOf('Mac OS X') === -1;//AppleWebKit
|
|
|
|
|
},
|
|
|
|
|
ptz: function () {
|
|
|
|
|
if (getDeviceDataValue(this.device, '云台地址')) {
|
|
|
|
|
|
