JavaScript媒体流技术通过WebRTC和Media Capture API实现音视频实时处理。首先调用navigator.mediaDevices.getUserMedia请求摄像头或麦克风权限，传入constraints指定音频、视频类型，如高清视频或前后置摄像头。获取MediaStream后，可绑定到video元素实现实时预览。结合canvas可截取视频帧生成图片，利用Web Audio API可分析音频。使用MediaRecorder API能录制流并保存为Blob，通过ondataavailable收集数据块，stop后合并为文件。若需传输，则用RTCPeerConnection建立点对点连接，经SDP协商和ICE候选实现低延迟通信。整个流程包括获取、处理、显示/录制/传输三阶段，需注意权限、兼容性及信令机制实现。
JavaScript媒体流处理技术让网页可以直接访问用户的摄像头、麦克风等设备，并对音视频流进行实时处理和传输。这项能力主要依赖于浏览器提供的WebRTC（Web Real-Time Communication）和Media Capture and Streams API，是实现实时通信、视频会议、直播录制等功能的核心。
获取媒体流：使用navigator.mediaDevices.getUserMedia
要开始处理媒体流，第一步是获取用户设备的音视频输入权限。通过调用 navigator.mediaDevices.getUserMedia() 方法，可以请求访问摄像头或麦克风。
该方法接收一个约束对象（constraints），用于指定需要的媒体类型：
-
音频流：
{ audio: true } -
视频流：
{ video: true } -
高清视频：
{ video: { width: 1280, height: 720 } } -
前置/后置摄像头（移动端）：
{ video: { facingMode: "user" } }或"environment"
示例代码：
立即学习“Java免费学习笔记（深入）”；
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('video').srcObject = stream;
} catch (err) {
console.error("无法访问媒体设备:", err);
}
}
媒体流的处理与操作
获取到 MediaStream 后，可以通过多种方式对其进行处理，包括录制、合成、添加特效等。
- 视频预览：将流绑定到 <video> 元素的 srcObject 属性即可实时播放。
- 截图功能：结合 <canvas> 可以从视频流中提取某一帧作为图像。
- 音频分析：配合 Web Audio API，可对音频流进行频谱分析或降噪处理。
截图示例：
function capturePhoto() {
const video = document.getElementById('video');
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
return canvas.toDataURL('image/png'); // 返回 base64 图片
}
录制与上传媒体流
使用 MediaRecorder API 可以直接在浏览器中录制音视频流，并将数据保存为 Blob 对象。
常见步骤：
- 创建 MediaRecorder 实例，传入 MediaStream
- 监听 dataavailable 事件收集录制的数据块
- 停止录制后合并所有数据并生成文件
示例代码：
立即学习“Java免费学习笔记（深入）”；
let chunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
chunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
// 可用于下载或上传到服务器
};
// 开始录制
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 5000); // 录制5秒
流的传输与网络通信（WebRTC）
若需将媒体流发送给其他用户，可使用 WebRTC 技术建立点对点连接。核心组件包括：
- RTCPeerConnection：管理两个客户端之间的音视频传输
- SDP 协商：通过 offer/answer 模型交换会话描述信息
- ICE 候选：处理 NAT 穿透和网络连接发现
虽然信令机制（如 WebSocket）需自行实现，但一旦连接建立，媒体流就能高效低延迟地传输。
基本上就这些。掌握 JavaScript 媒体流处理技术，能让你构建出功能丰富的实时互动应用，从简单的视频聊天到复杂的在线教育平台都可实现。关键是理解流的生命周期：获取 → 处理 → 显示/录制/传输。不复杂但容易忽略细节，比如权限处理和兼容性问题。
