如何在 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 标志来记录用户屏幕。要启用，请按照下图进行操作

注意：它是在chrome v71.x.x 上测试的，请确保您的浏览器是最新的。 另请注意，这在Electron 应用程序中不起作用，因为有人对我投了反对票，他/她可能试图在Electron 应用程序中使用它。 您必须在特定于浏览器的应用程序中使用此解决方案，但现在不能在 Electron 中使用。