如何在 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现在不能。