在Electron中将desktopCapturer保存到视频文件

Question

desktopCapturer API 示例展示了如何将屏幕捕获流写入

<video>

元素。

// In the renderer process.
var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
  if (error) throw error;
  for (var i = 0; i < sources.length; ++i) {
    if (sources[i].name == "Electron") {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});

function gotStream(stream) {
  document.querySelector('video').src = URL.createObjectURL(stream);
}

function getUserMediaError(e) {
  console.log('getUserMediaError');
}

我尝试用以下内容替换 gotStream 函数：

function gotStream(stream) {
  var fs = require('fs');
  fs.writeFileSync('vid.mp4', stream);
}

这将创建一个以

[object MediaStream]

作为内容的文本文件。

如何录制此流并保存到磁盘上的文件？

Answer 1

我在 Demian 的 MediaRecorder 链接以及其他相关问题的帮助下回答了我自己的问题。

下面是 magnemite 的摘录，进行了一些细微的简化，并从 TypeScript 转换为 JavaScript ES5，以便大多数读者更好地理解。

var fs = require('fs');
var electron = require('electron');

var SECRET_KEY = 'Magnemite';

var recorder;
var blobs = [];

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

    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) {
                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 = `./videos/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) {
    return Buffer.from(ab);
}

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

这将记录当前电子窗口 7 秒并保存到磁盘。

Answer 2

查看 MediaRecorder API

您应该将该流转换为二进制块。

Answer 3

desktopCapturer 示例展示了如何获取

Blob

。然后，您需要将

Blob

转换为

fs.writeFile

接受的内容。以下内容简短而高效：

fs.writeFile(filepath, Buffer.from(await blob.arrayBuffer()), ...);

Answer 4

只是提醒您应该在可用数据上使用 writestream 来避免内存泄漏。

调用

mediaRecorder.start()

时，您可以传递一个代表触发

ondataavailable

的时间间隔的数字

示例：

// Assuming you already created the mediaStream

const mediaRecorder = new MediaRecorder(stream);

// starting the recording
mediaRecorder.start(1_000); // 1 second interval to trigger the dataavailable

// Create the stream file;
const writeStream = createWriteStream('your_path'); // Import this from 'fs'

const handleData = async (e: BlobEvent) => {
  const arrayBuffer = await e.data.arrayBuffer(); // convert to array buffer
  writeStream.write(Buffer.from(arrayBuffer));
}

const handleStop = () => {
  writeStream.end();
}

mediaRecorder.addEventListener('dataavailable', handleData);
mediaRecorder.addEventListener('stop', handleStop);

通过这种方法，您可以录制长录音而不会出现延迟问题，因为您不再在内存中存储缓冲区。