通过MediaDevices.getUserMedia()在HTTPS环境下获取音视频流，需用户授权；2. 使用MediaStream操作音视频轨道，支持动态增删与设备切换；3. Web Audio API实现音频分析与处理；4. RTCPeerConnection结合信令服务器建立WebRTC实时通信。
JavaScript在现代网页中处理音频和视频流的能力越来越强，主要依赖于Web APIs如MediaDevices、MediaStream、AudioContext和RTCPeerConnection。这些技术让浏览器可以直接采集、处理和传输音视频数据，广泛应用于视频会议、直播、语音识别等场景。
1. 获取音视频流：MediaDevices.getUserMedia()
要从用户的摄像头或麦克风获取媒体流，核心方法是navigator.mediaDevices.getUserMedia()。它接收一个约束对象（constraints），指定需要的媒体类型。
例如，请求视频和音频：
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
.then(stream => {
const video = document.querySelector('video');
video.srcObject = stream;
})
.catch(err => {
console.error("无法获取媒体流：", err);
});
也可以指定更详细的参数，比如分辨率：
立即学习“Java免费学习笔记（深入）”；
{
video: {
width: { ideal: 1280 },
height: { ideal: 720 }
},
audio: true
}
注意：该操作必须在安全上下文（HTTPS）中运行，且用户需明确授权。
2. 媒体流处理：MediaStream 与 Track 操作
MediaStream代表一个媒体流，包含多个MediaStreamTrack（音轨或视轨）。可以通过stream.getAudioTracks()和stream.getVideoTracks()分别获取轨道。
常见操作包括：
- 关闭轨道：
track.stop()—— 释放摄像头或麦克风 - 切换设备：通过
enumerateDevices()列出可用设备，并重新获取流 - 动态替换轨道：在已建立的连接中更换摄像头源，适用于多摄像头切换
示例：仅开启音频，后续添加视频：
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
const combinedStream = new MediaStream();
audioStream.getAudioTracks().forEach(track => combinedStream.addTrack(track));
videoStream.getVideoTracks().forEach(track => combinedStream.addTrack(track));
videoElement.srcObject = combinedStream;
3. 音频高级处理：Web Audio API
若需对音频进行滤波、分析或可视化，可使用Web Audio API。它能将MediaStream接入音频上下文进行实时处理。
基本流程：
const audioCtx = new AudioContext(); const source = audioCtx.createMediaStreamSource(mediaStream); const analyzer = audioCtx.createAnalyser(); source.connect(analyzer); // 可连接更多节点，如增益、滤波器等
利用analyzer可以获取频域或时域数据，实现声谱图、音量检测等功能。
4. 实时通信：WebRTC 简要流程
在多方音视频通话中，通常使用RTCPeerConnection传输流。关键步骤包括：
- 获取本地流并添加到
RTCPeerConnection - 创建offer/answer SDP协商
- 收集ICE候选并交换，建立P2P连接
简化代码示例：
const pc = new RTCPeerConnection();
localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
pc.createOffer().then(offer => pc.setLocalDescription(offer))
.then(() => {
// 发送offer给对方
});
实际项目中常配合信令服务器（如WebSocket）完成SDP交换。
基本上就这些。掌握这些基础API后，就能构建出功能完整的音视频应用。关键是理解流的生命周期、权限控制和跨设备兼容性问题。不复杂但容易忽略细节。
