在 Angular 9 中记录整个桌面答案

【问题标题】：Recording the entire desktop in Angular 9在 Angular 9 中记录整个桌面
【发布时间】：2020-09-13 07:19:05
【问题描述】：

我正在使用 Electron 作为框架在 Angular 9 中编写一个桌面应用程序。我想添加捕获整个桌面的视频以及音频输入的功能。

我已经尝试利用 RecordRTC 库，它确实可以录制带音频的视频，但不是我的桌面，而是网络摄像头。

Angular 的文档严重不足，Electron 的文档缺少一个工作示例。

Angular中的MediaStreams有问题，可惜RecordRTC的例子都是用JS写的，本身就是一团糟……

我非常感谢一个详细的、有效的解决方案。我想要的是： 1.按一个按钮开始录制 2.录制带音频的桌面视频 3.按另一个按钮并停止录制 4. 使用 Electron 的 openSaveDialog 将视频保存为文件。

我不想选择要录制的窗口，我想保持网络摄像头关闭。

谢谢！

【问题讨论】：

你试过Electron desktopCapturer和getUserMedia吗？
是的。但是给出的例子已经过时了。 getUserMedia 返回音频输入和网络摄像头，但我不想要网络摄像头访问，而是由 RecordRTC 的 getDisplayMedia 提供的屏幕捕获，这在 Electron 中是缺失的。我真的需要一个 Angular + Electron 的工作示例。
实际上没有任何关于如何开始、停止记录以及如何处理（以及如何）处理捕获的 blob 数据的内容。太糟糕了...我这两天在网上搜索。我什至设法在 Chrome 中使用 RecordRTC 和 getDIsplayMedia 完成了这项工作，但当然它在 Electron 中不起作用......
这里有一些可以帮助更多的东西：stackoverflow.com/questions/36753288/…

标签： angular electron desktop capture recordrtc

【解决方案1】：

这就是我在 Angular 9 上解决问题的方法。使用 ngx-electron。

declare var MediaRecorder: any; // Before the @Component({ declaration
...
 public recorder;  
  public recordedChunks = [];
  public isRecording = false;
  public recImage = 'assets/cameraOff.png';

...

  startRecording() {
    this.recordedChunks = [];
    this.electronService.desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
      for (const source of sources) {
        if (source.name === 'Teacher') {
          try {
            const stream = await (<any>navigator).mediaDevices.getUserMedia({
              audio: false,
              video: {
                mandatory: {
                  chromeMediaSource: 'desktop',
                  chromeMediaSourceId: source.id,
                  minWidth: 1280,
                  maxWidth: 1280,
                  minHeight: 720,
                  maxHeight: 720
                }
              }
            });
            this.handleStream(stream);
          } catch (e) {
            this.handleError(e);
          }
          return;
        }
      }
    });
  }

  handleStream(stream) {
    this.recorder = new MediaRecorder(stream);

    this.recorder.ondataavailable = event => {
      this.recordedChunks.push(event.data);
    };
    this.recorder.start();
  }

  handleError(e) {
    console.log(e);
  }

  stopRecording() {
    this.recorder.onstop = () => this.save();
    this.recorder.stop();

  }

  save() {
    this.toArrayBuffer(new Blob(this.recordedChunks, { type: 'video/webm' }), (ab) => {
      const buffer = this.toBuffer(ab);
      let moviePath = this.electronService.remote.dialog.showSaveDialogSync({
        properties: ['showOverwriteConfirmation'],
        filters: [{ name: 'WEBM movies', extensions: ['webm'] }],
        defaultPath: this.electronService.remote.app.getPath('home')
      });
      if (moviePath !== '') {
        moviePath += '.webm';
        this.electronService.remote.require('fs').writeFileSync(moviePath, buffer, 'base64');
      }
    });
  }

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

  toArrayBuffer(blob, cb) {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      const arrayBuffer = fileReader.result;
      cb(arrayBuffer);
    };
    fileReader.readAsArrayBuffer(blob);
  }

  toggleRecording() {
    if (!this.isRecording) {
      this.isRecording = true;
      this.startRecording();
      this.recImage = 'assets/cameraOn.png';
      return;
    } else {
      this.isRecording = false;
      this.stopRecording();
      this.recImage = 'assets/cameraOff.png';
      return;
    }
  }

希望对某人有所帮助！它仍然不完美。我无法打开录音。看来，记录器在保存后没有被释放。我设法录制了一个视频，然后它失败了好几次。一点都不稳定……

【讨论】：