Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Novatek MP4 GPS Player: a single file JavaScript implementation of Sergei's nvtk_mp42gpx.py + Google Maps
<html>
<head>
<title>Novatek mp4 GPS Player</title>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
#map {
height: 250px;
width: 250px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap" async defer></script>
<script type="javascript/worker" id="processFileSync">
function freadAsArrayBufferSync(file,offset,length) {
var slice = file.slice(offset, offset + length);
var result = new FileReaderSync().readAsArrayBuffer(slice);
// console.log(typeof result + ": " + result + "\n");
return result;
}
function freadAsUint32Sync(file,offset) {
var slice = file.slice(offset, offset + 4);
var result = new FileReaderSync().readAsArrayBuffer(slice);
var dataview=new DataView(result);
var value=dataview.getUint32(0);
// console.log(typeof result + ": " + result + "\n");
return value;
}
function freadAsTextSync(file,offset,length) {
var slice = file.slice(offset, offset + length);
var result = new FileReaderSync().readAsText(slice);
// console.log(typeof result + ": " + result + "\n");
return result;
}
function get_atom_info_sync(file,offset) {
var atom_size = freadAsUint32Sync(file,offset);
var atom_type = freadAsTextSync(file,offset+4,4);
// console.log("offset:" + offset + " atom_size:" + atom_size + " atom_type:" + atom_type + "\n")
return [ atom_size, atom_type ];
}
function get_gps_atom_info_sync(file, offset) {
var gps_atom_pos = freadAsUint32Sync(file,offset);
var gps_atom_size = freadAsUint32Sync(file,offset+4,4);
// console.log("offset:" + offset + " gps_atom_pos:" + gps_atom_pos + " gps_atom_size:" + gps_atom_size + "\n")
return [ gps_atom_pos, gps_atom_size ];
}
function fix_time(hour,minute,second,year,month,day) {
return [(year+2000),"-",('00'+month).slice( -2 ),"-",('00'+day).slice( -2 ),
"T",('00'+hour).slice( -2 ),":",('00'+minute).slice( -2 ),":",('00'+second).slice( -2 ),
"Z"].join('');
}
function fix_coordinates(hemisphere,coordinate) {
// Novatek stores coordinates in odd DDDmm.mmmm format
var minutes = coordinate % 100.0;
var degrees = coordinate - minutes;
var f_coordinate = degrees / 100.0 + (minutes / 60.0);
if (hemisphere == 'S' || hemisphere == 'W') {
return -1*f_coordinate;
} else {
return f_coordinate;
}
}
function fix_speed(speed) {
// 1 knot = 0.514444 m/s
return speed * 0.514444;
}
function get_gps_atom_sync(file,atom_pos,atom_size) {
var expected_type='free';
var expected_magic='GPS ';
var atom_size1=freadAsUint32Sync(file,atom_pos);
var atom_type=freadAsTextSync(file,atom_pos+4,4);
var magic=freadAsTextSync(file,atom_pos+8,4);
if (atom_size != atom_size1 || atom_type != expected_type || magic != expected_magic) {
console.log("Error! skipping atom at " + atom_pos
+ " (expected size:" + atom_size
+ ", actual size:" + atom_size1
+ ", expected type:" + expected_type
+ ", actual type:" + atom_type
+ ", expected magic:" + expected_magic
+ ", actual maigc:"+ magic
+ ")!");
return [null,null,null,null];
}
var latitude=0;
var longitude=0;
var time=0;
var speed=0;
var data=freadAsArrayBufferSync(file,atom_pos,atom_size);
var dataview=new DataView(data);
// checking for weird Azdome 0xAA XOR "encrypted" GPS data. This portion is a quick fix.
console.log("data[12]:" + dataview.getUint8(12));
if (dataview.getUint8(12) == 0x05) {
if (atom_size < 254) {
var payload_size = atom_size;
} else {
var payload_size = 254;
}
var ui8=new Uint8Array(data.slice(18,18+payload_size));
var xor = ui8.map(function(n) {return n ^ 0xAA;});
var payload=String.fromCharCode.apply("", xor);
var year = payload.substr(8,4); // [8:12]
var month = payload.substr(12,2); // [12:14]);
var day = payload.substr(14,2); // [14:16]);
var hour = payload.substr(16,2); // [16:18]);
var minute = payload.substr(18,2); // [18:20]);
var second = payload.substr(20,2); // [20:22]);
var latitude_b = payload.substr(38,1); // [38]
var latitude = payload.substr(39,8); // [39:47]
var longitude_b = payload.substr(47,1); // [47]
var longitude = payload.substr(48,8); // [48:56]
var speed = payload.substr(57,8); // [57:65]
console.log([
"year:",year,
" month:",month,
" day:",day,
" hour:", hour,
" minute:",minute,
" second:",second,
" latitude_b:",latitude_b,
" longitude_b:",longitude_b,
" latitude:",latitude,
" longitude:",longitude,
" speed:",speed
].join(''));
var tim = new Date( parseInt(year), parseInt(month), parseInt(day), parseInt(hour), parseInt(minute), parseInt(second) )/1000.0 ;
var lat = fix_coordinates(latitude_b,parseFloat(latitude)/10000);
var lon = fix_coordinates(longitude_b,parseFloat(longitude)/1000);
//speed is not as accurate as it could be, only -1/+0 km/h accurate.
var spe = parseFloat(speed);// /3.6;
return [lat,lon,tim,spe];
} else {
var hour=dataview.getUint32(48+0,true);
var minute=dataview.getUint32(48+4,true);
var second=dataview.getUint32(48+8,true);
var year=dataview.getUint32(48+12,true);
var month=dataview.getUint32(48+16,true);
var day=dataview.getUint32(48+20,true);
var active=String.fromCharCode(dataview.getUint8(48+24));
var latitude_b=String.fromCharCode(dataview.getUint8(48+25));
var longitude_b=String.fromCharCode(dataview.getUint8(48+26));
var unknown2=dataview.getUint8(48+27);
var latitude=dataview.getFloat32(48+28,true);
var longitude=dataview.getFloat32(48+32,true);
var speed=dataview.getFloat32(48+36,true);
console.log([
"hour:", hour,
" minute:",minute,
" second:",second,
" year:",year,
" month:",month,
" day:",day,
" active:",active,
" latitude_b:",latitude_b,
" longitude_b:",longitude_b,
" unknown2:",unknown2,
" latitude:",latitude,
" longitude:",longitude,
" speed:",speed
].join(''));
var tim = new Date( 2000+year, month, day, hour, minute, second )/1000.0 ;
var lat = fix_coordinates(latitude_b,latitude);
var lon = fix_coordinates(longitude_b,longitude);
var spe = speed; // fix_speed(speed);
//it seems that A indicate reception
if (active != 'A') {
console.log("Skipping: lost GPS satelite reception. Time: " + time);
return [null,null,tim,null];
}
return [lat,lon,tim,spe];
}
}
onmessage = function(e) {
var file=e.data;
var offset=0;
var gps_data=[];
while (offset<=file.size-8) {
var [atom_size, atom_type] = get_atom_info_sync(file,offset);
if (atom_size === 0) { break; }
if (atom_type === "moov") {
console.log("Found moov atom... offset:" + offset + " atom_size:" + atom_size + " atom_type:" + atom_type);
var sub_offset = offset+8;
while (sub_offset < offset + atom_size) {
var [sub_atom_size, sub_atom_type] = get_atom_info_sync(file, sub_offset);
if (sub_atom_type === "gps ") {
console.log("Found gps chunk descriptor atom... sub_offset:" + sub_offset + " sub_atom_size:" + sub_atom_size + " sub_atom_type:" + sub_atom_type);
var gps_offset = 16 + sub_offset; // +16 = skip headers
while (gps_offset < sub_offset + sub_atom_size) {
var [ gps_atom_pos,gps_atom_size ] = get_gps_atom_info_sync(file,gps_offset);
console.log("gps_offset:" + gps_offset + " gps_atom_pos:" + gps_atom_pos + " gps_atom_size:" + gps_atom_size);
var [latitude,longitude,time,speed]=get_gps_atom_sync(file,gps_atom_pos,gps_atom_size);
console.log("latitude:"+latitude+" longitude:"+longitude+" time:"+time+" speed:"+speed);
// gps_data.push([latitude,longitude,time,speed]);
var gps={};
gps["latitude"]=latitude; gps["longitude"]=longitude; gps["time"]=time; gps["speed"]=speed;
gps_data.push(gps);
gps_offset += 8;
}
}
sub_offset += sub_atom_size;
}
}
offset+=atom_size;
}
// postMessage(gps_data);
var sorted=gps_data.sort(function(a,b){return a.time-b.time;})
postMessage(sorted);
};
</script>
<script>
function process_file_sync(file){
var blob = new Blob([document.querySelector('#processFileSync').textContent]);
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
var videoSources=document.querySelectorAll("source[title=\""+file.name+"\"]");
videoSources.forEach(function(videoSource) {
videoSource.setAttribute("data-gps",JSON.stringify(e.data));
});
console.log(JSON.stringify(e.data));
var path=[];
e.data.forEach(function( gps ) {
if ( gps.latitude == null || gps.longitude == null ) {
if (path.length>1) {
var line = new google.maps.Polyline({path: path,map: map});
path=[];
}
return;
}
var pos={}; pos["lat"]=gps.latitude; pos["lng"]=gps.longitude;
path.push(pos);
});
if (path.length>1) {
var line = new google.maps.Polyline({path: path,map: map});
}
};
worker.postMessage(file); // Start the worker.
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
if (f.type.match('image.*')) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', URL.createObjectURL(f),
'" title="', escape(f.name), '"/>'].join('');
span.children[0].addEventListener('click', function() {
var main=document.getElementById('main');
main.innerHTML = ['<img width="100%" src="', this.getAttribute('src'),
'" title="', this.getAttribute('title'), '"/>'].join('');
}, false);
document.getElementById('list').insertBefore(span, null);
}
else if (f.type.match('video.*')) {
var span = document.createElement('span');
span.innerHTML = ['<video class="thumb" no-controls><source src="', URL.createObjectURL(f),
'" title="', escape(f.name), '"/></video>'].join('');
span.children[0].addEventListener('click', function() {
var main=document.getElementById('main');
main.innerHTML = ['<video width="100%" controls autoplay><source src="', this.children[0].getAttribute('src'),
'" title="', this.children[0].getAttribute('title'),
'" data-gps="', this.children[0].getAttribute('data-gps'), '"/></video>'].join('');
main.children[0].children[0].setAttribute("data-gps",this.children[0].getAttribute('data-gps'));
main.children[0].addEventListener('resize',function(e){
console.log("resize: offsetHeight:" + e.target.offsetHeight);
document.getElementById('map').style.height=e.target.offsetHeight;
},false);
main.children[0].addEventListener('timeupdate',function(e){
// console.log("timeupdate: " + e.target.currentTime);
var currentTime=e.target.currentTime;
var gps=JSON.parse(e.target.children[0].getAttribute("data-gps"));
if (Object.prototype.toString.call(gps) === '[object Array]' && gps.length>1) {
var stime=gps[0].time;
for (var i=0;i<gps.length;i++){
if(gps[i].time-stime >= Math.round(currentTime)) {
console.log("stime:" + stime + " currentTime:" + currentTime +
" gps[" + i + "].time-stime:" + (gps[i].time-stime) +
" " + JSON.stringify(gps[i]));
document.getElementById('message').innerHTML=[
" [" + i + "] time: " , new Date(gps[i].time*1000).toISOString().substr(0,19).replace("T", " "),
" speed: " , Math.round(gps[i].speed*1000)/1000 ].join("");
if ( gps[i].latitude == null || gps[i].longitude == null ) {
document.getElementById('message').innerHTML="";
break;
}
var cen=new google.maps.LatLng( gps[i].latitude, gps[i].longitude );
map.setCenter( cen ) ;
centerMarker.setPosition(cen);
break;
}
}
}
},false);
main.children[0].addEventListener('ended',function(e){
var title=e.target.children[0].title;
console.log("ended: title:" + title);
var list=document.getElementById('list');
for (var i=0;i<list.children.length-1;i++){ // -1 to skip last video;
var sp=list.children[i];
if (sp.children[0].children[0].title == title) {
var event = new MouseEvent('click', {view: window,bubbles: true,cancelable: true});
list.children[i+1].children[0].dispatchEvent(event);
}
}
},false);
main.children[0].play();
}, false);
document.getElementById('list').insertBefore(span, null);
// Web Worker to extract GPS data from the file
process_file_sync(f);
if (i===0) { // open the first file
var event = new MouseEvent('click', {view: window,bubbles: true,cancelable: true});
span.children[0].dispatchEvent(event);
}
}
else {
continue;
}
}
}
var map;
var centerMarker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.70861002604167, lng: 139.61922200520834},
zoom: 15
});
centerMarker = new google.maps.Marker({
position: map.getCenter(),
icon: { path: google.maps.SymbolPath.CIRCLE, scale: 5 },
draggable: false,
map: map
});
}
window.onload = function() {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var offsetHeight=document.getElementById('main').offsetHeight;
console.log("load: offsetHeight:" + offsetHeight);
document.getElementById('map').style.height=offsetHeight;
window.addEventListener('resize',function(e){
var offsetHeight=document.getElementById('main').offsetHeight;
console.log("resize: offsetHeight:" + offsetHeight);
document.getElementById('map').style.height=offsetHeight;
},false);
};
</script>
</head>
<body>
<div>Ref: Sergei's <a href="https://sergei.nz/extracting-gps-data-from-viofo-a119-and-other-novatek-powered-cameras/">Extracting GPS data from Viofo A119 and other Novatek powered cameras</a></div>
<div id="main" style="float:left; width:calc(100% - 250px); "><video width="100%"/></div>
<div style="float:left; width:auto;height:auto;"><div id="map"></div></div>
<div style="clear:both;">
<input type="file" id="files" name="files[]" multiple /><output id="message"></output>
</div>
<div><output id="list"></output></div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment