Search code examples
angularangular6screen-recording

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


Solution

  • 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.