Webm文件不播放

Question

我创建一个mediaRecorder来记录视频/音频，并将记录的数据作为属性附加到画布上，如下所示：

    var options = { mimeType: 'video/webm;codecs=H264' };
    try {
        mediaStream = video.captureStream(); //console.log(mediaStream);
        mediaRecorder = new MediaRecorder(mediaStream, options);
        mediaRecorder.ondataavailable = function(e) { console.log('ondataavailable:'+e.data.size);
            mediaRecordedChunks.push(e.data);
            cvs.setAttribute('recordedChunks', mediaRecordedChunks);
        }; //console.log(mediaRecorder);
        mediaRecorder.onerror = function(err) { console.log('onerror:'+err.name); };
        //
        mediaRecordedChunks = [];
        mediaRecorder.start(1000); //1000 milliseconds per timeslice

    } catch(err) {
        console.log('err:'+err.name);     /* return the error name */
    };
};

然后我将读取该属性并创建一个blob/文件，如下所示：

if (localCanvas) {
    localCanvas.getContext('2d').clearRect(0, 0, localCanvas.width, localCanvas.height);
    //console.log('recordedChunks:'+localCanvas.getAttribute('recordedChunks')[0]);
    var blob = localCanvas.getAttribute('recordedChunks');
    //console.log('outBlob:'+outBlob);
    var binaryData = [];
    binaryData.push(blob);
    var url = (window.URL ? URL : webkitURL).createObjectURL(new Blob(binaryData, {type: 'video/webm;codecs=H264'}));
    var link = window.document.createElement('a');
    link.href = url;
    link.download = 'test_output.webm';
    var click = document.createEvent("Event");
    //click.initEvent('click', true, true);
    //link.dispatchEvent(click);
    link.click();
    window.URL.revokeObjectURL(url);
    link.remove();
    console.log('downloaded');
};

这将清除画布并将文件下载到我的机器上。但文件不起作用。我试过不同类型的哑剧，但都没用。我的最终目标是拥有一个可播放的视频/音频文件(理想情况下，是一个.mp4文件，但我知道Chrome不会这么做)。

Answer 1

我完全不清楚你为什么要这么做，但HTMLAttributes只能是字符串，没有其他东西。

因此，当您执行cvs.setAttribute('recordedChunks', mediaRecordedChunks);时，实际上是在执行cvs.setAttribute('recordedChunks', mediaRecordedChunks.toString());，而且由于mediaRecordedChunks此时只包含一个Blob对象，因此它将生成字符串"[object Blob]"。

​

const mediaRecordedChunks = [ new Blob([]) ];
const cvs = document.createElement( "canvas" );
cvs.setAttribute( "recordedChunks", mediaRecordedChunks );
console.log( cvs.getAttribute( "recordedChunks" ) );

​

这就是您在文件中保存的内容(您可以尝试在文本编辑器中打开它)。

从这个字符串中，您将无法执行与原始块记录有关的任何操作。

最好的方法是使保存的代码能够直接访问mediaRecordedChunks数组，无论是通过限定作用域，还是将其作为参数传递给保存部分的函数。

// refactor your saving code to be a function
const saveMedia = ( chunks ) => {
    const blob = new Blob( chunks );
    //...
};

然后当您想要保存时，从声明mediaRecordedChunks的部分调用它。

saveMedia( mediaRecordedChunks );

如果您绝对想使用一个属性，那么无论多么糟糕，它可能是，那么从您的记录器部件中创建blobURI，并将其存储为画布属性，不过请记住在每个新的dataavailable事件中撤销前一个属性。

//...
mediaRecorder.ondataavailable = function(e) {
  mediaRecordedChunks.push( e.data );
  const oldURL = cvs.getAttribute( 'recordedChunks' );
  URL.revokeObjectURL( oldURL );
  const newURL = URL.createObjectURL( mediaRecordedChunks );
  cvs.setAttribute( 'recordedChunks', newURL );
};
//...

在你的储蓄码里，

if( localCanvas ) {
  const url = localCanvas.getAttribute( 'recordedChunks' );
  const link = window.document.createElement( 'a' );
  link.href = url;
  link.download = 'test_output.webm';
  document.body.append( link );
  link.click();
  link.remove();
}