CODEWITHSUNDEEP
angularangular6screen-recording
WasiF
WasiF

Reputation: 28847

How to record desktop screen in angular 2+ application

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

Upvotes: 5

Views: 4153

Answers (1)

WasiF
WasiF

Reputation: 28847

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

}

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

enter image description here

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.

Upvotes: 3

Related Questions