JavaScript实时视频处理与MediaStream教程

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript实时视频编辑与MediaStream处理指南》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

首先通过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();

这将把摄像头的实时画面显示在元素中，形成原始输入流。

实时视频处理：通过Canvas进行帧编辑

要在浏览器中实现“视频编辑”，比如添加滤镜、水印或边缘检测，可以借助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具备了浏览器内实时视频编辑的能力，无需依赖原生应用。虽然性能受限于设备和编码效率，但对于大多数轻量级实时处理需求已足够实用。

好了，本文到此结束，带大家了解了《JavaScript实时视频处理与MediaStream教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！