首先通过navigator.mediaDevices.getUserMedia获取摄像头流并显示在video元素中，接着利用Canvas逐帧绘制视频内容并应用灰度滤镜等处理，再通过canvas.captureStream生成新的MediaStream用于实时播放或交由MediaRecorder录制为文件，最后可结合WebGL或TensorFlow.js实现更复杂的GPU加速处理或AI视觉功能，整个流程实现浏览器内完整的实时视频捕获、编辑与输出。
在现代Web应用中，实时视频处理已成为越来越重要的功能，尤其是在视频会议、直播推流、滤镜应用和AI视觉交互等场景中。JavaScript结合MediaStream API为开发者提供了强大的能力来捕获、操作和传输音视频流，实现浏览器内的实时视频编辑。
获取媒体流：使用navigator.mediaDevices.getUserMedia
要开始处理视频流，第一步是获取用户的摄像头和麦克风权限。MediaStream API通过getUserMedia()方法实现这一功能。
示例代码：
const video = document.querySelector('video');
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false
});
video.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
}
}
startCamera();
这将把摄像头的实时画面显示在<video>元素中，形成原始输入流。
立即学习“Java免费学习笔记（深入）”；
实时视频处理：通过Canvas进行帧编辑
要在浏览器中实现“视频编辑”，比如添加滤镜、水印或边缘检测，可以借助Canvas逐帧绘制并修改视频内容。
基本思路是：
- 将
<video>中的每一帧绘制到<canvas> - 使用Canvas 2D上下文对图像数据进行处理（如灰度、反色、模糊等）
- 从canvas提取新的MediaStream用于播放或录制
示例：实时灰度滤镜
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('video');
const processedVideo = document.querySelector('#processed');
function applyFilter() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = frame.data;
// 转为灰度
for (let i = 0; i < data.length; i += 4) {
const gray = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = gray; // R
data[i+1] = gray; // G
data[i+2] = gray; // B
}
ctx.putImageData(frame, 0, 0);
// 将canvas输出为MediaStream
const stream = canvas.captureStream(30); // 30 FPS
processedVideo.srcObject = stream;
}
// 每16ms执行一次（约60fps）
setInterval(applyFilter, 16);
输出与录制：使用MediaRecorder保存处理后的流
经过处理的MediaStream可以用于实时播放，也可以用MediaRecorder API录制为文件。
示例：录制带滤镜的视频
let recordedChunks = [];
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
recorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'filtered-video.webm';
a.click();
};
// 开始录制
recorder.start();
setTimeout(() => recorder.stop(), 5000); // 录制5秒
高级处理：集成WebGL或TensorFlow.js
对于更复杂的视频编辑任务，如背景替换、人脸美颜或对象识别，可结合WebGL（通过Three.js或PixiJS）或机器学习模型（如TensorFlow.js）进行GPU加速处理。
例如，使用TensorFlow.js的人体分割模型，可以从摄像头流中分离人物并替换背景，再将结果渲染到canvas并生成新流。
这类处理仍遵循相同模式：捕获 → 分析/修改帧 → 合成新MediaStream。
基本上就这些。MediaStream API配合Canvas和相关工具，让JavaScript具备了浏览器内实时视频编辑的能力，无需依赖原生应用。虽然性能受限于设备和编码效率，但对于大多数轻量级实时处理需求已足够实用。
