/*var*/ var isApp = location.href.indexOf('http') !== 0; var server = isApp ? localStorage.getItem('server') : null; var iotCenter = isApp ? server + '/IoTCenter' : ''; var token = isApp ? localStorage.getItem('token') : null; var wsUrl = iotCenter + '/hub?group=page'; var connectionId; const connection = new signalR.HubConnectionBuilder() .withUrl(wsUrl) .build(); var app; var vm; // var livePlayer; var timer; var decodedFrames; var muted = true; var volume = 0.5; // if (isApp) { Framework7.use(Framework7Vue); } /*fun*/ function alert(message,title) { if (isApp) { title = title || '消息'; app.dialog.alert(message, title); } else { alert(message); } } function loadData() { var url = iotCenter + '/App/GetNode'; var formData = new FormData(); formData.append('number', new URI().search(true).number); if (isApp) { formData.append('token', token); } axios.post(url, formData) .then(function (response) { console.log(response); data = response.data; if (data.Template) { loadTemplate(); } else { init(); } }) .catch(function (error) { alert(error) }); } function loadTemplate() { var url = iotCenter + '/App/GetTemplate?template=' + data.Template; axios.post(url, { crossDomain: true }) .then(function (response) { var html = response.data; $('#template').html(html); init(); }) .catch(function (error) { alert(error) }); } function UpdateCamera() { var number = $('#camera').val(); var video = document.getElementById("liveVideo"); if (number) { 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(); 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(livePlayer); try { livePlayer = flvjs.createPlayer({ type: 'flv', url: url, isLive: true, cors: true }, { enableWorker: true, enableStashBuffer: false, stashInitialSize: 1, fixAudioTimestampGap: false }); livePlayer.attachMediaElement(videoElement); livePlayer.load(); livePlayer.volume = volume; livePlayer.muted = muted; timer = setInterval(function () { console.log('.'); if (livePlayer.statisticsInfo.speed == 0) { console.log('reload1'); clearInterval(timer); playFlv(videoElement); } else if (decodedFrames && livePlayer.statisticsInfo.decodedFrames <= decodedFrames) { console.log('reload2'); clearInterval(timer); playFlv(videoElement); } else if (livePlayer.buffered.end(0) - livePlayer.currentTime > 1) { console.log('reset currentTime'); livePlayer.currentTime = livePlayer.buffered.end(0) - 0.001; } decodedFrames = livePlayer.statisticsInfo.decodedFrames; }, 10 * 1000); } catch (e) { console.log(e); } } } function closePlayer(livePlayer) { if (timer) { clearInterval(timer); } if (livePlayer != null) { try { livePlayer.pause(); } catch (e) { console.error(e); } livePlayer.unload(); livePlayer.detachMediaElement(); try { livePlayer.destroy(); } catch (e) { console.error(e); } livePlayer = null; } } function ajax(url, data, type) { url = iotCenter + url console.log(url); type = type || 'get'; $('.overlay').show(); $.ajax({ type: type, url: url, data: data, success: AjaxCallBack }).fail(function (result) { console.log('error'); console.log(result); }).always(function () { $('.overlay').hide(); }); } function AjaxCallBack(response) { var result = response; if (result.code === 0) { if (result.type === 0) { if (result.format === 1) { console.log('format/1/base64 jpeg image'); $('#callback .page-content').html(''); } else { console.log('format/0/json object'); $('#callback .page-content').html(result.data); } app.popup.open('#callback'); } } } function updateItem(list, item) { var update = false; for (var i = 0; i < list.length; i++) { if (list[i].Id == item.Id) { update = true; break; } } if (update) { list.splice(i, 1, item); } else { list.push(item); } } function deleteItem(list, item) { for (var i = 0; i < list.length; i++) { if (list[i].Id == item.Id) { list.splice(i, 1); break; } } } /*event*/ $(document).on('change', '#camera', function (e) { UpdateCamera() }); $(document).on('mousedown touchstart', 'img.camera.ajax', function (e) { var number = $('#camera').val(); var cmd = $(this).attr('data-cmd'); ajax('/App/ExecApi', { connectionId: connectionId, number: number, method: '/Onvif/'+cmd }, 'post'); return false; }); $(document).on('mouseup touchend', 'img.camera.ajax', function (e) { var number = $('#camera').val(); var cmd = $(this).attr('data-cmd'); if (cmd!=='Stop') { setTimeout(function () { ajax('/App/ExecApi', { number: number, method: '/Onvif/Stop' }, 'post'); }, 500); } return false; }); /*ws*/ function connect() { if (debug) { console.log('start connect to server:' + Date()); } if (connection.state === signalR.HubConnectionState.Disconnected) { 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); onMessage(method, json, from); }); function onMessage(method, json, from) { var item = JSON.parse(json); if (method == 'DataEntityInserted' || method == 'DataEntityUpdated') { var device = Enumerable.from(vm.model.Devices).firstOrDefault(function (o) { return o.Id === item.DeviceId; }) if (device) { updateItem(device.Data, item); } } else if (method == 'SceneEntityInserted' ||method == 'SceneEntityUpdated') { updateItem(vm.model.Scenes, item); } else if (method == 'SceneEntityDeleted') { deleteItem(vm.model.Scenes, item); } } /*vue*/ function init() { $('#template style').each(function (i, n) { $('head').append(n); }); vm = new Vue({ el: '#app', data() { return { f7params: { routes: [], name: 'My App', id: 'com.myapp.test', theme: 'ios', }, model: data }; }, mounted() { if (isApp) { if (!server) { location.href = "config.html"; } if (!token) { location.href = "login.html"; } this.$f7ready((f7) => { app = this.$f7; }); } connect(); this.$nextTick(function () { UpdateCamera(); }); }, methods: { HasDevices(name) { return Enumerable .from(this.model.Devices) .any(function (o) { return o.Name === name }); }, GetDevices(name) { return Enumerable.from(this.model.Devices) .where(function (o) { return o.Name == name; }) .toArray(); }, GetDataValue(number, name) { var device = Enumerable.from(this.model.Devices) .where(function (o) { return o.Number === number; }) .firstOrDefault(); if (device != null) { var data = Enumerable.from(device.Data) .where(function (o) { return o.Name == name }) .firstOrDefault(); if (data != null) { return data.Value; } } return null; }, GetDeviceDataValue(number, name, attr) { var device = Enumerable.from(this.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault(); var data = Enumerable.from(device.Data).where(o => o.Name === name).firstOrDefault(); if (data != null) { return data[attr]; } return null; }, CameraSelected() { console.log('camera selected:' + new Date()); UpdateCamera(); }, VolumeChange(e) { muted = e.target.muted; volume = e.target.volume; }, CallApi(number, method, query) { ajax('/App/ExecApi', { number: number, method: method, query: query }, 'post'); }, AjaxSubmit(event, deviceNumber, dataName) { var device = Enumerable.from(vm.model.Devices) .where(function (o) { return o.Number === deviceNumber; }) .firstOrDefault(); if (device != null) { var data = Enumerable.from(device.Data) .where(function (o) { return o.Name == dataName }) .firstOrDefault(); if (data != null) { data.Value = $(event.target).val(); } } var form = $(event.target).parents('form'); var url = form.attr('action') + '?' + form.serialize(); Vue.nextTick(function () { ajax(url, null, 'get'); }); }, getCode1(code) { var pattern = 0; var direction = 0; var wind = 0; var power = 2; var temperature = 1; if (code > 480 + 2) { pattern = 480; } else if (code > 360 + 2) { pattern = 360; } else if (code > 240 + 2) { pattern = 240; } else if (code > 120 + 2) { pattern = 120; } else { pattern = 0; } code -= pattern; if (code > 75 + 2) { direction = 75; } else if (code > 60 + 2) { direction = 60; } else { direction = 0; } code -= direction; if (code > 45 + 2) { wind = 45; } else if (code > 30 + 2) { wind = 30; } else if (code > 15 + 2) { wind = 15; } else { wind = 0; } code -= wind; if (code === 1) { power = 1; } else { power = 2; temperature = code - power; } return { pattern: pattern, direction: direction, wind: wind, power: power, temperature: temperature }; }, SendCode1(event) { console.log(event.target); if (event.type !== 'change' && !event.target.checked) { return; } var form = $(event.target).parents('form'); var url = form.attr('action') + '?' + form.serialize(); if (form.hasClass('type1')) { if (event.target.name == "power" && event.target.value == "1") { url = new URI(url).setQuery('Code', '1').toString(); } else { var list = {}; list['power'] = form.find("[name = 'power']:checked").val(); list['pattern'] = form.find("[name = 'pattern']:checked").val(); list['direction'] = form.find("[name = 'direction']:checked").val(); list['wind'] = form.find("[name = 'wind']:checked").val(); list['temperature'] = form.find("[name = 'temperature']").val(); list[event.target.name] = event.target.value; var code = 0; for (var name in list) { code += parseInt(list[name]); } url = new URI(url).setQuery('Code', code).toString(); } } Vue.nextTick(function () { ajax(url, null, 'get'); }); }, getLightColor(h, s, v) { return hsvToRgb(parseInt(h * 360 / 255), parseInt(s * 100 / 255), parseInt(v * 100 / 255)); } } }); } function hsvToRgb(h, s, v) { if (h == "") h = 0; if (s == "") s = 0; if (v == "") v = 0; h = parseFloat(h); s = parseFloat(s); v = parseFloat(v); if (h < 0) h = 0; if (s < 0) s = 0; if (v < 0) v = 0; if (h >= 360) h = 359; if (s > 100) s = 100; if (v > 100) v = 100; s /= 100.0; v /= 100.0; C = v * s; hh = h / 60.0; X = C * (1.0 - Math.abs((hh % 2) - 1.0)); r = g = b = 0; if (hh >= 0 && hh < 1) { r = C; g = X; } else if (hh >= 1 && hh < 2) { r = X; g = C; } else if (hh >= 2 && hh < 3) { g = C; b = X; } else if (hh >= 3 && hh < 4) { g = X; b = C; } else if (hh >= 4 && hh < 5) { r = X; b = C; } else { r = C; b = X; } m = v - C; r += m; g += m; b += m; r *= 255.0; g *= 255.0; b *= 255.0; r = Math.round(r); g = Math.round(g); b = Math.round(b); hex = r * 65536 + g * 256 + b; hex = hex.toString(16, 6); len = hex.length; if (len < 6) for (i = 0; i < 6 - len; i++) hex = '0' + hex; return '#' + hex; }