You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
13 KiB
285 lines
13 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
|
|
<link rel="stylesheet" href="css/framework7-icons.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<style>
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="statusbar"></div>
|
|
<div id="app">
|
|
<f7-app :params="$root.f7params">
|
|
<f7-view main>
|
|
<f7-page>
|
|
<f7-navbar :title="model?model.Name:'节点'">
|
|
<a href="nodes.html" slot="nav-left" class="link external"><i class="icon icon-back"></i></a>
|
|
</f7-navbar>
|
|
<template v-if="model">
|
|
<template v-if="HasDevices('摄像头')">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="item-input-wrap input-dropdown-wrap" style="width:100%;">
|
|
<select class="input-with-value" id="camera" @change="CameraSelected" style="width:100%;">
|
|
<option v-for="c in GetCameras()" :value="c.Number">{{c.DisplayName||c.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="ptz">
|
|
<div class="col-md-12">
|
|
<div class="box box-solid">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title"><img src="/images/ptz.png" style="height:16px;margin-right:10px;" />云台操作</h3>
|
|
</div>
|
|
<div class="box-body" style="height:178px;">
|
|
<table class="ptz">
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td><img class="ajax camera Up" src="/images/up.png" /></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></td>
|
|
<td><img class="ajax camera Left" src="/images/left.png" /></td>
|
|
<td><img class="ajax camera Stop" src="/images/stop.png" /></td>
|
|
<td><img class="ajax camera Right" src="/images/right.png" /></td>
|
|
<td><img class="ajax camera Zoomout" src="/images/zoomout.png" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td><img class="ajax camera Down" src="/images/down.png" /></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</f7-page>
|
|
</f7-view>
|
|
</f7-app>
|
|
</div>
|
|
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
|
|
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
|
|
<script type="text/javascript" src="lib/URI.js/URI.min.js"></script>
|
|
<script type="text/javascript" src="lib/linq.js/linq.min.js"></script>
|
|
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
|
|
<script type="text/javascript" src="lib/jquery.validation/jquery.validate.min.js"></script>
|
|
<script type="text/javascript" src="lib/jquery.validation.unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
|
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
|
|
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
|
|
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
|
|
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
|
|
<script>
|
|
var flvPlayer;
|
|
var timer;
|
|
var decodedFrames;
|
|
var muted = true;
|
|
var volume = 0.5;
|
|
$(document).on('change', '#camera', function (e) {
|
|
UpdateCamera()
|
|
});
|
|
function UpdateCamera() {
|
|
var number = $('#camera').val();
|
|
if (number) {
|
|
closePlayer(flvPlayer);
|
|
playFlv(document.getElementById("video"));
|
|
}
|
|
}
|
|
function playFlv(videoElement) {
|
|
var number = $('#camera').val();
|
|
if (number) {
|
|
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 === '子码流flv').firstOrDefault().Value;
|
|
var hasPtz = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault()
|
|
if (hasPtz && hasPtz.Value === '是') {
|
|
$('#ptz').show();
|
|
}
|
|
else {
|
|
$('#ptz').hide();
|
|
}
|
|
closePlayer(flvPlayer);
|
|
try {
|
|
flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
cors: true
|
|
}, {
|
|
enableWorker: true,
|
|
enableStashBuffer: false,
|
|
stashInitialSize: 1,
|
|
fixAudioTimestampGap: false
|
|
});
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
flvPlayer.load();
|
|
flvPlayer.volume = volume;
|
|
flvPlayer.muted = muted;
|
|
timer = setInterval(function () {
|
|
console.log('.');
|
|
if (flvPlayer.statisticsInfo.speed == 0) {
|
|
console.log('reload1');
|
|
clearInterval(timer);
|
|
closePlayer(flvPlayer);
|
|
playFlv(videoElement);
|
|
}
|
|
else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
|
|
console.log('reload2');
|
|
clearInterval(timer);
|
|
closePlayer(flvPlayer);
|
|
playFlv(videoElement);
|
|
}
|
|
else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
|
|
console.log('reset currentTime');
|
|
flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
|
|
}
|
|
decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
|
|
}, 10 * 1000);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
}
|
|
function closePlayer(flvPlayer) {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
if (flvPlayer != null) {
|
|
try {
|
|
flvPlayer.pause();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
flvPlayer.unload();
|
|
flvPlayer.detachMediaElement();
|
|
try {
|
|
flvPlayer.destroy();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
flvPlayer = null;
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
var debug = true;
|
|
var wsUrl = localStorage.getItem('server') + '/IoTCenter/hub?group=page';
|
|
var connectionId;
|
|
const connection = new signalR.HubConnectionBuilder()
|
|
.withUrl(wsUrl)
|
|
.build();
|
|
function connect() {
|
|
if (debug) { console.log('start connect to server:' + Date()); }
|
|
connection.start().then(function () {
|
|
|
|
}).catch(function (err) {
|
|
console.error(err.toString());
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
}
|
|
connection.on('Connected', function (id) {
|
|
connectionId = id;
|
|
console.log(connectionId);
|
|
});
|
|
connection.onclose(function (err) {
|
|
console.error(err);
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
connection.on("ServerToClient", function (method, json, from) {
|
|
console.log(method + ':' + json);
|
|
if (method == 'NodeEntityInserted' ||
|
|
'NodeEntityUpdated' ||
|
|
'NodeEntityDeleted' ||
|
|
method == 'DeviceEntityInserted' ||
|
|
method == 'DeviceEntityDeleted') {
|
|
vm.load();
|
|
}
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
Framework7.use(Framework7Vue);
|
|
var app;
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
f7params: {
|
|
routes: [],
|
|
name: 'My App',
|
|
id: 'com.myapp.test',
|
|
theme: 'ios',
|
|
},
|
|
server: localStorage.getItem('server'),
|
|
token: localStorage.getItem('token'),
|
|
model: null
|
|
};
|
|
},
|
|
mounted() {
|
|
if (!this.server) {
|
|
location.href = "config.html";
|
|
}
|
|
if (!this.token) {
|
|
location.href = "login.html";
|
|
}
|
|
this.$f7ready((f7) => {
|
|
app = this.$f7;
|
|
});
|
|
this.load();
|
|
connect();
|
|
},
|
|
methods: {
|
|
load: function () {
|
|
var url = this.server + '/IoTCenter/App/GetNode';
|
|
var data = new FormData();
|
|
data.append('number', new URI().search(true).number);
|
|
data.append('token', this.token);
|
|
axios.post(url, data)
|
|
.then(function (response) {
|
|
console.log(response);
|
|
var data = response.data;
|
|
vm.model = data;
|
|
Vue.nextTick(function () {
|
|
UpdateCamera();
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
app.dialog.alert(error, '警告', function () { })
|
|
});
|
|
},
|
|
HasDevices(name) {
|
|
return Enumerable
|
|
.from(vm.model.Devices)
|
|
.any(function (o) { return o.Name === name });
|
|
},
|
|
GetCameras() {
|
|
return Enumerable
|
|
.from(vm.model.Devices)
|
|
.where(function (o) { return o.Name === '摄像头' })
|
|
.toArray();
|
|
},
|
|
CameraSelected() {
|
|
console.log('camera selected:' + new Date());
|
|
UpdateCamera();
|
|
},
|
|
VolumeChange(e) {
|
|
muted = e.target.muted;
|
|
volume = e.target.volume;
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |