如何在MVC项目中基于api.video实现录屏背景模糊效果？

api.video本身没有内置屏幕录制的背景模糊功能，你需要在前端获取屏幕流后先做模糊处理，再把处理后的流传给api.video进行录制/上传。以下是具体实现步骤：

1. 前端获取屏幕流并添加背景模糊 #

用浏览器的MediaDevices.getDisplayMedia获取原始屏幕流，通过Canvas对视频帧做模糊滤镜处理，再导出处理后的MediaStream：

// 获取屏幕流并添加模糊效果
async function getBlurredScreenStream() {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true // 需要录制音频则保留，否则设为false
  });

  // 创建视频元素承载原始流
  const videoEl = document.createElement('video');
  videoEl.srcObject = screenStream;
  videoEl.play();

  // 创建Canvas用于处理模糊
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 匹配视频尺寸
  videoEl.addEventListener('loadedmetadata', () => {
    canvas.width = videoEl.videoWidth;
    canvas.height = videoEl.videoHeight;
  });

  // 循环绘制视频帧并应用模糊滤镜
  function drawFrame() {
    if (!videoEl.paused && !videoEl.ended) {
      ctx.filter = 'blur(8px)'; // 可调整模糊程度，单位px
      ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(drawFrame);
    }
  }
  drawFrame();

  // 从Canvas导出处理后的流，30为帧率可调整
  return canvas.captureStream(30);
}

2. 将处理后的流传给api.video录制 #

用api.video的JavaScript SDK，把模糊处理后的流传入录制器：

import { VideoRecorder } from '@api.video/js-player';

// 初始化api.video录制器
const recorder = new VideoRecorder({
  container: document.getElementById('recorder-container'),
  video: {
    source: await getBlurredScreenStream() // 传入模糊流
  },
  credentials: {
    apiKey: 'YOUR_API_KEY' // 替换为你的api.video密钥
  }
});

// 开始录制
recorder.start();

// 停止录制并上传
document.getElementById('stop-record-btn').addEventListener('click', async () => {
  const video = await recorder.stop();
  // 将videoId传给MVC后端保存
  fetch('/Home/SaveVideoId', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ videoId: video.videoId })
  });
});

3. MVC后端配合处理 #

前端上传完成后会拿到api.video返回的videoId，后端可以做这些操作：

• 在Controller中接收videoId，保存到数据库
• 通过api.video的API（如GET /videos/{videoId}）获取视频播放链接、缩略图等信息，用于前端展示
• 配置api.video的Webhook，当视频处理完成后触发后端业务逻辑（如通知用户、生成视频报告）

注意事项 #

• 性能优化：背景模糊会增加GPU负载，低性能设备建议降低模糊程度（如blur(4px)）
• 浏览器兼容性：确保目标浏览器支持getDisplayMedia和Canvas的filter属性（Chrome、Firefox、Edge均支持，Safari需14.1+）
• 流格式兼容：Canvas导出的流默认是H.264编码，符合api.video的上传要求，无需额外转换

内容的提问来源于stack exchange，提问作者Sourav Paria