Javascript DOMException: связанный трек находится в недопустимом состоянии

Question

Я пытаюсь создать веб-приложение для захвата фотографий на сервере nodeJS и использую приведенный ниже код javascript.

const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
 navigator.mediaDevices.getUserMedia({video: true})
  .then(gotMedia)
  .catch(error => console.error('getUserMedia() error:', error));

  event.preventDefault()
})

И Функция gotMedia такова:

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(mediaStreamTrack);
    console.log(imageCapture);

    const canvas = document.querySelector('canvas');
    // ...
    imageCapture.grabFrame()
    .then(imageBitmap => {
        canvas.width = imageBitmap.width;
        canvas.height = imageBitmap.height;
        canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    })
    .catch(error => console.error('grabFrame() error:', error));
}

Все отлично работает, захват изображения в порядке, но возникает ошибка, когда я быстро снимаю фотографии один за другим, что говорит:

Ошибка grabFrame (): DOMException: связанный трек находится в недопустимом состоянии.

Это обычно происходит, когда я снимаю слишком много фотографий (например, быстрое нажатие в течение более 20 секунд), но также имеет произошло на первых пяти снимках. Кто-нибудь знает, что происходит и что я должен изменить, чтобы это исправить? Спасибо за ваше время.

Answer 1

Я столкнулся с той же проблемой и не смог заставить надежную работу функции grabFrame.

Вместо этого вы можете рисовать из промежуточного источника видео. В вашей функции это выглядело бы примерно так (не проверено):

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const canvas = document.querySelector('canvas');
    const video = document.createElement('video');

    video.autoplay = true;
    video.srcObject = mediaStream;
    video.onplay = () => {
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         canvas.getContext('2d').drawImage(video, 0, 0);
    };
}

Конечно, если вы собираетесь снимать много кадров, было бы лучше создать одно видео рядом с ним. поток и захватить от этого каждый раз.

Answer 2

Согласно spe c такая ошибка может быть результатом недопустимого состояния. В источниках хрома я нашел этот метод .

Я преодолел ошибку, используя такой код:

  const promise = getPrevImagePromise();

  if (!promise && !(imageCapture.track.readyState != 'live' || !imageCapture.track.enabled || imageCapture.track.muted)) {
    const imagePromise = imageCapture.grabFrame()
      .then((image) => {
        // do work with image
      })
      .then(() => {
        deletePrevImagePromise()
      })
      .catch((error) => {
        // 
      });

    setPrevImagePromise(imagePromise);
  }