Javascript MediaStreamRecorder不是构造函数

我是Angular6的新手，我正在尝试使用

MediaStreamRecorder

。在定义

MediaStreamRecorder

时，我肯定是做错了什么，因为我不断得到错误

TypeError:msr\uu网页包\u导入的模块\uu4\uu。MediaStreamRecorder不是构造函数

。不确定如何或在何处声明和定义

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

从'@angular/core'导入{Component，ViewChild，OnInit，Inject}；
从'demo/_services/links.service'导入{LinksService}；
从'@angular/Http'导入{Http，Response，Headers}；
从“msr”导入{MediaStreamRecorder}；
从'RecordRTC'导入{RecordRTC}；
@组成部分({
选择器：“演示ceva”，
templateUrl:'./ceva.component.html'，
样式URL:['./ceva.component.css']，
供应商：[
{
提供：SpeechRecognitionLang，
useValue:“en US”，
},    
演讲认可服务，
],
})
导出类CevaComponent{
公共导航器：任何；
公共媒体流记录器：任何；
构造函数（私有http:http，私有服务：SpeechRecognitionService，私有链接：LinksService）{
this.record=（）=>{
var浏览器=导航器；
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（流）；
变量配置={…}
var记录器=新的MediaStreamRecorder（流，配置）；
recorder.record（）；
记录器停止（功能（blob）{
var blob=recorder.blob；
控制台日志（blob）；
});
});
});

正如对此的回答所建议的，我的解决方案是在

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;

声明接口MediaRecorderErrorRevent扩展事件{
名称：字符串；
}
声明接口MediaRecorderDataAvailableEvent扩展事件{
资料：有；
}
接口MediaRecorderEventMap{
“dataavailable”：MediaRecorderDataAvailableEvent；
“错误”：MediaRecorderErrorEvent；
“暂停”：事件；
“恢复”：事件；
“开始”：事件；
“停止”：事件；
“警告”：MediaRecorderErrorEvent；
}
声明类MediaRecorder扩展了EventTarget{
只读mimeType:string；
//只读MimeType:“音频/wav”；
只读状态：“非活动”|“录制”|“暂停”；
只读流：媒体流；
ignoreMutedMedia：布尔值；
videoBitsPerSecond：数字；
音频比特秒：数字；
ondataavailable：（事件：MediaRecorderDataAvailableEvent）=>void；
OneError：（事件：MediaRecorderErrorRevent）=>无效；
onpause:（）=>void；
onresume:（）=>无效；
onstart:（）=>void；
顶部：（）=>void；
构造函数（流：MediaStream）；
start（）；
停止（）；
恢复（）；
暂停（）；
isTypeSupported（类型：字符串）：布尔值；
请求数据（）；
addEventListener（类型：K，侦听器：（this:MediaStream，ev:MediaRecorderEventMap[K]）=>any，options？：boolean | AddEventListenerOptions）：void；
addEventListener（类型：字符串，侦听器：EventListenerOrEventListenerObject，选项？：布尔| AddEventListenerOptions）：void；
removeEventListener（类型：K，listener:（this:MediaStream，ev:MediaRecorderEventMap[K]）=>any，options？：boolean | EventListenerOptions）：void；
removeEventListener（类型：字符串，侦听器：EventListenerOrEventListenerObject，选项？：布尔值| EventListenerOptions）：void；

---

在我的组件中，我可以使用

var media recorder=new media recorder（stream）；

而无需任何其他声明。感谢@firefolds链接到这篇文章，感谢@Tiberiu C.的回答！这真的很有帮助。

我对纯JS也有同样的问题，并做出反应，删除了下面的“修复”一行问题是：

npm install -D @types/dom-mediacapture-record

---

window.MediaRecorder=require（'audio-recorder-polyfill'）；

这是一个库吗？我想是的。我不确定这个API是完全相同的还是派生的：您正在尝试将普通浏览器组件引用到angular typescript中。看看这个，谢谢！这很有帮助：）当您解决问题时，请发布解决方案：）