Show GPS data on Video Recordings (if they have it)
Moe
parent
f523ccc2f2
commit
22f2d37f1f
|
|
@ -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'])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<% }) %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue