MediaRecorder Blob 在电子应用程序中归档

Question

我有一个电子应用程序，它具有非常简单的桌面捕获功能：

const {desktopCapturer} = require('electron')
const fs = require('fs');

var recorder;
var chunks = [];
var WINDOW_TITLE = "App Title";

function startRecording() {
    desktopCapturer.getSources({ types: ['window', 'screen'] }, function(error, sources) {
        if (error) throw error;

        for (let i = 0; i < sources.length; i++) {
            let src = sources[i];
            if (src.name === WINDOW_TITLE) {
                navigator.webkitGetUserMedia({
                    audio: false,
                    video: {
                        mandatory: {
                            chromeMediaSource: 'desktop',
                            chromeMediaSourceId: src.id,
                            minWidth: 800,
                            maxWidth: 1280,
                            minHeight: 600,
                            maxHeight: 720
                        }
                    }
                }, handleStream, handleUserMediaError);
                return;
            }
        }
    });
}

function handleStream(stream) {
    recorder = new MediaRecorder(stream);
    chunks = [];
    recorder.ondataavailable = function(event) {
        chunks.push(event.data);
    };
    recorder.start();
}

function stopRecording() {
    recorder.stop();
    toArrayBuffer(new Blob(chunks, {type: 'video/webm'}), function(ab) {
        var buffer = toBuffer(ab);
        var file = `./test.webm`;
        fs.writeFile(file, buffer, function(err) {
            if (err) {
                console.error('Failed to save video ' + err);
            } else {
                console.log('Saved video: ' + file);
            }
        });
    });
}

function handleUserMediaError(e) {
    console.error('handleUserMediaError', e);
}

function toArrayBuffer(blob, cb) {
    let fileReader = new FileReader();
    fileReader.onload = function() {
        let arrayBuffer = this.result;
        cb(arrayBuffer);
    };
    fileReader.readAsArrayBuffer(blob);
}

function toBuffer(ab) {
    let buffer = new Buffer(ab.byteLength);
    let arr = new Uint8Array(ab);
    for (let i = 0; i < arr.byteLength; i++) {
        buffer[i] = arr[i];
    }
    return buffer;
}


// Record for 3.5 seconds and save to disk
startRecording();
setTimeout(function() { stopRecording() }, 3500);

我知道要保存 MediaRecorder blob 源，我需要将其读入 ArrayBuffer，然后将其复制到普通缓冲区以保存文件。

然而，这对我来说似乎失败的地方是将 blob 块组合成 blob。当块被添加到单个 Blob 中时——它们就像消失了一样。新的 Blob 是空的，之后它们复制到的所有其他数据结构也完全是空的。

在创建 Blob 之前，我知道块数组中有有效的 Blob。

这是执行 new Blob(chunks, {.. 部分之前块的调试信息。

console.log(chunks)

然后是 new Blob(chunks, {type: 'video/webm'}) 对象的调试信息。

console.log(ab)

我完全被难住了。我能找到的所有参考教程或其他 SO 答案基本上都遵循此流程。我错过了什么？

电子版：1.6.2

Answer 1

这个问题今天就自行解决了，我没有做任何更改。我不确定我的系统发生了什么变化（除了重新启动），但它现在可以正常工作了。

Answer 2

那是不可能工作的。您没有等待 stopReocoring 的价值到来。您需要将 stopRecording 函数更改为以下内容：

function stopRecording() {
    var save = function() {
        console.log(blobs);
        toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {
            console.log(ab);
            var buffer = toBuffer(ab);
            var file = `./videos/example.webm`;
            fs.writeFile(file, buffer, function(err) {
                if (err) {
                    console.error('Failed to save video ' + err);
                } else {
                    console.log('Saved video: ' + file);
                }
            });
        });
    };
    recorder.onstop = save;
    recorder.stop();
}

MediaRecorder Blob 在电子应用程序中归档

MediaRecorder Blob to file in an electron app

electron

mediarecorder

getusermedia