时间戳

首页 > 解决方案 > 如何提高浏览器中实时视频处理的性能？

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

问题描述

我使用 P5.js 从网络摄像头捕获视频。在负责重绘画布的绘制函数中，我将一个新捕获的帧添加到帧数组并计算结果帧，在那个时间点使用这个像素立方体（帧数组）及其 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();
}

在我的 MacBook Pro 上，当立方体框架的分辨率为 240x180x240 时，它运行良好。当您增加框架的分辨率时，它开始冻结，在较弱的计算机上，网站崩溃（即使在小分辨率下），在手机上，如果它开始工作，它不会工作超过三秒钟。

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

为此，我尝试使用 webgl，但我对这项技术非常陌生。我尝试使用纹理来存储帧，但事实证明纹理数据太多。我也尝试使用 p5 中的 webgl 函数，但我只设法改变了渲染方式，但没有提高帧计算的性能（我觉得问题在这里）。

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

标签： javascriptperformancehtml5-videovideo-processingvideo-capture

解决方案

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

推荐阅读