在Angular 9中记录整个桌面

Question

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

我已经尝试利用RecordRTC库，它的确录制了带有音频的视频，但不是我的台式机，而是网络摄像头。

[Angular的文档严重不足，而Electron的文档缺少一个有效的示例。

[Angular中的MediaStreams存在问题，不幸的是，RecordRTC的示例都是用JS编写的，这本身就是一团糟...

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

我不希望选择要记录的窗口，并且希望保持网络摄像机关闭。

谢谢！

Answer 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;
    }
  }

希望对某人有帮助！它仍然不是完美的。我无法打开录音。并且看来，记录器在保存后没有释放。我设法录制了一段视频，但失败了几次。根本不稳定...