Javascript Webm文件未播放

我创建了一个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 */
    };
};

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

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

    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 */
    };
};

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不会这么做）。

我完全不清楚为什么要这样做，但HtmlatAttribute只能是字符串，其他什么都不能

因此，当您执行

cvs.setAttribute（'recordedChunks'，mediaRecordedChunks）时

您实际上正在执行

cvs.setAttribute（'recordedChunks'，mediaRecordedChunks.toString（）），并且由于此时
mediaRecordedChunks
仅包含Blob对象，因此它将生成字符串
“[object Blob]”
：


const mediaRecordedChunks=[new Blob（[]）；
const cvs=document.createElement（“画布”）；
setAttribute（“recordedChunks”，mediaRecordedChunks）；
log（cvs.getAttribute（“recordedChunks”）这太棒了。但是，出现错误“未能对“URL”执行“createObjectURL”：未找到与提供的签名匹配的函数”。我试着使用；var newURL=（window.URL？URL:webkitURL）.createObjectURL（新Blob（mediaRecordedChunks，{type:'video/webm；codecs=H264'}））；。得到了一个奇怪的结果-一个可播放的.webm文件，屏幕上只有文件名。@第一个错误是，swabygw，这意味着您并没有向
URL.createObjectURL（）
提供Blob。第二，这听起来像个谜。。。你能试着提供一个测试吗？在更长的录音上再次测试，它们毕竟不是错误。我为第一个错误所做的修复是有效的，但结果的前几帧是黑屏的——我认为它不起作用，但视频是在前几帧之后生成的。感谢您的帮助-这是一个很好的解决方案。@swabygw您能否提供此解决方案的实现。我在Windows10/ipad上也遇到了同样的问题，尝试了同样的代码，但我只能看到黑屏。我提出了一个类似的问题，你能帮忙链接吗