title: Issues with getting MediaRecorder to work in Angular 9
body: <p>I am trying to implement Media Recorder <a href="https://developers.google.com/web/updates/2016/01/mediarecorder" rel="nofollow noreferrer">https://developers.google.com/web/updates/2016/01/mediarecorder</a> in my Angular 9 app but I have few issues.</p>
  <p>The camera is detected when I go on page with Media Recorder component as light on my camera comes on but thats all I see below:</p>
  <p><a href="https://i.stack.imgur.com/FdO2G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FdO2G.png" alt="View on my page" /></a></p>
  <p>None of the buttons work and I am not sure why.</p>
  <p>Here is my console log:</p>
  <p><a href="https://i.stack.imgur.com/IA7Y2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IA7Y2.png" alt="console log" /></a></p>
  <p>Please see my mediarecorder.ts component</p>
  <pre><code>/// &lt;reference types=&quot;@types/dom-mediacapture-record&quot; /&gt;
  
  import { Component, OnInit, AfterViewInit } from '@angular/core';
  import {PatientsService} from '../patients.service';
  
  // declare var MediaRecorder:any;
  
  @Component({
    selector: 'app-mediarecord',
    templateUrl: './mediarecord.component.html',
    styleUrls: ['./mediarecord.component.scss']
  })
  export class MediarecordComponent implements AfterViewInit,OnInit  {
  
    constraints; video; mediaRecorder; options;
  
    private recordedChunks: any[] = [];
    streams: string[] = [];
    audioChunks: any[];
    videoChunks: any[];
  
  
    constructor(private signalHub: PatientsService) 
  
    {
      this.constraints = { audio: true, video: true };
    }
  
    ngOnInit() {
      // const video = document.createElement('video');
      // this.video = document.getElementsByClassName('video')[0];
      // console.log(this.video);
    }
  
    ngAfterViewInit() {
      this.runMedia();
    }
  
    
    successCallback(stream) {
      if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
      this.options = { mimeType: 'video/webm; codecs=vp9' };
      console.log(&quot;Oh no&quot;);
      } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
        this.options = { mimeType: 'video/webm; codecs=vp8' };
      } else {
        // ...
      }
  
  
      // this.video.srcObject = stream;
      // console.log(stream);
     
      // this.video.srcObject = stream;
      // console.log(stream.srcObject);
      // this.video.play();
  
      this.mediaRecorder = new MediaRecorder(stream, this.options);
      console.log(this.mediaRecorder);
      console.log(this.options);
  
      this.mediaRecorder.ondataavailable = this.handleDataAvailable;
  
      this.mediaRecorder.start();
      console.log(this.mediaRecorder);
  
      console.log(&quot;oo&quot;);
    }
  
    stopVideo() {
      this.mediaRecorder.stop();
    }
  
    handleDataAvailable(blob) {
      // POST/PUT &quot;Blob&quot; using FormData/XHR2
      console.log(blob);
      //this.signalHub.sendStream(blob);
      this.recordedChunks.push(blob.data);
    }
  
    errorCallback(error) {
      console.log('navigator.getUserMedia error: ', error);
    }
  
    runMedia() {
  
      this.streams.push(&quot;f&quot;);
      console.log(this.constraints);
  
  
      navigator.mediaDevices.getUserMedia(this.constraints)
        .then((stream) =&gt; {
           console.log(stream);
          this.successCallback(stream);
        })
        .catch(this.errorCallback);
    }
  
  }
  </code></pre>
  <p>HTML file- Im aware I need methods to bind this with ts</p>
  <pre><code>&lt;video id=&quot;Recording&quot; width=&quot;800&quot; height=&quot;400&quot; playsinline autoplay &gt;&lt;/video&gt;
  
      &lt;div&gt;
          &lt;button id=&quot;start&quot; (click) = &quot;ngAfterViewInit()&quot; &gt;Start camera&lt;/button&gt;
          &lt;button id=&quot;record&quot; &gt;Start Recording&lt;/button&gt;
          &lt;button id=&quot;play&quot; &gt;Play&lt;/button&gt;
          &lt;button id=&quot;download&quot;&gt;Download&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h4&gt;Media Stream Constraints options&lt;/h4&gt;
          &lt;p&gt;Echo cancellation: &lt;input type=&quot;checkbox&quot; id=&quot;echoCancellation&quot;&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;span id=&quot;errorMsg&quot;&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  <p>index.d.ts file:</p>
  <pre><code>// Type definitions for non-npm package w3c MediaStream Recording 1.0
  // Project: https://w3c.github.io/mediacapture-record
  // Definitions by: Elias Meire &lt;https://github.com/elsmr&gt;
  //                 AppLover69 &lt;https://github.com/AppLover69&gt;
  // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  
  interface MediaRecorderErrorEventInit extends EventInit {
      error: DOMException;
  }
  
  declare class MediaRecorderErrorEvent extends Event {
      constructor(type: string, eventInitDict: MediaRecorderErrorEventInit);
      readonly error: DOMException;
  }
  
  interface BlobEventInit extends EventInit {
      data: Blob;
      timecode?: number;
  }
  
  declare class BlobEvent extends Event {
      constructor(type: string, eventInitDict: BlobEventInit);
      readonly data: Blob;
      readonly timecode: number;
  }
  
  type BitrateMode = 'vbr' | 'cbr';
  
  interface MediaRecorderOptions {
      mimeType?: string;
      audioBitsPerSecond?: number;
      videoBitsPerSecond?: number;
      bitsPerSecond?: number;
      audioBitrateMode?: BitrateMode;
  }
  
  type RecordingState = 'inactive' | 'recording' | 'paused';
  
  interface MediaRecorderEventMap {
      &quot;dataavailable&quot;: BlobEvent;
      &quot;error&quot;: MediaRecorderErrorEvent;
      &quot;pause&quot;: Event;
      &quot;resume&quot;: Event;
      &quot;start&quot;: Event;
      &quot;stop&quot;: Event;
  }
  
  declare class MediaRecorder extends EventTarget {
      readonly stream: MediaStream;
      readonly mimeType: string;
      readonly state: RecordingState;
      readonly videoBitsPerSecond: number;
      readonly audioBitsPerSecond: number;
      readonly audioBitrateMode: BitrateMode;
  
      ondataavailable: ((event: BlobEvent) =&gt; void) | null;
      onerror: ((event: MediaRecorderErrorEvent) =&gt; void) | null;
      onpause: EventListener | null;
      onresume: EventListener | null;
      onstart: EventListener | null;
      onstop: EventListener | null;
  
      constructor(stream: MediaStream, options?: MediaRecorderOptions);
  
      addEventListener&lt;K extends keyof MediaRecorderEventMap&gt;(type: K, listener: (this: MediaRecorder, ev: MediaRecorderEventMap[K]) =&gt; any, options?: boolean | AddEventListenerOptions): void;
      addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
      removeEventListener&lt;K extends keyof MediaRecorderEventMap&gt;(type: K, listener: (this: MediaRecorder, ev: MediaRecorderEventMap[K]) =&gt; any, options?: boolean | EventListenerOptions): void;
      removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
  
      start(timeslice?: number): void;
      stop(): void;
      resume(): void;
      pause(): void;
      requestData(): void;
  
      static isTypeSupported(type: string): boolean;
  }
  
  interface Window {
      MediaRecorder: typeof MediaRecorder;
      BlobEvent: typeof BlobEvent;
      MediaRecorderErrorEvent: typeof MediaRecorderErrorEvent;
  }
  </code></pre>
  <p>I also have a lib.dom.ts file which I have obtained through running npm install @types/dom-mediacapture-record</p>