javascript - 使用 <canvas> 的 HTML5 运动跟踪

Question

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

您可以在此处查看示例代码:

ctx.drawImage(video, 0, 0);

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

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

Note: Video as a source for the canvas drawImage() method is not currently supported on iOS.

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

因此他们提出了以下解决方案:

Using video as a source for drawImage() involves a lot of system resources. Generally speaking, video is best displayed using the video element, not the canvas element. To composite canvas text or animations over moving video, it’s better to use a video element behind the canvas—the video shows through the transparent background of the canvas without the overhead of displaying video on the canvas itself.

跟随对象的坐标来自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个对象)

所以我在想，什么是更好的方法？捕获每一帧并在 Canvas 上添加以下对象，或使用透明 Canvas 并仅绘制以下对象。

如果我的解释不好，你可以看看下面的视频:http://codeazur.com.br/stuff/motiontracking/

我所说的“跟随对象”是指橙色项目。

Answer 1

可能是一个简单的决定!

这是一个适合工作的工具案例:video 标签用于视频，canvas 标签用于绘图。

由于每个帧都有 json 坐标，因此在后台播放视频并将橙色跟踪器放在视频正上方的 Canvas 上。

您可以使用视频指标将帧与跟踪绘图同步。我假设您已经有了这部分解决方案，但无论如何这里都是对视频指标的引用:http://wiki.whatwg.org/wiki/Video_Metrics