Canvas2D的Multiple readback警告是否导致OpenCV.js视频丢帧？

我用OpenCV.js捕获HTML <video>元素的视频帧，转灰度后存储。用cv.imshow("greyVideo", matGry);在canvas显示灰度视频看似正常，但存储的帧数组长度只有约230，远低于预期的320（视频时长32秒，设定帧率10FPS）。观察到canvas上的灰度视频比原视频播放更快，存在跳帧。调整FPS参数问题依旧，只有FPS=1时帧数量达标，但会丢失大量信息。

控制台出现关于captur.read(matClr);的警告：

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

我怀疑这个警告是丢帧原因，但OpenCV.js的cv.VideoCapture对象没有setAttribute方法，无法设置willReadFrequently为true。即使删除canvas显示代码，警告和丢帧问题仍然存在。请问这个警告是否导致丢帧？还有其他解决办法吗？

代码示例 #

JavaScript代码 #

//Variables for canvas
var matClr;
var matGry;
var captur;

// Variable for storing frames
var framesGry = [];

//Variables for working 
var streamingOn = false;
const FPS = 10;
var compteur = 1;

async function demarrerTraitement(){
    let afficheur = document.getElementById("ntm"); 
    console.log("demarrage traitement")
    //Initializing matrix and capture object;
    const hauteur = afficheur.height;
    const largeur = afficheur.width;
    streamingOn = true;

    matClr = new cv.Mat(hauteur, largeur, cv.CV_8UC4);
    matGry = new cv.Mat(hauteur, largeur, cv.CV_8UC1);
    captur = await new cv.VideoCapture(afficheur);    
    traitement();
}

function arretTraitement(){
    console.trace("arretTraitement : vidéo terminée");
    streamingOn = false;    
}


function traitement(){
    if(streamingOn == false){
        console.warn("detectContourVideo - sortie : traitement fini. %o frames traitées.", compteur);
        compteur = 1;
    }

    else{
        const length = 480 * 480;
        frameVide = Array(length).fill(0).toString();
        // Reading capture object into matClr
        captur.read(matClr);
        // Applying filter
        cv.cvtColor(matClr, matGry, cv.COLOR_RGBA2GRAY);
        // updating canva of grey "video"
        cv.imshow("greyVideo", matGry);
        // Extracting pixels data
        let frame = matGry.data.slice(); // Slice is essential or I copy a reference
 
        framesGry.push(frame);
        compteur = compteur + 1;

        setTimeout(traitement, 1000/FPS); // Supposed to call the function each new frame
    }
}

HTML代码 #

<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>handwashing</title>
        <!-- JS -->
            <!-- API -->
            <script src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>
            <script src="./javascript/traitement.js"></script>
    </head>
    <body>
        <main>
            <video src="" id = "ntm" width="480" height="480" controls src="demo.webm" ></video>
            <canvas id="greyVideo"></canvas>
        </main>
    </body>
</html>

警告与丢帧的关系 #

这个警告不会直接导致丢帧，它只是性能优化提示：频繁调用getImageData时设置willReadFrequently能提升读取速度，但不设置只会让读取变慢，不会主动跳过帧。你的丢帧问题核心是用setTimeout控制帧率的方式不可靠——setTimeout的执行时机受主线程任务队列影响，无法精准对齐视频的实际帧更新节奏，导致部分帧被跳过。

具体解决办法 #

1. 改用requestAnimationFrame同步视频节奏 #

requestAnimationFrame会与浏览器的刷新周期同步，能更精准地捕获视频帧。如果需要严格控制10FPS，可以加入时间间隔判断：

let lastCaptureTime = 0; // 记录上次捕获帧的时间

function traitement(timestamp){
    if(!streamingOn){
        console.warn("detectContourVideo - sortie : traitement fini. %o frames traitées.", compteur);
        compteur = 1;
        return;
    }

    // 确保每100ms捕获一次（对应10FPS）
    if(timestamp - lastCaptureTime >= 1000/FPS){
        lastCaptureTime = timestamp;
        
        // 读取并处理帧
        captur.read(matClr);
        cv.cvtColor(matClr, matGry, cv.COLOR_RGBA2GRAY);
        cv.imshow("greyVideo", matGry);
        let frame = matGry.data.slice();
        framesGry.push(frame);
        compteur++;
    }

    requestAnimationFrame(traitement);
}

2. 消除willReadFrequently警告 #

OpenCV.js的VideoCapture内部会创建隐藏canvas，但你无法直接修改它的属性。可以手动创建带willReadFrequently的canvas，自己实现帧读取逻辑，替代cv.VideoCapture：

// 在demarrerTraitement中替换原有的VideoCapture初始化
async function demarrerTraitement(){
    let afficheur = document.getElementById("ntm"); 
    console.log("demarrage traitement")
    const hauteur = afficheur.height;
    const largeur = afficheur.width;
    streamingOn = true;

    matClr = new cv.Mat(hauteur, largeur, cv.CV_8UC4);
    matGry = new cv.Mat(hauteur, largeur, cv.CV_8UC1);

    // 手动创建带willReadFrequently的canvas
    const captureCanvas = document.createElement('canvas');
    captureCanvas.width = largeur;
    captureCanvas.height = hauteur;
    const ctx = captureCanvas.getContext('2d', { willReadFrequently: true });

    // 自定义读取帧函数
    window.readFrame = function(){
        ctx.drawImage(afficheur, 0, 0, largeur, hauteur);
        const imageData = ctx.getImageData(0, 0, largeur, hauteur);
        matClr.data.set(new Uint8Array(imageData.data.buffer));
        return true;
    };

    // 监听视频结束事件
    afficheur.addEventListener('ended', arretTraitement);
    traitement();
}

// 修改traitement中的读取逻辑
function traitement(timestamp){
    if(!streamingOn){
        console.warn("detectContourVideo - sortie : traitement fini. %o frames traitées.", compteur);
        compteur = 1;
        return;
    }

    if(timestamp - lastCaptureTime >= 1000/FPS){
        lastCaptureTime = timestamp;
        
        // 用自定义函数读取帧
        readFrame();
        cv.cvtColor(matClr, matGry, cv.COLOR_RGBA2GRAY);
        cv.imshow("greyVideo", matGry);
        let frame = matGry.data.slice();
        framesGry.push(frame);
        compteur++;
    }

    requestAnimationFrame(traitement);
}

3. 监听视频结束事件确保完整捕获 #

给video元素添加ended事件监听，避免视频结束后仍继续无效捕获：

// 在demarrerTraitement中添加
afficheur.addEventListener('ended', arretTraitement);

额外优化建议 #

• 移除traitement中未使用的frameVide变量，减少不必要的内存开销；
• 如果存储的帧仅用于后续处理，可考虑直接操作matGry.data的视图（如new Uint8Array(matGry.data.buffer)），避免slice()复制整个数组；
• 若视频分辨率较高，可在捕获时缩小尺寸，降低处理和存储压力。

内容的提问来源于stack exchange，提问作者Tsu'Na