Javascript HTML5运动跟踪使用<；帆布>；

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

注意：不支持将视频作为canvas drawImage（）方法的源 当前在iOS上受支持

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

使用视频作为drawImage（）的源涉及许多系统问题 资源。一般来说，最好使用视频来显示视频 元素，而不是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个对象）

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

如果我的解释不好，您可以查看以下视频：

---

我所说的“跟随物体”是指橙色的物品。

可能是一个简单的决定

这是一个适合工作的工具：视频标签用于视频，画布标签用于绘图

因为每个帧都有json坐标，所以在背景中播放视频，并将橙色跟踪器放在视频正上方的画布上

---

可以使用视频度量将帧与跟踪图形同步。我假设您已经有了解决方案的这一部分，但这里还是有关于视频度量的参考：

嗨，Kav，我正在努力做到这一点，如果您找到了解决方案，您能提供这方面的源代码吗，谢谢