3

我正在尝试在 JavaScript 中使用每个通道的网络摄像头延迟，而我当前的代码运行速度有点慢。你可以在这里看到一个演示

我的延迟方法是创建一个包含 12 个元素的数组来存储像素（画布元素），然后通过复制像素（使用 getImageData 和 putImageData 调用）将内容从一帧转移到另一帧。由于我正在拆分颜色通道，因此我的更新函数如下所示：

function update() {
    if (localMediaStream) {
        // Update history
        for (var i = hs - 1; i > 0; i--) {
            var ctxCurr = history[i].getContext('2d');
            var ctxPrev = history[i - 1].getContext('2d');
            try {
                ctxCurr.putImageData(ctxPrev.getImageData(0, 0, w, h), 0, 0);
            } catch (err) {
                console.log(err);
            }
        }
        // Write the most recent webcam frame
        var ctx0 = history[0].getContext('2d');
        ctx0.drawImage(video, 0, 0, w, h);
        // Get pixel data for most recent,halfway and last frames in history
        var r = history[0].getContext('2d').getImageData(0, 0, w, h).data;
        var g = history[hs / 2].getContext('2d').getImageData(0, 0, w, h).data;
        var b = history[hs - 1].getContext('2d').getImageData(0, 0, w, h).data;
        // Get a frame and it's pixels
        var imageData = ctx0.getImageData(0, 0, w, h);
        var data = imageData.data;
        // Write the r,g,b channels using the offset frames for green and blue channels
        for (var i = 0; i < data.length; i += 4) {
            data[i] = r[i];
            data[i + 1] = g[i + 1];
            data[i + 2] = b[i + 2];
        }

        rgb.putImageData(imageData, 0, 0);
    }
}

我想我可以跳过使用红色通道，因为最近的帧已经有该信息。是否有更快的方法来操作/写入像素数据（除了getImageData()and putImageData()）或更快的方法来实现我想要实现的目标？

4

2 回答 2

3

看起来有几种方法可以加快您尝试做的事情。getImageData 非常慢，而 putImageData 慢得令人沮丧，因此消除这些调用将始终为您服务。忘记红色通道是对的。我也会摆脱这条线：

var r = history[0].getContext('2d').getImageData(0, 0, w, h).data;

此外，您应该能够将画布绘制到适当的上下文中，只要您清除上下文即可。我相信您的尝试语句应该如下所示：

try {
    ctxCurr.clearRect(0, 0, w, h);
    ctxCurr.drawImage(history[i-1], 0, 0);
}

删除所有对 putImageData 的冗余调用应该会有很大帮助。

于 2014-01-13T00:27:12.193 回答
0

要手动编码，我认为 put 和 getImageData 是通过画布完成它的唯一方法。你可以使用一个 javascript 库。也许你可以操纵源头。我尝试了演示，它似乎比你的更流畅（尽管我喜欢你的幻彩色彩效果）。你可以在这里找到图书馆。

于 2014-01-13T00:08:07.957 回答