|
|
|
@ -39,7 +39,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;text-align:center;">
|
|
|
|
|
<video id="video" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
|
|
|
|
|
<video id="liveVideo" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -157,7 +157,7 @@
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function loadTemplate() {
|
|
|
|
|
var url = server + '/IoTCenter/App/GetTemplate?template=' + data.Template;
|
|
|
|
|
var url = server + '/IoTCenter/App/GetTemplate?template=' + data.MobileTemplate;
|
|
|
|
|
axios.post(url, { crossDomain: true })
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
var html = response.data;
|
|
|
|
@ -258,7 +258,7 @@
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
var flvPlayer;
|
|
|
|
|
var livePlayer;
|
|
|
|
|
var timer;
|
|
|
|
|
var decodedFrames;
|
|
|
|
|
var muted = true;
|
|
|
|
@ -268,10 +268,30 @@
|
|
|
|
|
});
|
|
|
|
|
function UpdateCamera() {
|
|
|
|
|
var number = $('#camera').val();
|
|
|
|
|
var video = document.getElementById("liveVideo");
|
|
|
|
|
if (number) {
|
|
|
|
|
closePlayer(flvPlayer);
|
|
|
|
|
playFlv(document.getElementById("video"));
|
|
|
|
|
if (flvjs.isSupported) {
|
|
|
|
|
console.log('flv support');
|
|
|
|
|
playFlv(video);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
playHls(video);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function playHls(videoElement) {
|
|
|
|
|
var number = $('#camera').val();
|
|
|
|
|
var device = Enumerable.from(vm.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
|
|
|
|
|
var url = Enumerable.from(device.Data).where(o => o.Name === '子码流hls').firstOrDefault().Value;
|
|
|
|
|
var hasPtz = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault();
|
|
|
|
|
if (hasPtz && hasPtz.Value === '是') {
|
|
|
|
|
$('#ptz').show();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
$('#ptz').hide();
|
|
|
|
|
}
|
|
|
|
|
video.src = url;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function playFlv(videoElement) {
|
|
|
|
|
var number = $('#camera').val();
|
|
|
|
@ -285,9 +305,9 @@
|
|
|
|
|
else {
|
|
|
|
|
$('#ptz').hide();
|
|
|
|
|
}
|
|
|
|
|
closePlayer(flvPlayer);
|
|
|
|
|
closePlayer(livePlayer);
|
|
|
|
|
try {
|
|
|
|
|
flvPlayer = flvjs.createPlayer({
|
|
|
|
|
livePlayer = flvjs.createPlayer({
|
|
|
|
|
type: 'flv',
|
|
|
|
|
url: url,
|
|
|
|
|
isLive: true,
|
|
|
|
@ -298,53 +318,51 @@
|
|
|
|
|
stashInitialSize: 1,
|
|
|
|
|
fixAudioTimestampGap: false
|
|
|
|
|
});
|
|
|
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
|
|
|
flvPlayer.load();
|
|
|
|
|
flvPlayer.volume = volume;
|
|
|
|
|
flvPlayer.muted = muted;
|
|
|
|
|
livePlayer.attachMediaElement(videoElement);
|
|
|
|
|
livePlayer.load();
|
|
|
|
|
livePlayer.volume = volume;
|
|
|
|
|
livePlayer.muted = muted;
|
|
|
|
|
timer = setInterval(function () {
|
|
|
|
|
console.log('.');
|
|
|
|
|
if (flvPlayer.statisticsInfo.speed == 0) {
|
|
|
|
|
if (livePlayer.statisticsInfo.speed == 0) {
|
|
|
|
|
console.log('reload1');
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
closePlayer(flvPlayer);
|
|
|
|
|
playFlv(videoElement);
|
|
|
|
|
}
|
|
|
|
|
else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
|
|
|
|
|
else if (decodedFrames && livePlayer.statisticsInfo.decodedFrames <= decodedFrames) {
|
|
|
|
|
console.log('reload2');
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
closePlayer(flvPlayer);
|
|
|
|
|
playFlv(videoElement);
|
|
|
|
|
}
|
|
|
|
|
else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
|
|
|
|
|
else if (livePlayer.buffered.end(0) - livePlayer.currentTime > 1) {
|
|
|
|
|
console.log('reset currentTime');
|
|
|
|
|
flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
|
|
|
|
|
livePlayer.currentTime = livePlayer.buffered.end(0) - 0.001;
|
|
|
|
|
}
|
|
|
|
|
decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
|
|
|
|
|
decodedFrames = livePlayer.statisticsInfo.decodedFrames;
|
|
|
|
|
}, 10 * 1000);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function closePlayer(flvPlayer) {
|
|
|
|
|
function closePlayer(livePlayer) {
|
|
|
|
|
if (timer) {
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
}
|
|
|
|
|
if (flvPlayer != null) {
|
|
|
|
|
if (livePlayer != null) {
|
|
|
|
|
try {
|
|
|
|
|
flvPlayer.pause();
|
|
|
|
|
livePlayer.pause();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
flvPlayer.unload();
|
|
|
|
|
flvPlayer.detachMediaElement();
|
|
|
|
|
livePlayer.unload();
|
|
|
|
|
livePlayer.detachMediaElement();
|
|
|
|
|
try {
|
|
|
|
|
flvPlayer.destroy();
|
|
|
|
|
livePlayer.destroy();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
flvPlayer = null;
|
|
|
|
|
livePlayer = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function ajax(url, data, type) {
|
|
|
|
|