HTML5 FileWriter InvalidStateError

Question

video 요소를 동시에 타일링하는 데 canvas 요소를 사용하고 있는데 제대로 작동합니다. 또한 canvas 데이터를 잡고 파일에 주기적으로 기록하려고하므로 video 요소 재생이 끝나면 원시 프레임 파일에서 비디오를 인코딩 할 수 있습니다.

나는 타이머 간격라는 함수를 가지고 모든은 40ms (초당 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) 성명 다음 오류가 발생합니다.

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마다 쓰기를 지원할 수 있습니까? 방법 쓰기의 docs에서

Answer 1

: 당신의 fileWriter 여전히 이전의 데이터를 기록하기 때문에

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

그래서 당신은 InvalidStateError 오류가 발생합니다.

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