让 MediaRecorder 在 Angular 9 中工作的问题

Question

我正在尝试在我的 Angular 9 应用程序中实施媒体记录器 https://developers.google.com/web/updates/2016/01/mediarecorder，但我遇到的问题很少。

当我使用 Media Recorder 组件进入页面时检测到摄像头，因为我的摄像头上的灯亮了，但这就是我在下面看到的全部内容：

None 个按钮有效，我不确定为什么。

这是我的控制台日志：

请看我的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, listener: (this: MediaRecorder, ev: MediaRecorderEventMap[K]) => 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;
}

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

获得的

Answer 1

如果您想运行单击“开始”时使用“运行Media()”方法，则直接从 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>

这样你应该能够运行你的“运行Media()”方法至少通过点击开始按钮。如果您可以用您的代码创建一个 plucker 或 stackblitz，那么理解整个问题会更容易。

让 MediaRecorder 在 Angular 9 中工作的问题

Issues with getting MediaRecorder to work in Angular 9

mediarecorder

typescript

angular