Angular 浏览器录音

Question

I found an example of how to setup an angular app to record audio here: https://medium.com/@coolchoudharyvijay/use-mic-in-angular-to-record-audio-simplified-1374d89718d3

works like a charm locally, but when I build it and throw it on a server, I get this error: ERROR TypeError: Cannot read properties of undefined (reading 'getUserMedia') and ERROR TypeError: Cannot read properties of undefined (reading 'stop')

any ideas why it would work locally but not on a server?

here's the type script code (which can also be found in the article link above):

import { Component } from '@angular/core';
declare var $: any;
import * as RecordRTC from 'recordrtc';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'micRecorder';
//Lets declare Record OBJ
record;
//Will use this flag for toggeling recording
recording = false;
//URL of Blob
url;
error;
constructor(private domSanitizer: DomSanitizer) {}
sanitize(url: string) {
return this.domSanitizer.bypassSecurityTrustUrl(url);
}
/**
* Start recording.
*/
initiateRecording() {
this.recording = true;
let mediaConstraints = {
video: false,
audio: true
};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(this.successCallback.bind(this), this.errorCallback.bind(this));
}
/**
* Will be called automatically.
*/
successCallback(stream) {
var options = {
mimeType: "audio/wav",
numberOfAudioChannels: 1,
sampleRate: 16000,
};
//Start Actuall Recording
var StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
this.record = new StereoAudioRecorder(stream, options);
this.record.record();
}
/**
* Stop recording.
*/
stopRecording() {
this.recording = false;
this.record.stop(this.processRecording.bind(this));
}
/**
* processRecording Do what ever you want with blob
* @param  {any} blob Blog
*/
processRecording(blob) {
this.url = URL.createObjectURL(blob);
console.log("blob", blob);
console.log("url", this.url);
}
/**
* Process Error.
*/
errorCallback(error) {
  this.error = 'Can not play audio in your browser';
}
ngOnInit() {}
}

Answer 1

It should be constraints and not mediaConstraints , see the documentation