CODEWITHSUNDEEP
javascriptjqueryhtml5-video
tuscan88
tuscan88

Reputation: 5829

best way to sync data with html5 video

I am building an application that takes data from an android app and replays it in a browser. The android app basically allows the user to record a video and while it is recording it logs data every 100ms such as gps position, speed and accelerometer readings to a database. So i want the user to be able to play the video back in their browser and have charts, google map etc show a realtime representation of the data synced to the video. I have already achieved this functionality but it's far from perfect and I can't help thinking there must be a better way. What I am doing at the moment is getting all of the data from the database ordered by datetime ascending and outputting it as a json encoded array. Here is the process I am doing in pseudo code:

Here is my code:

var points = <?php echo json_encode($gps); ?>;
var start_time = <?php echo $gps[0]->milli; ?>;
var current_time = start_time;

$(document).ready(function() 
{

    top_speed = 240;
    min_angle = -210;
    max_angle = 30;
    total_angle = 0 - ((0-max_angle)+min_angle);
    multiplier = top_speed / total_angle;

    speed_i=0;

    video.addEventListener('timeupdate', function() {
        current_time = start_time + parseInt((video.currentTime * 1000).toFixed(0));

        while(typeof points[speed_i] !== 'undefined' && current_time > points[speed_i].milli) 
        {
            newpos = new google.maps.LatLng(points[speed_i].latitude, points[speed_i].longitude);

            marker.setPosition(newpos);
            map.setCenter(newpos);

            angle = min_angle + (points[speed_i].speed * multiplier);

            $("#needle").rotate({
                animateTo : angle,
                center: [13,11],
                duration: 100
            });

            speed_i++;
        }
    }
});

Here are the issues I seem to have encountered: - Have to load thousands of rows into json array which can't be very good for permorance - Have to do while loop on every video call back - again can't be very good for performance - Playback is always a bit behind

Can anyone think of any ways this can be improved or a better way completely to do it?

Upvotes: 1

Views: 1343

Answers (1)

brianchirls
brianchirls

Reputation: 7853

There are a few reasons why this may be running slowly. First, the timeupdate event only runs about every 250ms. So, if you're going to refresh at that rate, dandavis is right and you don't need that much data. But if you want animation that's that smooth, I suggest using requestAnimationFrame to update every 16ms or so.

As it is, if you update every 250ms, you're cycling through 2 or 3 data points and updating the map and needle three times in a row, which is unnecessary.

I recommend looking into Popcorn.js, which is built exactly for this kind of thing and will take care of this for you. It will also handle seeking or playing backwards. You'll want to pre-process the data so each point has a start time and an end time in the video.

There are also some things you can do to make the data transfer more efficient. Take out any extra properties that you don't need on every point. You can store each data point as an array, so the property names don't have to be included in your JSON blob, and then you can clean that up with a few lines of JS code on the client side.

Finally, separate your data file from your script. Save it as a static JSON file (maybe even gzipped if your server configuration can handle it) and fetch it with XMLHttpRequest. That way, you can at least display the page sooner while waiting for the code to download. Better yet, look into using a JSON streaming tool like Oboe.js to start displaying data points even before the whole file is loaded.

Upvotes: 2

Related Questions