Question

我正在构建一个从Android应用程序获取数据并在浏览器中重放它的应用程序。 Android应用程序基本上允许用户录制视频，并在录制时记录每100毫秒记录数据，如gps位置，速度和加速计读数到数据库。所以我希望用户能够在他们的浏览器中播放视频并拥有图表，谷歌地图等显示同步到视频的数据的实时表示。我已经实现了这个功能，但它远非完美，我不禁想到必须有更好的方法。我现在正在做的是从datetime按顺序获取数据库中的所有数据，并将其作为json编码数组输出。这是我在伪代码中所做的过程：

使用视频事件监听器查找视频的当前日期时间
从数据数组中的当前项执行while循环
对于每次迭代，检查该行的日期时间是否小于视频中的当前日期时间
如果是，则从数据
增加数组键

这是我的代码：

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++;
        }
    }
});

以下是我遇到的问题： - 必须将数千行加载到json数组中，这对于permorance来说不是很好 - 必须在每次视频回叫中进行while循环 - 再次对性能不是很好 - 播放总是有点落后

任何人都可以想到任何可以改进的方法或完全更好的方法吗？

Answer 1

有几个原因导致这种情况可能会缓慢进行。首先，timeupdate事件大约每250毫秒运行一次。所以，如果你要按照这个速度刷新，那么dandavis是正确的，你不需要那么多的数据。但是如果你想要那么流畅的动画，我建议使用requestAnimationFrame每16ms更新一次。

实际上，如果你每250ms更新一次，你就会循环使用2或3个数据点并连续三次更新地图和指针，这是不必要的。

我建议您查看Popcorn.js，它是专门针对此类内容构建的，并会为您处理此问题。它还将处理搜索或向后播放。您需要预处理数据，以便每个点在视频中都有开始时间和结束时间。

您还可以采取一些措施来提高数据传输效率。取出您在每个点上不需要的任何额外属性。您可以将每个数据点存储为数组，因此属性名称不必包含在JSON blob中，然后您可以在客户端使用几行JS代码清理它。

最后，将您的数据文件与脚本分开。将其另存为静态JSON文件（如果您的服务器配置可以处理它，甚至可以进行gzip压缩）并使用XMLHttpRequest获取它。这样，您可以在等待代码下载时至少更快地显示页面。更好的是，考虑使用像Oboe.js这样的JSON流工具，甚至可以在加载整个文件之前开始显示数据点。

与html5视频同步数据的最佳方式

1 个答案: