使用<canvas>实现HTML5动态跟踪

Question

我正在研究HTML5运动跟踪，目前我正在使用绘图上下文的方法drawImage来捕获当前帧并在其上添加“tracker”对象。

你可以在这里看到示例代码：

ctx.drawImage(video, 0, 0);

    var cat = new Image();
    cat.src = 'cat.png';
    cat.onload = function() {
        ctx.drawImage(cat, 150, 190);
    }

但我的解决方案也应该支持Safari iOS浏览器，但这是来自浏览器文档的内容：

注意：目前iOS不支持将视频作为canvas drawImage()方法的源。

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

他们提出了以下解决方案：

使用视频作为drawImage()函数的源需要大量系统资源。一般来说，最好使用video元素而不是canvas元素来显示视频。如果要在移动的视频上叠加canvas文本或动画，则最好在canvas后面使用video元素 - 视频通过canvas的透明背景显示，而无需在canvas上显示视频。

所跟随的对象的坐标来自JSON文件（我有每个帧的信息），这里是一个帧的JSON内容：

"frames": {
    "0": [{
        "i": 0,
        "x": 686.356,
        "y": 192.797
    },
    {
        "i": 2,
        "x": 1036.4,
        "y": 194.135
    },
    {
        "i": 3,
        "x": 566,
        "y": 113.5
    },
    {
        "i": 4,
        "x": 357,
        "y": 98
    }],

我在这里跟随4个对象。

所以我在想，什么方法会更好？是捕捉每一帧并在画布上添加以下对象，还是使用透明画布并仅绘制以下对象。

如果我的解释不清楚，您可以查看以下视频：http://codeazur.com.br/stuff/motiontracking/

“以下对象”指的是橙色物品。

- Kristian Vitozev

---

嗨 Kav，我正在努力做这个，如果你找到了解决方案，能否提供源代码给我？谢谢。 - The Dead Man

Answer 1

这可能是一个简单的决定！

这是选择正确工具来完成工作的情况：使用视频标签播放视频，使用画布标签绘制图形。

由于您有每个帧的json坐标，可以在背景中播放视频，并将橙色跟踪器放在位于视频正上方的画布上。

您可以使用视频指标来同步跟踪绘图和帧。 我假设您已经解决了此解决方案的一部分，但这里还是提供了有关视频指标的参考：http://wiki.whatwg.org/wiki/Video_Metrics

- markE