The object MediaStreamRecorder is not able to be used as a constructor

Question

The object MediaStreamRecorder is not able to be used as a constructor

Just starting my Angular6 journey and I'm experimenting with the MediaStreamRecorder feature. Somehow, I must be messing up the definition of MediaStreamRecorder because all I get is this frustrating error message:

TypeError: msr__WEBPACK_IMPORTED_MODULE_4__.MediaStreamRecorder is not a constructor

. Can someone please point me in the right direction on how to properly declare and define MediaStreamRecorder? Any help would be greatly appreciated!

To give you some context, I have added the msr module to my project, and here's a snippet of my code:

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

javascript typescript constructor angular6 mediastream

Answer 1

Answer №1

After following the advice given in this thread, I found the solution to my issue was to make specific declarations in the typings.d.ts file:

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;

By implementing these declarations, I was able to instantiate a new MediaRecorder object in my component simply with

var mediaRecorder = new MediaRecorder(stream);

. Much appreciation to @firegloves for sharing the link that led me here and thank you, @Tiberiu C., for providing the answer. It made a significant difference.

Answer 2

After following the advice given in this thread, I found the solution to my issue was to make specific declarations in the typings.d.ts file:

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;

By implementing these declarations, I was able to instantiate a new MediaRecorder object in my component simply with

var mediaRecorder = new MediaRecorder(stream);

. Much appreciation to @firegloves for sharing the link that led me here and thank you, @Tiberiu C., for providing the answer. It made a significant difference.

Answer 3

Answer №2

Run the command `npm install -D @types/dom-mediacapture-record` to add the necessary types for DOM Media Capture Record.

Answer 4

Run the command `npm install -D @types/dom-mediacapture-record` to add the necessary types for DOM Media Capture Record.

Answer 5

Answer №3

Encountering a similar problem in my experience with using pure JS and React, I found that the issue was resolved by removing the line below:

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

Answer 6

Encountering a similar problem in my experience with using pure JS and React, I found that the issue was resolved by removing the line below:

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

The object MediaStreamRecorder is not able to be used as a constructor

Answer №1

Answer №2

Answer №3

Similar questions

Activate a function to focus on an input field once ngIf condition becomes true and the input is revealed

The import map is not being recognized by Supabase Edge Functions when passed in the command `npx supabase functions serve`

Unable to Reopen Bootstrap Modal Using Key After Closure

What are the best tools to develop a browser-based 2D top-down soccer simulation?

Utilizing Mongoose's Nested Arrays with ObjectId

Retrieving information from subscription

Passing conditional empty variables through `res.render`

The swipe motion will be executed two times

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

Sliding off the canvas - concealed navigation

Angular Kendo UI offers the ability to customize the way grid columns are sorted

Ways to identify local storage when a user visits the page for the first time using jQuery

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Create individual account pages with specific URLs in Next.js

What is the process for receiving notifications from Stack Overflow for new questions?

When attempting to create a generic key value interface, Typescript will throw an error if a mapped type is used that declares properties or methods

Tips on modifying the font color of specific text using javascript

Guide on how to streamline JSON output from aggregation result

PHP fails to retrieve data from a JavaScript Ajax function using the FormData object (specifically, when