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