首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Angular 9中记录整个桌面

在Angular 9中记录整个桌面
EN

Stack Overflow用户
提问于 2020-05-26 21:12:33
回答 1查看 819关注 0票数 0

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

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

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

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

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

我不想要选择要录制哪个窗口的功能,我想保持关闭网络摄像头。

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2020-05-28 19:12:43

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

代码语言:javascript
运行
复制
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;
    }
  }

希望能对某些人有所帮助!它仍然不是完美的。我不能打开录音。而且看起来,记录器在保存后没有释放。我设法录制了一段视频,然后它失败了好几次。它一点也不稳定。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62022968

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档