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

我使用P5.js从网络摄像头捕获视频。在负责重新绘制画布的draw函数中，我将新捕获的帧添加到帧数组中，并在该时间点使用此像素立方体（帧数组）及其3D切片函数计算生成的帧

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();
}

sketch.draw=（）=>{
sketch.loadPixels（）；
this.capture.loadPixels（）；
this.stack.push（this.capture.pixels）；
const pixelsStack=this.stack.array；
for（设x=0；x

在我的MacBook Pro上，当立方体框架的分辨率为240x180x240时，它工作得很好。当你提高帧的分辨率时，它开始冻结，在较弱的计算机上，站点崩溃（即使分辨率很小），在手机上，如果它开始工作，它的工作时间超过三秒

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

我尝试使用webgl来实现这个目的，但我对这项技术非常不熟悉。我尝试使用纹理来存储帧，但结果是纹理的数据太多了。我还尝试使用p5中的webgl函数，但我只设法改变了渲染方式，但没有提高帧计算的性能（在我看来，这个问题似乎存在）

---

如何以及使用什么技术可以提高帧计算速度？

如果您试图通过网络摄像头捕获视频，您可以使用

MediaRecorder

API以及

getUserMedia

。不需要p5或WebGL。下面是一篇文章，介绍如何使用这些设置简单的录像机：