JavaScript音视频处理依赖浏览器原生API，核心包括HTMLMediaElement播放控制、Web Audio API精细音频处理、MediaRecorder客户端录制及WebRTC/MediaStream实时流处理，需注意兼容性、权限与HTTPS要求。
JavaScript 处理音视频主要依靠浏览器原生 API，不需要额外插件，但需注意兼容性和权限要求。核心能力包括播放控制、元数据获取、实时处理（如音视频分析、滤镜）、录制和流式传输。
HTMLMediaElement：基础播放与控制
所有 <audio></audio> 和 <video></video> 元素都继承自 HTMLMediaElement，提供统一接口：
-
播放控制：
play()、pause()、load()、canPlayType(type) -
状态监听：监听
loadedmetadata、canplay、timeupdate、ended等事件 -
属性操作：读写
currentTime、volume、muted、paused、duration、buffered -
静音自动播放适配：现代浏览器限制自动播放带声音的媒体，建议设置
muted=true再调用play()
Web Audio API：精细音频处理
用于低延迟、高精度的音频合成、分析与效果处理，适合音乐应用、可视化、语音处理等场景：
- AudioContext 是入口，类似 canvas 的 context，管理音频节点图
-
常见节点类型：
AudioBufferSourceNode（播放预加载音频）、GainNode（音量控制）、BiquadFilterNode（均衡/滤波）、AnalyserNode（FFT 频谱或时域数据）、MediaElementAudioSourceNode（把<audio></audio>接入 Web Audio） -
实时分析示例：用
analyser.getByteFrequencyData()获取频谱，配合requestAnimationFrame做动态可视化
MediaRecorder API：客户端录制音视频
可将媒体流（如摄像头+麦克风）直接录制为 Blob，支持 WebM、MP4（取决于浏览器）：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“Java免费学习笔记（深入）”；
- 先用
navigator.mediaDevices.getUserMedia({video: true, audio: true})获取流 - 创建
MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9,opus'}) - 监听
dataavailable事件收集blob，合并后可下载或上传 - 注意：iOS Safari 对
MediaRecorder支持有限（仅部分版本支持 video），录音更稳定
WebRTC 与 MediaStream API：实时通信与流处理
不只是“视频通话”，MediaStream 是处理音视频流的核心抽象：
-
getUserMedia()获取本地音视频流 -
getDisplayMedia()录制屏幕（需用户授权） -
stream.getVideoTracks()[0].applyConstraints()动态调整分辨率、帧率、缩放等 -
canvas.captureStream(fps)将 Canvas 动画转为视频流，可用于录屏或合成 - 配合
RTCPeerConnection可实现 P2P 传输，但复杂度高，一般用成熟信令服务
基本上就这些。实际项目中常组合使用：比如用 getUserMedia 拿流 → 接入 MediaRecorder 录制 → 同时用 AnalyserNode 做音频可视化。注意权限、HTTPS 要求、移动端行为差异，测试时多用真实设备。
