Question

desktopCapturer api示例显示了如何将屏幕捕获流写入JTable元素。

<video>

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

// 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');
}

这将创建一个文本文件，其中包含function gotStream(stream) { var fs = require('fs'); fs.writeFileSync('vid.mp4', stream); }作为内容。

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

Answer 1

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

以下摘自magnemite，稍作简化，并从TypeScript转换为JavaScript ES5，以便更好地了解大多数读者。

<div class="container">
  <div class="row table">
    <div class="col">Lorem ipsum dolor</div>
  </div>
</div>

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

Answer 2

查看MediaRecorder API

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

Answer 3

The desktopCapturer example显示了如何获取Blob。然后，您需要将Blob转换为fs.writeFile接受的内容。以下是简短高效的内容：

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

Answer 4

感谢您的示例，为我节省了很多时间。

唯一要做的事情是：recorder.stop（）;

您应该将toArrayBuffer放在recorder.onstop = function（event）{

}

    function stopRecording() {
        recorder.stop();
        recorder.onstop = function (event) {
            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);
                    }
                });
            });
        }
    }

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

4 个答案: