Question

我使用P5.js从网络摄像头捕获视频。在负责重新绘制画布的绘制函数中，我在该时间点使用此像素立方体（帧数组）及其3D slice函数在帧数组中添加了一个新捕获的帧，并计算出最终的帧。

sketch.draw = () => {

    sketch.loadPixels();

    this.capture.loadPixels();

    this.stack.push(this.capture.pixels);

    const pixelsStack = this.stack.array;

    for (let x = 0; x < this.w; x++) {
        for (let y = 0; y < this.h; y++) {
            const frameN = this.getFrameN(x, y, pixelsStack.length);
            set(
                sketch.pixels,
                this.w,
                4, x, y,
                this.getPixel(pixelsStack, x, y, frameN)
            )
        }
    }

    sketch.updatePixels();
}

在我的MacBook Pro上，当立方体框架的分辨率为240x180x240时，它可以很好地工作。当您增加框架的分辨率时，它开始冻结，在性能较弱的计算机上，该站点崩溃了（即使分辨率很小），在电话上，如果完全开始工作，则无法工作超过三秒钟。

我以为瓶颈是p5.js，但后来我决定使用requestAnimationFrame编写更新循环，并将结果图像输出到我创建的画布上，但这只会使我的应用程序速度降低5倍以上。

我曾尝试使用webgl来实现此目的，但是我对这种技术并不熟悉。我尝试使用纹理存储框架，但事实证明，纹理数据太多。我也尝试过使用p5中的webgl函数，但是我只设法改变了渲染方式，而没有提高帧计算的性能（这对我来说似乎是个问题）。

如何以及采用哪些技术来提高帧计算速度？

Answer 1

如果您尝试通过网络摄像头捕获视频，则可以使用MediaRecorder API和getUserMedia。不需要p5或WebGL。这是一篇文章，展示了如何使用它们来设置简单的录像机：https://dev.to/twilio/an-introduction-to-the-mediarecorder-api-2k8i

如何提高浏览器中实时视频处理的性能？

1 个答案: