MediaStreamRecorder не является конструктором

Я новичок в Angular6 и пытаюсь использовать MediaStreamRecorder. Я определенно делаю что-то неправильно при определении MediaStreamRecorder, потому что я продолжаю получать ошибку TypeError: msr__WEBPACK_IMPORTED_MODULEMediaStreamRecorder_.MediaStreamRecorder is not a constructor. Не уверен, как и где я должен объявить и определить MediaStreamRecorder. Не могли бы вы помочь мне с этим, пожалуйста?

Я установил модуль msr, и мой код выглядит так:

import { Component,ViewChild, OnInit, Inject } from '@angular/core';
import { LinksService } from 'demo/_services/links.service';
import { Http,Response,Headers } from '@angular/http';
import { MediaStreamRecorder} from 'msr';
import { RecordRTC } from 'recordrtc';

@Component({
  selector: 'demo-ceva',
  templateUrl: './ceva.component.html',
  styleUrls: ['./ceva.component.css'],
  providers: [
    {
      provide: SpeechRecognitionLang,
      useValue: 'en-US',
    },    
    SpeechRecognitionService,
  ],
})
export class CevaComponent { 
  public navigator: any;      
  public MediaStreamRecorder: any;    
  constructor( private http: Http, private service: SpeechRecognitionService, private links: LinksService ) { 
this.record = () => {       
    var browser = <any>navigator;  
    var obj = { audio: true, video:false };
    browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);     
    browser.mediaDevices.getUserMedia(obj).then(stream => {  
        var source = window.URL.createObjectURL(stream);      
        var config= { ... }  
        var recorder = new MediaStreamRecorder(stream, config);
        recorder.record();
        recorder.stop(function(blob) {     
            var blob = recorder.blob;
            console.log(blob);           
        });
   });
});

typescript javascript constructor mediastream angular6
person Emanuela Colta    schedule 03.08.2018    source источник
comment
это библиотека github.com/streamproc/MediaStreamRecorder?   -  person firegloves    schedule 03.08.2018
comment
Я думаю так. Я не уверен, является ли этот API почти таким же или производным: developer.mozilla.org/en-US/docs/Web/API/MediaRecorder   -  person Emanuela Colta    schedule 03.08.2018
comment
вы пытаетесь сослаться на простые компоненты браузера в угловой машинописный текст. посмотрите на это stackoverflow.com/questions/40051818/   -  person firegloves    schedule 03.08.2018
comment
Благодарю вас! Это было полезно :)   -  person Emanuela Colta    schedule 03.08.2018
comment
когда решишь, напиши решение :)   -  person firegloves    schedule 03.08.2018
comment
Ok. Я все еще работаю над этим.   -  person Emanuela Colta    schedule 03.08.2018

Ответы (2)


arrow_upward
0
arrow_downward

В качестве ответа на этот пост предложил, решение для меня было в том, что в файле typings.d.ts добавить следующие объявления:

declare interface MediaRecorderErrorEvent extends Event {
  name: string;
}

declare interface MediaRecorderDataAvailableEvent extends Event {
  data : any;
}

interface MediaRecorderEventMap {
  'dataavailable': MediaRecorderDataAvailableEvent;
  'error': MediaRecorderErrorEvent ;
  'pause': Event;
  'resume': Event;
  'start': Event;
  'stop': Event;
  'warning': MediaRecorderErrorEvent ;
}


declare class MediaRecorder extends EventTarget {

  readonly mimeType: string;
  // readonly MimeType: 'audio/wav';
  readonly state: 'inactive' | 'recording' | 'paused';
  readonly stream: MediaStream;
  ignoreMutedMedia: boolean;
  videoBitsPerSecond: number;
  audioBitsPerSecond: number;

  ondataavailable: (event : MediaRecorderDataAvailableEvent) => void;
  onerror: (event: MediaRecorderErrorEvent) => void;
  onpause: () => void;
  onresume: () => void;
  onstart: () => void;
  onstop: () => void;

  constructor(stream: MediaStream);

  start();

  stop();

  resume();

  pause();

  isTypeSupported(type: string): boolean;

  requestData();


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

  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

И в моем компоненте я смог использовать var mediaRecorder = new MediaRecorder(stream); без каких-либо других объявлений. Спасибо @firegloves за ссылку на этот пост и спасибо @Tiberiu C. за ответ! Это было действительно полезно.

person Emanuela Colta    schedule 03.08.2018

arrow_upward
0
arrow_downward

У меня была такая же проблема с чистым JS и React, и удаление следующей строки «исправило» проблему:

window.MediaRecorder = require('audio-recorder-polyfill');

person Uros Randelovic    schedule 13.04.2020