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');
};

这会清除画布并将文件下载到我的机器上。但是文件不会播放。我尝试了不同的 mime 类型，但没有任何效果。我的最终目标是拥有一个可播放的视频/音频文件（最好是 .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();
}