javascript - Chrome 扩展 - Blob 从背景到上下文脚本

Question

我有一个 chrome 扩展尝试记录事件选项卡并将 blob 保存到本地存储。

根据用户发出的命令调用chrome.tabCapture，5秒后，记录停止并从记录的 block 中创建一个新的blob，继续下载文件。

下载文件时，文件大小为 0 字节，在之前放置断点，检查 blob 时，文件大小大于 0 字节。最终尝试在 sendResponse 回调中将 blob 返回到上下文脚本。

很好奇在下载或重新运行上下文脚本时是否有任何问题表明 blob 为空。

遵循文档:https://developers.google.com/web/updates/2016/01/mediarecorder

背景.js

chrome.tabCapture.capture(captureOptions, function (stream) {
    if (!stream)
        return;
    var recordedChunks = [];
    var options = {
        mimeType: 'video/webm; codecs=vp9',
    };

    var mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.ondataavailable = function (event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    }
    mediaRecorder.start();
    setTimeout(function(){
        stopRecording(stream, mediaRecorder, recordedChunks);
    }, 5000);
})


 var stopRecording = function (stream, mediaRecorder, recordedChunks) {
   mediaRecorder.stop();
   var blob = new Blob(recordedChunks, {
       type: 'video/webm'
   });
   var url = URL.createObjectURL(blob);
   var a = document.createElement('a');
   document.body.appendChild(a);
   a.style = 'display: none';
   a.href = url;
   a.download = 'test.webm';
   a.click();
   URL.revokeObjectURL(url);
   stream.getVideoTracks()[0].stop();
 };

Answer 1

我通过在 ondataavailable 回调中下载文件来使其工作:

背景.js:

chrome.tabCapture.capture(captureOptions, function (stream) {
    if (!stream)
        return;
    var recordedChunks = [];
    var options = {
        mimeType: 'video/webm; codecs=vp9',
    };

    var mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.ondataavailable = function (event) {
        if (event.data.size > 0) {
          var url = URL.createObjectURL(event.data);
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.style = 'display: none';
          a.href = url;
          a.download = 'test.webm';
          a.click();
          URL.revokeObjectURL(url);
        }
    }
    mediaRecorder.start();
    setTimeout(function(){
        stopRecording(stream, mediaRecorder, recordedChunks);
    }, 5000);
})


 var stopRecording = function (stream, mediaRecorder, recordedChunks) {
   mediaRecorder.stop();
   stream.getVideoTracks()[0].stop();
 };