Холст веб-камеры мигает во время прогнозов (javascript)

Question

Я рисую поток своей веб-камеры на холсте. Я наложу ограничивающий прямоугольник прогнозирования на этот холст в каждом кадре. Перед началом предсказания поток холста является префектом, но как только начинается предсказание, холст начинает мигать; Я имею в виду, что весь холст обнаруживается и исчезает, появляется и исчезает очень быстро. У тебя есть идеи, как я могу сделать это правильно? Большое спасибо.

моя функция прогнозирования выглядит так:

let isPredicting = false;

async function predict() {
  ui.isPredicting();
  while (isPredicting) {
    // Capture the frame from the webcam.

    let video = document.getElementById('predwebcam');
    let width=224,
    height=224,
    frameRate=10;
    navigator.mediaDevices.getUserMedia({
      video: {
        width: width,
        height:height,
          frameRate:frameRate
        }
      }
    ).then(function(stream) {
      video.srcObject = stream;
      video.onloadedmetadata = function(e) {
        video.play();
        video.addEventListener('play', function() {

        }, false);
      };
    }).catch(function(err) {
      console.log('failed to load webcam')
    });

    var canvas = document.getElementById('predcanvas');
    canvas.width  = 500;
    canvas.height = 500;

    var context = canvas.getContext('2d');

    /*
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
     */
    // video 'play' event listener
    video.addEventListener('play', function() {
      //context.drawImage(this, 0, 0, canvas.width, canvas.height);
      //draw(video, canvas, context, frameRate);
    }, false);

    function draw(video, canvas, context, frameRate) {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      setTimeout(draw, 1/frameRate, video, canvas, context, frameRate);
    }
    //draw(video, canvas, context, frameRate);

    const img = await getImage();
    // Make a prediction through mobilenet, getting the internal activation of
    // the mobilenet model, i.e., "embeddings" of the input images.
    //const embeddings = truncatedMobileNet.predict(img);
    console.log('starting to predict')
    // Make a prediction through our newly-trained model using the embeddings
    // from mobilenet as input.
    const predictions = model.predict(img);
    const values = predictions.dataSync();
    const arr = Array.from(values);
    console.log(arr)
    let u = document.getElementById("1label").value;
    dict.add(classindex1, u);
    if (arr[0]>= 0){
      arr[0]=1;
    }
    var Id = arr[0];
    let ClassID = dict.findAt(Id);
    //console.log(ClassID)
    let startX = arr[1];
    let startY = arr[2];
    let w = arr[3];
    let h = arr[4];
    // Draw the bounding box.
    context.strokeStyle = 'red';
    //context.shadowColor = '#d53';
    //context.shadowBlur = 20;
    context.lineJoin = 'bevel';
    context.lineWidth = 10;
    context.strokeStyle = '#38f';
    context.strokeRect(startX, startY, w, h);
    // Draw the label background.
    const font = "24px helvetica";
    context.font = font;
    context.textBaseline = "top";
    context.fillStyle = "#2fff00";
    const textWidth = context.measureText(ClassID).width;
    const textHeight = parseInt(font, 10);
    // draw top left rectangle
    context.fillRect(startX, startY, textWidth + 10, textHeight + 10);
    // draw bottom left rectangle
    //context.fillRect(startX, startY + h - textHeight, textWidth + 15, textHeight + 10);

    // Draw the text last to ensure it's on top.
    context.fillStyle = "#000000";
    context.fillText(ClassID, startX, startY);
    //context.fillText(prediction.score.toFixed(2), startX, startY + h - textHeight);
    // Returns the index with the maximum probability. This number corresponds
    // to the class the model thinks is the most probable given the input.
    //const predictedClass = predictions.as1D().argMax();
    //const classId = (await predictedClass.data())[0];
    img.dispose();


    //ui.predictClass(metaClasses[classId]);
    await tf.nextFrame();
  }
  ui.donePredicting();
}