首先通过navigator.mediaDevices.getUserMedia获取摄像头视频流并预览；接着利用Canvas对视频帧进行实时滤镜或像素处理，并通过captureStream生成新MediaStream；最后结合MediaRecorder API录制处理后的视频流，实现前端视频采集、加工与保存的完整流程。
在现代网页开发中，JavaScript 结合 MediaStream API 实现视频处理已成为实现音视频采集、传输与实时处理的核心技术。通过浏览器原生支持的 MediaStream API，开发者可以直接从摄像头或屏幕捕获视频流，并进行录制、转发、滤镜添加等操作，无需依赖插件。
获取视频流：使用 navigator.mediaDevices.getUserMedia
要开始处理视频，第一步是获取用户的媒体输入设备（如摄像头）的访问权限。这通过 navigator.mediaDevices.getUserMedia() 方法完成。
该方法接收一个约束对象（constraints），用于指定需要的媒体类型和参数：
- 调用
getUserMedia({ video: true })可请求开启摄像头获取视频流。 - 可进一步设置分辨率：
{ video: { width: 1280, height: 720 } }。 - 返回一个 Promise，成功时提供 MediaStream 对象，可赋值给
<video>元素的 srcObject 进行预览。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
console.error("无法访问摄像头：", err);
});
实时处理视频流：结合 Canvas 和 MediaStreamTrack
获取原始视频流后，可以利用 Canvas 实现实时画面处理，例如添加滤镜、水印或边缘检测，再将处理后的帧重新打包为新的 MediaStream 用于录制或推流。
- 使用
requestAnimationFrame持续从视频元素绘制到 Canvas。 - 通过
canvas.captureStream(fps)创建一个新的 MediaStream，包含处理后的视频轨道。 - 可在绘制过程中应用 CSS 滤镜或使用 getImageData/putImageData 进行像素级操作。
应用场景包括灰度化、模糊、翻转画面等视觉效果处理。
录制与输出：配合 MediaRecorder API
处理后的 MediaStream 可以传递给 MediaRecorder 进行本地录制或上传服务器。
- 创建 MediaRecorder 实例：
new MediaRecorder(processedStream)。 - 监听
dataavailable事件收集 Blob 数据块。 - 停止录制后，将所有 Blob 合并为完整视频文件，可通过 URL.createObjectURL 预览或上传。
适合构建录屏工具、在线教学录制、前端美颜相机等功能。
基本上就这些。MediaStream API 提供了强大而灵活的视频处理能力，配合 Canvas 和 MediaRecorder，能在纯前端完成复杂的视频采集与加工流程。只要注意用户权限管理和浏览器兼容性，就能稳定运行在大多数现代浏览器中。
