17370845950

JavaScript媒体API核心是按场景选用合适接口：HTMLMediaElement控制嵌入音视频，MediaDevices采集流，MediaRecorder录制，Web Audio精细处理。

JavaScript 的媒体 API 主要通过 和 元素的原生方法与事件，配合 MediaDevices、MediaRecorder、AudioContext 等接口实现控制、捕获和处理音视频。核心不在于“调用某个函数”，而在于理解不同场景下该用哪套 API。

控制页面内嵌音视频（HTMLMediaElement）

这是最常用场景：播放、暂停、调节音量、监听播放状态等。所有 和 元素都继承自 HTMLMediaElement 接口。

• 基础操作直接调用方法：play()、pause()、load()；设置属性如 volume = 0.8（0–1）、muted = true、currentTime = 30（跳转到第30秒）
• 监听关键事件：loadedmetadata（元信息加载完成）、canplay（可开始播放）、timeupdate（播放时间变化）、ended（播放结束）、error（加载或解码失败）
• 注意：移动端自动播放受限制，需用户手势触发（如点击按钮后调用 play()），否则可能静音播放或直接拒绝

获取用户摄像头与麦克风（MediaDevices.getUserMedia）

用于视频通话、录屏、语音识别等需要实时采集的场景。

• 调用 navigator.mediaDevices.getUserMedia({ video: true, audio: true }) 返回 Promise，成功后得到 MediaStream
• 把流赋给 元素：video.srcObject = stream（注意不是 src）即可实时显示画面和声音
• 需处理权限拒绝（NotAllowedError）、设备不可用（NotFoundError）等异常；建议先用 enumerateDevices() 检查可用设备列表

录制音视频（MediaRecorder API）

在浏览器中直接录制用户媒体流为 Blob（如 MP4、WebM），适合轻量级录屏/录音功能。

• 用 getUserMedia 获取流后，传入 new MediaRecorder(stream) 创建录制器
• 监听 dataavailable 事件获取每段录制数据（event.data 是 Blob），拼接后可下载或上传
• 支持设置 mimeType（如 'video/webm;codecs=vp9'），但兼容性需测试；iOS Safari 对 MediaRecorder 支持有限（仅部分 iOS 16.4+）

音频可视化与处理（Web Audio API）

当需要频谱分析、音效处理、合成音频时，用 AudioContext 替代简单播放。

• 创建上下文：const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
• 将媒体元素接入音频图：const source = audioCtx.createMediaElementSource(videoOrAudioEl)，再连接 analyser 节点做 FFT 分析，或连 gainNode 控制音量
• 从 analyser.frequencyBinCount 读取频域数据，配合 requestAnimationFrame 实现实时波形或频谱图

实际项目中往往组合使用：比如用 getUserMedia 获取流 → 用 MediaRecorder 录制 → 用 AudioContext 对录制后的音频做降噪处理。关键是根据需求选对入口——展示用 HTMLMediaElement，采集用 MediaDevices，录制用 MediaRecorder，精细控制用 Web Audio。