问基于HTML5的<canvas>运动跟踪

EN

我正在进行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目前不支持将视频作为画布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/

所谓“跟随物”，我指的是橙色的物品。