2017-09-08 38 views
0

PAUSE 기능을 가진 StreamMediaRecorder JS API를 사용하는 비디오 레코더 응용 프로그램이 있습니다. 사용자가 녹음을 일시 정지 할 때마다 새로운 BLOB 슬라이스를 저장해야하며 큰 BLOB 파일을 끝에 저장해야합니다.StreamMediaRecorder - 저장된 모든 부품으로 BLOB 파일을 만들고 재생합니다.

let chunks = []; 
let player = document.getElementById('player'); 

recorder.ondataavailable = (event) => chunks.push(event.data); 
recoder.onstop = (event) => { 

    var blob = new Blob([chunks], { type: 'octet/stream' }); 
    player.src = URL.createObjectURL(blob); 
} 

그러나 모든 blob 파일이 저장되는 것은 전체 파일이 아닌 마지막 파일을 재생하는 것입니다. blob 변수를 만든 후에는 크기가 모든 blob 청크의 합계와 같지만 재생할 때 마지막 부분 만 재생됩니다.

누구나 해결 방법을 알고 계십니까? 모두에게 감사하십시오!

+0

기능적인 예를 포함하여 생산할 수 있습니까? 중지? 지금 표시된 코드 조각은별로주지 않지만 참조 문제 일 수 있습니다. – K3N

+1

가능한 여러 개의 webm blob/clip을 하나의 순차 비디오 클라이언트에 병합 할 수 있습니까? (https://stackoverflow.com/questions/44687026/is-it-possible-to-merge-multiple-webm-blobs) -clips-into-one-sequential-video-clie) – Kaiido

+1

기본적으로, 그처럼 여러 레코드를 병합 할 수는 없지만, ** MediaRecorder API는 필요한만큼 소리가 나는'pause' 메서드를 가지고 있습니다 . 조금 덜 관련되어 있지만 관심이있을 수도 있습니다. https://stackoverflow.com/questions/45217962/how-to-use-blob-url-mediasource-or-other-methods-to-play-concatenated-blobs- 의 – Kaiido

답변

0

MediaRecorder을 사용하여 녹음 된 미디어 리소스의 녹음을 연결하는 것은 쉬운 일이 아닙니다. @Kaiido에 의해 게시

링크는 .pause()MediaRecorder().resume(), AudioContext()HTMLCanvasElement.captureStream()를 사용하여 솔루션을 제공한다.

ts-ebml을 사용하여 MediaRecorder을 사용하여 만든 미디어 파일의 메타 데이터를 설정할 수 있습니다.

https://github.com/guest271314/recordMediaFragments/blob/master/demos/recordMediaFragments.html를 참조 OP에 설명 된 요구 사항을 달성하기 위해 브라우저에서 사용하기 위해 자바 스크립트로 포팅 ts-ebmlMediaRecorderMediaSource을 사용하는 것이 가능하다.

전체 공개, 저자는 https://github.com/guest271314/recordMediaFragments입니다.