From 22f2d37f1fb0b9f00e9aaab9d5ebfbb31db45049 Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Wed, 29 Jul 2020 16:38:04 -0700
Subject: [PATCH] Show GPS data on Video Recordings (if they have it)
---
libs/webServerPaths.js | 6 +++-
web/libs/js/dash2.elements.js | 34 +++++++++++++++---
web/libs/js/dash2.gps.js | 66 ++++++++++++++++++++++++++++++++++
web/pages/blocks/videoview.ejs | 12 ++++++-
web/pages/home.ejs | 1 +
5 files changed, 112 insertions(+), 7 deletions(-)
create mode 100644 web/libs/js/dash2.gps.js
diff --git a/libs/webServerPaths.js b/libs/webServerPaths.js
index d7b0dac8..b17d3498 100644
--- a/libs/webServerPaths.js
+++ b/libs/webServerPaths.js
@@ -1558,7 +1558,11 @@ module.exports = function(s,config,lang,app,io){
req.dir=s.getVideoDirectory(r[0])+req.params.file
fs.stat(req.dir,function(err,stats){
if (!err){
- s.streamMp4FileOverHttp(req.dir,req,res)
+ if(req.query.json === 'true'){
+ s.closeJsonResponse(res,r[0])
+ }else{
+ s.streamMp4FileOverHttp(req.dir,req,res)
+ }
}else{
res.end(user.lang['File Not Found in Filesystem'])
}
diff --git a/web/libs/js/dash2.elements.js b/web/libs/js/dash2.elements.js
index 692339bb..38e2cd49 100644
--- a/web/libs/js/dash2.elements.js
+++ b/web/libs/js/dash2.elements.js
@@ -157,12 +157,12 @@ $(document).ready(function(e){
e.preventDefault();
e.href=$(this).attr('href')
var el = $('#video_viewer')
- var modalBody = el.find('.modal-body')
+ var videoContainer = el.find('.video-container')
el.find('.modal-title span').html(e.mon.name+' - '+e.file)
var html = '<video class="video_video" video="'+e.href+'" autoplay loop controls><source src="'+e.href+'" type="video/'+e.mon.ext+'"></video><br><small class="msg"></small>'
- modalBody.html(html)
+ videoContainer.html(html)
el.find('video')[0].onerror = function(){
- modalBody.find('.msg').text(lang.h265BrowserText1)
+ videoContainer.find('.msg').text(lang.h265BrowserText1)
}
el.attr('mid',e.mid);
footer = el.find('.modal-footer');
@@ -178,6 +178,28 @@ $(document).ready(function(e){
if(d.ok !== true)console.log(d,new Error())
})
}
+ setTimeout(function(){
+ destroyGpsHandlerForVideoFile(`video_viewer_gps_map_map`)
+ var videoElement = videoContainer.find('.video_video')
+ var gpsContainer = videoContainer.next()
+ var fullWidth = 'col-md-12'
+ var partialWidth = 'col-md-8'
+ createGpsHandlerForVideoFile({
+ ke: e.ke,
+ mid: e.mid,
+ file: e.file,
+ targetVideoElement: videoElement,
+ targetMapElement: `video_viewer_gps_map`,
+ },function(response){
+ if(response.ok){
+ videoContainer.addClass(partialWidth).removeClass(fullWidth)
+ gpsContainer.show()
+ }else{
+ videoContainer.addClass(fullWidth).removeClass(partialWidth)
+ gpsContainer.hide()
+ }
+ })
+ },2000)
break;
case'delete':
e.preventDefault();
@@ -766,8 +788,10 @@ $(document).ready(function(e){
})
$('.modal').on('hidden.bs.modal',function(){
- $(this).find('video').remove();
- $(this).find('iframe').attr('src','about:blank');
+ var el = $(this)
+ el.find('video').remove();
+ el.find('iframe').attr('src','about:blank');
+ if(el.attr('id') === 'video_viewer')destroyGpsHandlerForVideoFile(`video_viewer_gps_map_map`)
});
$('.modal').on('shown.bs.modal',function(){
e={e:$(this).find('.flex-container-modal-body')}
diff --git a/web/libs/js/dash2.gps.js b/web/libs/js/dash2.gps.js
new file mode 100644
index 00000000..13ef369c
--- /dev/null
+++ b/web/libs/js/dash2.gps.js
@@ -0,0 +1,66 @@
+$(document).ready(function(){
+ var createMapElement = function(options){
+ $(`#${options.id}`).html(`<div class="gps-map" id="${options.id}_map" style="min-height: 600px;border-radius:5px;overflow:hidden;"></div>`)
+ var vidViewMap = L.map(options.id + '_map').setView(options.initalView, options.zoom)
+ var mapBoxMarker;
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: 'OpenStreet Map'
+ }).addTo(vidViewMap)
+
+ if(options.marker)mapBoxMarker = L.marker(options.marker).addTo(vidViewMap)
+ return {
+ map: vidViewMap,
+ marker: mapBoxMarker,
+ }
+ }
+ window.destroyGpsHandlerForVideoFile = function(mapId){
+ var vidViewMap = $(`#${mapId}`)
+ if (vidViewMap.length > 0) {
+ try{
+ vidViewMap.off();
+ vidViewMap.remove();
+ }catch(err){
+ console.log(err)
+ }
+ }
+ }
+ window.createGpsHandlerForVideoFile = function(options,callback){
+ var groupKey = options.ke
+ var monitorId = options.mid
+ var filename = options.file
+ var videoElement = options.targetVideoElement
+ $.get(getApiPrefix() + '/videos/' + groupKey + '/' + monitorId + '/' + filename + '?json=true',function(video){
+ var response = {ok: false}
+ var gps = video.details.gps
+ console.log(video)
+ if(gps && gps[0]){
+ var gpsPoints = {}
+ var firstMarker = gps[0]
+
+ var videoStartTime = new Date(video.time)
+ $.each(gps,function(n,point){
+ var pointTime = new Date(point.time)
+ var seekPosition = (pointTime - videoStartTime) / 1000
+ gpsPoints[pointTime] = point
+ })
+ response.ok = true
+ response.gpsPoints = gpsPoints
+ callback(response)
+ response.elements = createMapElement({
+ id: options.targetMapElement,
+ initalView: [firstMarker.lat,firstMarker.lng],
+ marker: [firstMarker.lat,firstMarker.lng],
+ zoom: 5,
+ })
+ videoElement.on('timeupdate',function(){
+ var point = gpsPoints[parseInt(this.currentTime)]
+ if(point){
+ mapBoxMarker.setLatLng([point.lat, point.lng]).update()
+ }
+ })
+ }else{
+ callback(response)
+ }
+ })
+ }
+})
diff --git a/web/pages/blocks/videoview.ejs b/web/pages/blocks/videoview.ejs
index 65db05a7..86b768d9 100644
--- a/web/pages/blocks/videoview.ejs
+++ b/web/pages/blocks/videoview.ejs
@@ -66,7 +66,17 @@
</button>
<h4 class="modal-title" id="video_viewerLabel"><i class="fa fa-play-circle"></i> <span></span></h4>
</div>
- <div class="modal-body text-center"></div>
+ <div class="modal-body text-center">
+ <div class="row">
+ <div class="col-md-8 video-container">
+ </div>
+ <div class="col-md-4">
+ <div id="video_viewer_gps_map">
+
+ </div>
+ </div>
+ </div>
+ </div>
<div class="modal-footer">
<a class="btn btn-danger pull-left" video="delete" data-dismiss="modal"><%-lang.Delete%></a>
<div class="btn-group">
diff --git a/web/pages/home.ejs b/web/pages/home.ejs
index 23ab9670..496b2568 100644
--- a/web/pages/home.ejs
+++ b/web/pages/home.ejs
@@ -217,6 +217,7 @@
<script src="<%-window.libURL%>libs/js/dash2.elements.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.elementbuilder.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.init.js"></script>
+<script src="<%-window.libURL%>libs/js/dash2.gps.js"></script>
<% customAutoLoad.LibsJs.forEach(function(lib){ %>
<script src="<%-window.libURL%>libs/js/<%-lib%>"></script>
<% }) %>