MediaRecorder无法在Electron中正确保存

时间:2017-10-17 14:26:29

标签: javascript electron

我正在尝试使用像这样的电子使用媒体录制器API录制我的屏幕。我有一个开始记录屏幕的启动功能。我使用电子API。以及使用MediaRecorder API停止录制的停止功能 - https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

目前它在7秒后停止。

这是它的样子。

    var electron = require('electron');

var SECRET_KEY = 'test.html';

 var recorder;
  var blobs = [];

 console.log("its loading");

function startRecording() {
var title = document.title;
document.title = SECRET_KEY;

console.log("Started Recording");
electron.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 === SECRET_KEY) {
            console.log("its passing");
            document.title = 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);
blobs = [];
recorder.ondataavailable = function(event) {
    blobs.push(event.data);
};
recorder.start();
 }

 function stopRecording() {

recorder.stop();
toArrayBuffer(new Blob(blobs, { type: "video/webm" }), function(ab) {
    var buffer = toBuffer(ab);
    var file = `./SavedVideos/example.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;

}

 var startbutton = document.getElementById('start');
 var stopbutton = document.getElementById('stop');

 // startbutton.onclick = startRecording();
 // stopbutton.onclick = stopRecording();

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

代码传递没有任何错误。但是当我打开使用VLC保存的视频时,它有0个字节,并且它不会启动。

如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

你没有等待价值进入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();
}