在 Angular 9 上启动后无法获得 mediaRecorder

如何解决在 Angular 9 上启动后无法获得 mediaRecorder

我正在尝试实现 MediaRecorder 以在 angular 9 上使用网络摄像头录制视频，但遇到以下问题：当我尝试调用“onStop( ）“ 方法 因为 mediaRecorder 变量未定义

我的 MediaRecorder 实现

    // Type definitions for non-npm package w3c MediaStream Recording 1.0
// Project: https://w3c.github.io/mediacapture-record
// Definitions by: Elias Meire <https://github.com/elsmr>
//                 AppLover69 <https://github.com/AppLover69>
// 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 {
    "dataavailable": BlobEvent;
    "error": MediaRecorderErrorEvent;
    "pause": Event;
    "resume": Event;
    "start": Event;
    "stop": 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) => void) | null;
    onerror: ((event: MediaRecorderErrorEvent) => void) | null;
    onpause: EventListener | null;
    onresume: EventListener | null;
    onstart: EventListener | null;
    onstop: EventListener | null;

    constructor(stream: MediaStream,options?: MediaRecorderOptions);

    addEventListener<K extends keyof MediaRecorderEventMap>(type: K,listener: (this: MediaRecorder,ev: MediaRecorderEventMap[K]) => any,options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string,listener: EventListenerOrEventListenerObject,options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof MediaRecorderEventMap>(type: K,options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string,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;
}

我的组件

@ViewChild("start")
  public start: ElementRef;

  @ViewChild("stop")
  public stop: ElementRef;

  @ViewChild("video")
  public video: ElementRef;

  mediaRecorder: MediaRecorder;

  onStop() {
    let chunks: any[] = [];
        this.mediaRecorder.onstop = (ev: any) => {
          let blob = new Blob(chunks,{ 'type': 'video/mp4;' });
          chunks = [];
          let videoURL = window.URL.createObjectURL(blob);
          let video = document.getElementById('video') as HTMLMediaElement;
          video.src = videoURL;
        }

        this.mediaRecorder.stop();
  }

  onStart() {
    let constraintObj = {
      audio: false,video: {
        facingMode: "user",width: { min: 640,ideal: 1280,max: 1920 },height: { min: 480,ideal: 720,max: 1080 }
      }
    };

    navigator.mediaDevices.getUserMedia(constraintObj)
      .then(function (mediaStreamObj) {
        //connect the media stream to the first video element
        let video = document.querySelector('video');
        video.srcObject = mediaStreamObj;

        video.onloadedmetadata = function (ev: any) {
          //show in the video element what is being captured by the webcam
          video.play();
        };

        //add listeners for saving video/audio
        this.mediaRecorder = new MediaRecorder(mediaStreamObj);

        this.mediaRecorder.ondataavailable = function (ev: any) {
          chunks.push(ev.data);
        }

        let chunks: any[] = [];
        this.mediaRecorder.start();
      })
      .catch(function (err) {
        console.log(err.name,err.message);
      });
  }