17370845950

需先用 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);
  // 可赋给 

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()，避免因未加载完而失败

播放

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.

• 必须用 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() 之后的兜底逻辑。