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

Question

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

chrome.tabCapture是基于用户发出的命令调用的，5秒钟后停止录制并从记录的块中创建一个新的blob，继续下载文件。

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

好奇的是，当下载或重新执行上下文脚本时，为什么blob是空的。

继文档：https://developers.google.com/web/updates/2016/01/mediarecorder

background.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回调中的文件工作：

background.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(); 
};