Question

我正在尝试编写Chrome插件来捕获活动标签的视频。我的代码基于this post。

当我的页面动作被调用时，我开始录制：

var recordedChunks = null;

var captureOptions = { audio : false, video : true };
chrome.tabCapture.capture(captureOptions, 
    function(stream) {
        if (stream) {
            recordedChunks = [];
            var options = {mimeType: "video/webm"};
            mediaRecorder = new MediaRecorder(stream, options);
            mediaRecorder.start();
            mediaRecorder.ondataavailable = function(event) {
                if (event.data.size > 0) {                  
                    recordedChunks.push(event.data);
                }
            }   
        }
    }
);

当再次调用页面操作时，我停止录制并下载文件：

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();
window.URL.revokeObjectURL(url);
stream.getVideoTracks()[0].stop();

效果很好 - 我可以播放下载的test.webm视频。

但我只想记录活动标签的最后几分钟的视频。我不希望recordedChunks数组无限增长。所以，我在开始录制动作中尝试了类似的东西：

chrome.tabCapture.capture(captureOptions, 
    function(stream) {
        // ...
            mediaRecorder.ondataavailable = function(event) {
                if (event.data.size > 0) {                  
                    recordedChunks.push(event.data);

                    // CHANGE HERE: keep only the last 1000 blobs
                    while (recordedChunks.length > 1000) {
                        recordedChunks.shift();
                    }
                }
            }           
    }
);

但是通过此修改，下载test.webm视频无法播放。如何捕获MediaRecorder的blob输出尾部？

Chrome扩展程序可捕获活动标签最后几分钟的视频

0 个答案: