JavaScript通过WebRTC、MediaRecorder、Web Audio API等实现音视频处理：首先用getUserMedia获取摄像头和麦克风输入并预览；利用MediaRecorder录制流为WebM/MP4文件；通过RTCPeerConnection建立点对点连接实现音视频通信，需自行处理信令交换；使用Web Audio API进行音频分析与可视化；接收的远程流赋值给video元素播放，结合HLS.js或MSE可支持H.264等流媒体格式；需注意权限请求与浏览器兼容性问题。
JavaScript 在现代浏览器中可以通过多种 API 实现音视频处理与流媒体操作，主要依赖于 WebRTC、MediaRecorder API、Web Audio API 和 HTMLMediaElement 等技术。以下是关键操作和实现方式。
获取音视频输入（摄像头和麦克风）
使用 getUserMedia() 可以请求用户授权访问摄像头和麦克风设备。
示例代码：async function getMedia() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
document.getElementById('video').srcObject = stream;
} catch (err) {
console.error("无法获取媒体设备:", err);
}
}
将获取的 MediaStream 赋值给 video 元素的 srcObject，即可实时预览。
录制音视频（MediaRecorder API）
MediaRecorder 接口可以将 MediaStream 录制成文件，支持 WebM 或 MP4（取决于浏览器编码支持）。
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 创建 MediaRecorder 实例并监听 dataavailable 事件收集数据
- 通过 stop() 触发录制完成并生成 Blob 文件
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);
const a = document.createElement('a');
a.href = url;
a.download = 'record.webm';
a.click();
};
// 开始录制
mediaRecorder.start();
// 停止录制（2秒后示例）
setTimeout(() => mediaRecorder.stop(), 2000);
实时音视频通信（WebRTC）
WebRTC 支持点对点音视频通话，核心是 RTCPeerConnection。
基本流程：- 创建 RTCPeerConnection 实例
- 添加本地流：peerConnection.addStream(stream)
- 交换信令（SDP offer/answer）通过 WebSocket 或其他通道传输
- 处理 ICE 候选并添加远程候选
const pc = new RTCPeerConnection(); // 添加本地流 pc.addStream(localStream); // 创建 Offer pc.createOffer().then(offer => pc.setLocalDescription(offer)); // 远程 SDP 设置 pc.setRemoteDescription(new RTCSessionDescription(remoteSdp));
注意：需自行搭建信令服务器来传递连接信息，WebRTC 不提供信令机制。
音频处理（Web Audio API）
若需对音频进行滤波、分析或可视化，可使用 Web Audio API。
例如：从音频流中获取频谱数据const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
// 可用于绘制频谱图
}
播放与控制远程流媒体
对于接收的远程流（如来自 WebRTC 的远端视频），同样赋值给 video 元素：
pc.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
也可以结合 HLS.js 或 MSE（Media Source Extensions）播放 H.264 流等高级格式：
- HLS.js 可在不支持原生 HLS 的浏览器中播放 .m3u8 流
- MSE 允许 JavaScript 动态拼接视频片段并喂给
