[SOLVED] WebRTC getDisplayMedia Angular 8 cannot download video

WebRTC getDisplayMedia Angular 8 cannot download video

I am using this NPM package with Angular 8 [ https://www.npmjs.com/package/webrtc-adapter ] to replicate the WebRTC getDisplayMedia functionality here [ https://webrtc.github.io/samples/src/content/getusermedia/getdisplaymedia/ ]

I figured out how to start and stop a recording (live screen capture) but I cannot figure nor find any documentation on how to download the actual recoding, Please see code below thank you.

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import adapter from "webrtc-adapter";

@Component({
  selector: 'tgh-web-rtc-screen-api',
  template: `
  <div class="row">
   <div class="col-md-12">
    <button (click)="startRecording()"> Record </button> &nbsp;
    <button (click)="stopRecording()"> Stop </button> &nbsp;
    <button (click)="resumeRecording()"> Resume </button> &nbsp;
    <button (click)="downloadRecording()"> Download</button>
   </div>
   <div class="col-md-12">
    <video #video class="video"></video>
   </div>
  </div>
  `
})

// Must implement AfterviewInit to work properly for video recording
export class WebRtcScreenApiComponent implements OnInit , AfterViewInit {

    // The HTML reference to the video element (<video></video> tag)
    @ViewChild("video") video: ElementRef;

    _navigator = <any> navigator;
    _localStreamReference: any;

    constructor() { }

    ngOnInit() {

    }

    ngAfterViewInit() {
        // set the initial state of the video
        let video:HTMLVideoElement = this.video.nativeElement;
        video.muted = false;
        video.controls = true;
        video.autoplay = false;
    }

    // Starts the recording and calls the on success methiod if passed
    startRecording() {

        // For Firefox, it requires you specify whether to present the option to share a screen or window to the user
        if (adapter.browserDetails.browser == 'firefox') {
            adapter.browserShim.shimGetDisplayMedia(window, 'screen');
        }

        // Modern way TODO: Figure out why the stream is needed
        this._navigator.mediaDevices.getDisplayMedia({video: true}).then(stream => {
            this.onSucces(stream);
        })
        .catch(e => {
            this.onError(e);
        });

    }

    //Starts the screen recording
    onSucces(stream: MediaStream): void {

        this._localStreamReference = stream;

        var video = document.querySelector('video');
        video.srcObject = stream;   
        video.onloadedmetadata = function(e) {
            video.play();
        };

    }

    // Stops the screen recording
    stopRecording(): void {

        const tracks = this._localStreamReference.getTracks();
        tracks.forEach((track) => {
            track.stop();
        });

    }

    // Resumes recording
    resumeRecording(): void {

        const tracks = this._localStreamReference.getTracks();
        tracks.forEach((track) => {
            track.play();
        });

    }

    // Downloads rercording in browser
    downloadRecording() {
        // ?
    }

    // on WebRTC error
    onError(error: Error):void {
        console.log('Error message: ' + error.message);
        console.log('Error name: ' + error.name);
    }

}

Solution