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浏览器，但这来自浏览器的文档：

注意：视频作为画布drawImage（）方法的源不是目前在iOS上受支持。

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

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

使用视频作为drawImage（）的源代码涉及很多系统资源。一般来说，视频最好使用视频显示元素，而不是画布元素。要合成画布文本或移动视频的动画，最好使用视频元素在画布后面 - 视频通过透明背景显示没有在画布上显示视频的开销本身。

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

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

Answer 1

可能是一个简单的决定！

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

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

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

使用<canvas> </canvas>进行HTML5运动跟踪

1 个答案: