0

我是 Angular6 的新手，我正在尝试使用MediaStreamRecorder. 我在定义时肯定做错了什么，MediaStreamRecorder因为我不断收到错误TypeError: msr__WEBPACK_IMPORTED_MODULE_4__.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);           
        });
   });
});
4

3 回答 3

0

正如对这篇文章的回答所建议的那样，我的解决方案是在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. 的回答！这真的很有帮助。

于 2018-08-03T16:41:33.030 回答
0 
npm install -D @types/dom-mediacapture-record
于 2019-09-12T20:23:21.560 回答
0

我对纯 JS 和 React 有同样的问题，删除以下行“修复”了问题：

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

于 2020-04-13T02:43:41.423 回答