How to record desktop screen in angular 2+ application

﹥>﹥吖頭↗ 提交于 2020-06-23 07:18:33

问题


I need to share desktop screen via Angular 6. I have searched for suitable package to implement this feature but couldn't found it.

Actually I found many packages like RecordRTC, Aperture, screen-capture-recorder and some others. Some of them were incompatible, some were poorly documented and non-availability of code-intellisense.

Please tell me the most compatible and well documented package that I can use with Angular 6. Platform I am working on is Windows


回答1:


Finally find some working solution...

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

  constructor() { }

  ngOnInit() {
    this.startRecording()
  }

  async startRecording() {
    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
  }

}

As this feature is in experimental phase, so enable Experimental Web Platform features flag to record the user screen. To enable, follow this below image

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.



来源:https://stackoverflow.com/questions/53629394/how-to-record-desktop-screen-in-angular-2-application

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!