如何在 angular 2+ 应用程序中录制桌面屏幕

Question

我需要通过 Angular 6 共享桌面屏幕。我已经搜索了合适的包来实现此功能，但找不到。

实际上我找到了很多软件包，例如 RecordRTC, Aperture, screen-capture-recorder 和其他一些软件包。其中一些不兼容，一些文档不足，并且代码智能感知不可用。

请告诉我可以与 Angular 6 一起使用的最兼容且文档最齐全的软件包。我正在使用的平台是 Windows

Answer 1

终于找到一些可行的解决方案...

@Component({
  selector: 'app-screen',
  template: `<video #video autoplay style="width:360px;"></video>`
})
export class ScreenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.startRecording()
  }

  async startRecording() {
    // navigator.mediaDevices.getDisplayMedia({ video: true })
    // or
    // navigator.getDisplayMedia({ video: true })

    let stream = await navigator.getDisplayMedia({ video: true })
    console.log(stream)
    this.videoElement.srcObject = stream
  }


  @ViewChild('video') videoElementRef: ElementRef
  get videoElement(): HTMLVideoElement {
    return this.videoElementRef.nativeElement
  }

}

由于此功能处于试验阶段，因此启用 Experimental Web Platform features 标记来记录用户屏幕。要启用，请按照下面的图片

Note: It is tested on chrome v71.x.x, make sure your browser is up to date. Also note that, this will not work in Electron app as someone down voted me it might be possible that he/she tried to use this in Electron app. You have to use this solution in browser specific application but not in Electron right now.

如何在 angular 2+ 应用程序中录制桌面屏幕

How to record desktop screen in angular 2+ application

screen-recording

angular

angular6