Javascript DOMException : The associated Track is in an invalid state

Question

我正在尝试在 nodeJS 服务器上创建照片捕获 Web 应用程序，并且我正在使用下面的 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() error: DOMException: The associated Track is in an invalid state.

这通常发生在我拍摄太多照片时(例如快速单击大约 20 秒以上)，但前五张快照也发生了这种情况。有谁知道发生了什么，我应该改变什么，以解决这个问题？感谢您的时间。

Answer 1

根据spec这种错误可能是 Not Acceptable 状态的结果。在 Chrome 来源中，我发现了 this method .

我已经使用这样的代码克服了错误:

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