|
|
|
@ -1,48 +1,66 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="card" style="box-sizing:border-box;height:450px;margin:10px;">
|
|
|
|
|
<div class="card camera" style="box-sizing:border-box;height:490px;margin:10px;">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
{{device.displayName}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body" style="padding:0;">
|
|
|
|
|
<div class="row" style="width:320px;height:240px;margin: 0 auto;background-color:#000;position:relative;">
|
|
|
|
|
<div class="row video-container" style="width:100%;height:240px;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>
|
|
|
|
|
<canvas width="1080" height="720" style="width:100%;height:100%;object-fit:contain;background: black;margin:0 auto;" :class="device.number+' wxinlineplayer'" v-else></canvas>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<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>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<canvas width="1080" height="720" style="width:100%;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>
|
|
|
|
|
<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 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>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="box-sizing: border-box;width: 320px;height: 140px;margin: 5px auto;" :class="'row ptz '+ device.number">
|
|
|
|
|
<table class="ptz" style="width: 100%; height: 100%;">
|
|
|
|
|
<div style="box-sizing: border-box;width: 100%;margin: 5px auto;" :class="'row ptz '+ device.number">
|
|
|
|
|
<table style="width: 100%; height:100px;">
|
|
|
|
|
<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')">启动推流</button></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></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')">停止推流</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></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')">开始录像</button></td>
|
|
|
|
|
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></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')">停止录像</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<template v-if="ptz">
|
|
|
|
|
<tr>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td><img v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -75,6 +93,14 @@
|
|
|
|
|
this.stopWxInlinePlayer();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
play: function () {
|
|
|
|
|
if (this.playing) {
|
|
|
|
|
this.wxInlinePlayer.stop();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.wxInlinePlayer.play();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
playByFlvJs: function () {
|
|
|
|
|
var videoElement = $('video.' + this.device.number)[0];
|
|
|
|
|
var push = Enumerable.from(this.device.data).where(o => o.name === '推流').firstOrDefault();
|
|
|
|
@ -141,13 +167,6 @@
|
|
|
|
|
this.flvPlayer = null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
stopWxInlinePlayer: function () {
|
|
|
|
|
if (this.wxInlinePlayer) {
|
|
|
|
|
this.wxInlinePlayer.stop();
|
|
|
|
|
this.wxInlinePlayer.destroy();
|
|
|
|
|
this.wxInlinePlayer = null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
volumeChange: function (e) {
|
|
|
|
|
this.muted = e.target.muted;
|
|
|
|
|
this.volume = e.target.volume;
|
|
|
|
@ -165,16 +184,13 @@
|
|
|
|
|
muted: true,
|
|
|
|
|
autoplay: true,
|
|
|
|
|
loop: false,
|
|
|
|
|
isLive: false,
|
|
|
|
|
isLive: true,
|
|
|
|
|
chunkSize: 128 * 1024,
|
|
|
|
|
preloadTime: 5e2,
|
|
|
|
|
bufferingTime: 1e3,
|
|
|
|
|
cacheSegmentCount: 64,
|
|
|
|
|
customLoader: null
|
|
|
|
|
});
|
|
|
|
|
videoElement.addEventListener('click', () => {
|
|
|
|
|
vm.wxInlinePlayer.play();
|
|
|
|
|
});
|
|
|
|
|
vm.wxInlinePlayer.on('loadError', e => {
|
|
|
|
|
console.log('>>>>> load error happend: ', e);
|
|
|
|
|
});
|
|
|
|
@ -201,13 +217,15 @@
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
play: function () {
|
|
|
|
|
if (this.playing) {
|
|
|
|
|
stopWxInlinePlayer: function () {
|
|
|
|
|
if (this.wxInlinePlayer) {
|
|
|
|
|
this.wxInlinePlayer.stop();
|
|
|
|
|
this.wxInlinePlayer.destroy();
|
|
|
|
|
this.wxInlinePlayer = null;
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.wxInlinePlayer.play();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showControls: function (e) {
|
|
|
|
|
$('.control.' + this.device.number).toggle();
|
|
|
|
|
},
|
|
|
|
|
mute: function () {
|
|
|
|
|
this.muted = !this.muted;
|
|
|
|
@ -219,12 +237,28 @@
|
|
|
|
|
},
|
|
|
|
|
fullScreen: function () {
|
|
|
|
|
var videoElement = $('canvas.' + this.device.number)[0];
|
|
|
|
|
videoElement.requestFullscreen();
|
|
|
|
|
var container = $(videoElement).parents('.video-container')[0];
|
|
|
|
|
if (document.fullscreen || document.webkitFullscreenElement) {
|
|
|
|
|
if (document.webkitExitFullscreen) {
|
|
|
|
|
document.webkitExitFullscreen();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
if (container.webkitRequestFullScreen) {
|
|
|
|
|
container.webkitRequestFullScreen();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
container.requestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
url: function () {
|
|
|
|
|
return 'http://localhost/music.flv';
|
|
|
|
|
return location.protocol + '//' + location.hostname + location.pathname + 'music.flv';
|
|
|
|
|
//return getDeviceDataValue(this.device, 'flv');
|
|
|
|
|
},
|
|
|
|
|
isFlvSupported: function () {
|
|
|
|
|