HTML5 FileWriter InvalidStateError

Question

我使用的是一个canvas元素来实时地拼合多个video元素，这很好地工作。我也试图抓取canvas数据并定期将其写入文件，因此当video元素播放完毕后，我可以从原始帧的文件中编码视频。

我有一个叫上一个定时器的时间间隔功能每40ms（给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不能每40ms写入一次吗？

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