需先用 getusermedia 获取媒体流并确保含音视频轨道，再创建 mediarecorder；播放须用户手势触发；音频分析需通过 mediaelementsourcenode 接入 analysernode；getsettings() 可能返回空对象，应优先用 getcapabilities() 探测能力。
怎么用 MediaRecorder 录制麦克风或摄像头流？
直接调用 MediaRecorder 前必须先拿到媒体流（MediaStream），否则会报 TypeError: Failed to construct 'MediaRecorder': No media tracks provided。
常见错误是只调用了 navigator.mediaDevices.getUserMedia() 却没等它 resolve 就初始化 MediaRecorder。
- 必须确保
stream.getAudioTracks().length > 0或stream.getVideoTracks().length > 0，否则MediaRecorder构造失败 - 录制前要调用
mediaRecorder.start()；不传参数默认每秒触发一次dataavailable事件，传毫秒数（如1000）可控制分片间隔 - Chrome 和 Edge 支持
audio/webm、video/webm；Safari 仅支持audio/mp4（且需 iOS 16.4+ / macOS 13.3+）
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const mediaRecorder = new MediaRecorder(stream);
const chunks = [];
mediaRecorder.ondataavailable = e => chunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
// 可赋给 <video src> 或上传
};
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 5000); // 录 5 秒
HTMLMediaElement 的 play() 为什么经常失败？
现代浏览器强制要求用户手势（click/tap）触发播放，否则 play() 返回 Promise 并 reject：DOMException: play() failed because the user didn't interact with the document first.
- 不能在页面加载完成（
DOMContentLoaded）或定时器（setTimeout）里直接调用play() - 自动播放策略还跟媒体是否含音频有关：静音视频（
muted+autoplay）通常允许，但带声音的必须由用户显式触发 - 检查
video.readyState≥ 2（HAVE_ENOUGH_DATA）再调用play()，避免因未加载完而失败
<video id="myVideo" muted autoplay></video>
<button id="playBtn">播放</button>
const video = document.getElementById('myVideo');
document.getElementById('playBtn').addEventListener('click', async () => {
try {
await video.play(); // 必须在用户 click 内调用
} catch (e) {
console.error('播放失败:', e.message);
}
});
如何用 Web Audio API 实时分析音频频谱？
核心是把 HTMLMediaElement 接入 AudioContext，再用 AnalyserNode 提取频率数据。跳过 MediaElementAudioSourceNode 直接连 AudioContext 会报错：InvalidStateError: Cannot use a source node after it has been disconnected or destroyed.
立即学习“Java免费学习笔记（深入）”；
- 必须用
context.createMediaElementSource(video)创建源节点，不能用context.createBufferSource() -
analyser.fftSize决定频点数量（必须是 2 的幂，如 256/512/1024），越大分辨率越高但开销越大 - 调用
analyser.getByteFrequencyData(array)前，array 长度必须等于analyser.frequencyBinCount - 注意内存泄漏：监听
requestAnimationFrame时，若视频销毁未清理，analyser仍会持续运行
const context = new (window.AudioContext || window.webkitAudioContext)();
const analyser = context.createAnalyser();
analyser.fftSize = 512;
const source = context.createMediaElementSource(video);
source.connect(analyser);
analyser.connect(context.destination);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
analyser.getByteFrequencyData(dataArray);
// dataArray[0] 是最低频，dataArray[bufferLength-1] 是最高频
requestAnimationFrame(draw);
}
draw();
为什么 MediaStreamTrack.getSettings() 返回空对象？
该方法返回的是轨道实际生效的设置，不是请求时传的约束（constraints）。如果浏览器无法满足约束（比如请求 1080p 但摄像头只支持 720p），它会降级并返回最终使用的值——但某些旧版本 Chrome 或 Safari 会直接返回空对象而非真实配置。
- 应优先用
track.getCapabilities()查看硬件支持范围，再用track.applyConstraints()尝试设置 -
getSettings()在track.enabled === false时可能不可靠，建议在track.onstarted后调用 - 部分安卓 WebView 不支持
getSettings()，需降级为检测track.kind和粗略分辨率（如track.label.includes('1080p')）
真正稳定的设备能力探测，得组合使用 getCapabilities()、applyConstraints() 的 Promise 状态、以及 fallback 到 getSettings() 之后的兜底逻辑。
