javascript - HTML5 FileWriter 无效状态错误

Question

我正在使用 canvas 元素将多个 video 元素实时平铺在一起，效果很好。我还尝试抓取 canvas 数据并定期将其写入文件，这样当 video 元素完成时，我可以从原始帧文件中编码视频正在玩。

我有一个每隔 40 毫秒(给出 25fps)调用一次定时器间隔的函数，大致如下(有太多代码无法完整粘贴):

function saveFrame() {

  // code to copy from video elements to my canvas...
  // ...

  // Get the canvas image data and write it to a file
  var imgData = canvasContext.getImageData(0, 0,
                                           canvasElement.width,
                                           canvasElement.height);
  var b = new Blob([imgData], {type: 'application/octet-binary'});

  // Write the blob to a file I previously opened
  // fileWriter is a FileWriter that I obtained and saved previously
  fileWriter.write(b);
}

setInterval(function() {
              saveFrame();
            }, 40);

每次我点击 fileWriter.write(blob) 语句时，我都会收到以下错误:

Uncaught InvalidStateError: An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk.

这是一个时间问题吗？文件写入器 API 不能支持每 40 毫秒写入一次吗？

Answer 1

来自docs方法的写法:

If readyState is WRITING, throw an InvalidStateError and terminate this series of steps.

因此，您会收到 InvalidStateError 错误，因为您的 fileWriter 仍在写入以前的数据。

尝试使用writeend事件和setTimeout:

function saveFrame() {
    var imgData = canvasContext.getImageData(0, 0,
        canvasElement.width,
        canvasElement.height);
    var b = new Blob([imgData], {
        type: 'application/octet-binary'
    });
    fileWriter.write(b);
}

fileWriter.writeend = function () {
    setTimeout(saveFrame, 40)
}

saveFrame();