Запись всего рабочего стола в Angular 9

Question

Я пишу настольное приложение на Angular 9, используя Electron в качестве фреймворка. Я хотел бы добавить возможность захвата видео всего рабочего стола, а также аудиовхода.

Я уже пытался использовать библиотеку RecordRT C, и она записывает видео со звуком, но не с мой рабочий стол, но с веб-камерой.

Он сильно недокументирован для Angular, а в документации Electron отсутствует рабочий пример.

Есть проблемы с MediaStreams в Angular, и К сожалению, все примеры RecordRT C написаны на JS, что само по себе беспорядочно ...

Я был бы очень признателен за подробное рабочее решение. Все, что я хочу, это: 1. Нажмите кнопку, чтобы начать запись 2. Записать видео на рабочем столе со звуком 3. Нажмите другую кнопку и остановите запись 4. Сохраните видео как файл с помощью openSaveDialog Electron.

Я не Мне не нужна возможность выбирать, в каком окне я хочу записывать, и я бы хотел оставить веб-камеру выключенной.

Спасибо!

Answer 1

Вот как я решил проблему на Angular 9. Используя ngx-electronics.

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

Надеюсь, это кому-то поможет! Это все еще не идеально. Не удалось включить запись звука. И вроде бы диктофон не отпускает после сохранения. У меня получается записать видео, потом несколько раз не получается. Совершенно не стабильно ...