目录
一、背景：
二、具体解决方法
一、背景：
angular 调用 MediaRecorder 来使用麦克风获取声音，（具体要求：angular 前端 按键调用 麦克风，松开按键生成音频文件）代码如下（来自通义千问）
----- HTML ------------------
<button (mousedown)="startRecording()" (mouseup)="stopRecording()">Record</button>
<audio #audioPlayer controls></audio>
---- Typescrip -----------------------
import { Component, OnInit, ViewChild } from '@angular/core';
Component({
selector: 'app-recorder',
templateUrl: './recorder.component.html',
styleUrls: ['./recorder.component.css']
)
xport class RecorderComponent implements OnInit {
@ViewChild('audioPlayer') audioPlayer;
private chunks = [];
private mediaRecorder;
private stream;
constructor() {}
ngOnInit() {
// 请求麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
this.stream = stream;
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable.bind(this));
});
}
startRecording() {
this.mediaRecorder.start();
}
stopRecording() {
this.mediaRecorder.stop();
this.chunks = [];
this.stream.getTracks().forEach(track => track.stop());
}
handleDataAvailable(event) {
if (event.data.size > 0) {
this.chunks.push(event.data);
}
}
downloadBlob(blob: Blob) {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'recording.wav';
a.click();
window.URL.revokeObjectURL(url);
}
ngAfterViewInit() {
this.mediaRecorder.addEventListener('stop', () => {
const blob = new Blob(this.chunks, { type: 'audio/wav' });
this.downloadBlob(blob);
this.audioPlayer.nativeElement.src = URL.createObjectURL(blob);
});
}
}编译报错：Cannot find name 'MediaRecorder'
找了半天都说 MediaRecorder 是 Web API ，不存在依赖问题，只要在 tsconfig.json 上面配上 "lib": ["dom", "es2018"] 就可以了，试了还是不行
后面找到了一篇文章，说要加上 type 和 安装 @types/dom-mediacapture-record
【量角器单元测试角不适用于MediaRecorder：量角器单元测试角不适用于MediaRecorder-腾讯云开发者社区-腾讯云，
原文：Protractor unit tests Angular does not work with MediaRecorder：Protractor unit tests Angular does not work with MediaRecorder - Stack Overflow】
二、具体解决方法
以下只是我尝试之后，编译不再报错了的解决方法。本人对 angular 的各种属性还不太熟悉，所以只是把报错解决了，不一定能解决实际问题。
① 安装 @types/dom-mediacapture-record
npm install --save-dev @types/dom-mediacapture-record② tsconfig.json 加上 dom.iterable
"lib": ["dom", "dom.iterable", "es2018"],
③ tsconfig.app.json 加上 "types": ["node", "dom-mediacapture-record"]
④ 以 ssl 方式启动
ng serve --configuration=dev --port 4205 --host 0.0.0.0 -o ---ssl true
