javascript - HTML5 FileWriter InvalidStateError

我正在使用canvas元素将多个video元素实时平铺在一起，效果很好。我还试图获取canvas数据并定期将其写入文件，以便在video元素播放完毕后，可以从原始帧的文件中编码视频。

我有一个每40毫秒（给出25帧/秒）的计时器间隔调用的函数，该函数大致如下所示（有太多代码无法完整粘贴）：

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)语句时，都会出现以下错误：


  未捕获的InvalidStateError：取决于缓存状态的操作
  在接口对象中，但是状态已经改变了
  从磁盘读取。


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

最佳答案

从方法的docs中写道：


  如果readyState为WRITING，则抛出InvalidStateError并终止
  这一系列步骤。


由于您的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();