3

我正在研究 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 浏览器，但这是来自浏览器的文档：

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

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

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

使用视频作为 drawImage() 的源涉及大量系统资源。一般来说，视频最好使用 video 元素显示，而不是 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/

“跟随对象”是指橙色项目。

4

1 回答 1

3

可能是一个简单的决定！

这是一个正确的工作工具的例子：视频标签用于视频和画布标签用于绘图。

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

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

于 2013-04-24T17:26:28.733 回答