使MediaRecorder在Angular 9中工作的问题

如何解决使MediaRecorder在Angular 9中工作的问题

我正在尝试在Angular 9应用中实现Media Recorder https://developers.google.com/web/updates/2016/01/mediarecorder，但是问题很少。

当我打开带有Media Recorder组件的页面时，由于相机上的指示灯亮起，因此检测到了相机，但这就是我在下面看到的全部内容：

所有按钮均无效，我不确定为什么。

这是我的控制台日志：

请参阅我的mediarecorder.ts组件

/// <reference types="@types/dom-mediacapture-record" />

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("Oh no");
    } 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("oo");
  }

  stopVideo() {
    this.mediaRecorder.stop();
  }

  handleDataAvailable(blob) {
    // POST/PUT "Blob" 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("f");
    console.log(this.constraints);


    navigator.mediaDevices.getUserMedia(this.constraints)
      .then((stream) => {
         console.log(stream);
        this.successCallback(stream);
      })
      .catch(this.errorCallback);
  }

}

HTML文件-我知道我需要将其与ts绑定的方法

<video id="Recording" width="800" height="400" playsinline autoplay ></video>

    <div>
        <button id="start" (click) = "ngAfterViewInit()" >Start camera</button>
        <button id="record" >Start Recording</button>
        <button id="play" >Play</button>
        <button id="download">Download</button>
    </div>

    <div>
        <h4>Media Stream Constraints options</h4>
        <p>Echo cancellation: <input type="checkbox" id="echoCancellation"></p>
    </div>

    <div>
        <span id="errorMsg"></span>
    </div>

index.d.ts文件：

// 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;
}

我还有一个lib.dom.ts文件，该文件是通过运行npm install @ types / dom-mediacapture-record获得的

解决方法

如果要在单击“开始”时运行“ runMedia（）”方法，则直接从html调用它，而不是调用“ ngAfterViewInit（）”钩子。

<video id="Recording" width="800" height="400" playsinline autoplay ></video>

    <div>
        <button id="start" (click)="runMedia()">Start camera</button>
        <button id="record">Start Recording</button> // call record method
        <button id="play">Play</button> // call play method
        <button id="download">Download</button> // call download method
    </div>

    <div>
        <h4>Media Stream Constraints options</h4>
        <p>Echo cancellation: <input type="checkbox" id="echoCancellation"></p>
    </div>

    <div>
        <span id="errorMsg"></span>
    </div>

这样，您应该至少可以通过单击开始按钮来运行“ runMedia（）”方法。 如果您可以使用代码创建一个plucker或stackblitz，则更容易理解整个问题。