移动端浏览器使用getUserMedia时，实现仅缩放视频流并捕获缩放后画面的问题

我完全懂你的困扰——在桌面端用getUserMedia调用摄像头一切正常，但到了移动端，双指缩放会把整个页面都放大，你只想让视频框单独缩放，还得能把缩放后的画面准确捕获下来。这确实是移动端浏览器的默认行为导致的问题，我们需要手动拦截页面的默认缩放，自己实现视频的缩放交互，再调整画布捕获逻辑来适配缩放后的区域。

下面是一步步的解决方案：

第一步：禁止页面整体缩放，给视频添加自定义缩放交互 #

首先得阻止浏览器默认的页面缩放行为，同时给视频元素加上触摸事件监听，实现双指缩放和单指拖动（可选）的功能。

1. 配置Viewport确保页面初始状态正确 #

在HTML的<head>里添加这个meta标签，锁定初始缩放并禁止用户默认缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2. 添加视频缩放状态变量和交互逻辑 #

在你的JavaScript代码里新增变量存储视频的缩放比例、偏移量，然后监听视频的触摸事件：

// 新增状态变量，存储视频的缩放和偏移信息
const videoScale = useRef(1);
const videoOffsetX = useRef(0);
const videoOffsetY = useRef(0);
let initialDistance = 0;
let initialScale = 1;
let initialOffsetX = 0;
let initialOffsetY = 0;

// 初始化视频的触摸交互（缩放+拖动）
const setupVideoInteractions = () => {
  const video = cameraVideoStream.current;
  if (!video) return;

  // 触摸开始时记录初始状态
  video.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
      // 计算双指初始距离
      initialDistance = Math.hypot(
        e.touches[0].clientX - e.touches[1].clientX,
        e.touches[0].clientY - e.touches[1].clientY
      );
      initialScale = videoScale.current;
    } else if (e.touches.length === 1) {
      // 记录单指拖动的初始位置
      initialOffsetX = e.touches[0].clientX - videoOffsetX.current;
      initialOffsetY = e.touches[0].clientY - videoOffsetY.current;
    }
    e.preventDefault(); // 阻止事件冒泡，避免触发页面默认行为
  });

  // 触摸移动时更新缩放/偏移
  video.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2) {
      const currentDistance = Math.hypot(
        e.touches[0].clientX - e.touches[1].clientX,
        e.touches[0].clientY - e.touches[1].clientY
      );
      // 限制缩放范围：最小1倍，最大3倍（可自行调整）
      videoScale.current = Math.min(3, Math.max(1, initialScale * (currentDistance / initialDistance)));
      updateVideoTransform();
    } else if (e.touches.length === 1) {
      // 更新单指拖动的偏移量
      videoOffsetX.current = e.touches[0].clientX - initialOffsetX;
      videoOffsetY.current = e.touches[0].clientY - initialOffsetY;
      updateVideoTransform();
    }
    e.preventDefault();
  });
};

// 把缩放和偏移应用到视频元素的CSS上
const updateVideoTransform = () => {
  const video = cameraVideoStream.current;
  if (!video) return;
  video.style.transform = `translate(${videoOffsetX.current}px, ${videoOffsetY.current}px) scale(${videoScale.current})`;
  video.style.transformOrigin = 'center center';
};

3. 在摄像头启动后启用交互 #

修改你的startCamera函数，在视频加载完成后调用交互初始化函数：

// 在startCamera的then回调里，loadedmetadata事件中添加：
cameraVideoStream.current.addEventListener('loadedmetadata', () => {
  if (cameraVideoStream.current) {
    cameraVideoStream.current.play();
    setupVideoInteractions(); // 启用视频的缩放拖动交互
  }
});

第二步：修改画布捕获逻辑，适配缩放后的视频 #

现在视频能单独缩放了，但原来的捕获代码还是会抓整个视频流，我们需要根据缩放比例和偏移量，计算出用户看到的区域，再绘制到画布上。

修改你的捕获代码如下：

if (canvasRef.current) {
  const canvasContext = canvasRef.current.getContext('2d');
  if (canvasContext && cameraVideoStream.current) {
    const video = cameraVideoStream.current;
    // 保持画布尺寸和窗口一致（可根据需求调整）
    canvasRef.current.width = window.innerWidth;
    canvasRef.current.height = window.innerHeight;

    // 计算视频的基础适配参数（和你原来的逻辑一致）
    const videoNaturalWidth = video.videoWidth;
    const videoNaturalHeight = video.videoHeight;
    const videoAspect = videoNaturalWidth / videoNaturalHeight;
    const canvasAspect = canvasRef.current.width / canvasRef.current.height;
    
    let baseRenderWidth, baseRenderHeight, baseOffsetX = 0, baseOffsetY = 0;
    if (videoAspect > canvasAspect) {
      baseRenderHeight = canvasRef.current.height;
      baseRenderWidth = baseRenderHeight * videoAspect;
      baseOffsetX = -(baseRenderWidth - canvasRef.current.width) / 2;
    } else {
      baseRenderWidth = canvasRef.current.width;
      baseRenderHeight = baseRenderWidth / videoAspect;
      baseOffsetY = -(baseRenderHeight - canvasRef.current.height) / 2;
    }

    // 结合缩放比例和偏移量，计算实际要绘制的区域
    const scaleFactor = videoScale.current;
    // 调整画布上的绘制偏移
    const adjustedOffsetX = baseOffsetX - (videoOffsetX.current * scaleFactor);
    const adjustedOffsetY = baseOffsetY - (videoOffsetY.current * scaleFactor);
    // 调整绘制尺寸
    const scaledRenderWidth = baseRenderWidth * scaleFactor;
    const scaledRenderHeight = baseRenderHeight * scaleFactor;

    // 处理前置摄像头镜像（保留你原来的逻辑）
    if (cameraMode === 'front') {
      canvasContext.translate(canvasRef.current.width, 0);
      canvasContext.scale(-1, 1);
    }

    // 绘制缩放后的视频区域到画布
    canvasContext.drawImage(
      video,
      // 视频源的裁剪区域：根据缩放比例截取对应部分
      (videoOffsetX.current * videoNaturalWidth) / (video.offsetWidth * scaleFactor),
      (videoOffsetY.current * videoNaturalHeight) / (video.offsetHeight * scaleFactor),
      videoNaturalWidth / scaleFactor,
      videoNaturalHeight / scaleFactor,
      // 画布上的绘制位置和尺寸
      adjustedOffsetX,
      adjustedOffsetY,
      scaledRenderWidth,
      scaledRenderHeight
    );

    const data = canvasRef.current.toDataURL('image/png');
    stopCamera();
  }
}

第三步：额外优化建议 #

• 可以给视频元素添加CSS属性touch-action: none，进一步禁止浏览器默认的触摸行为：

#camera-video {
  touch-action: none;
}

• 单指拖动时可以限制偏移范围，避免视频完全移出画布，比如判断偏移后视频的边缘不超出画布边界。
• 测试时注意不同移动端浏览器的兼容性，部分浏览器可能需要额外的事件兼容处理。

这样修改后，移动端用户双指缩放时只会作用于视频元素，捕获的画面也会是缩放后的内容，不会再影响整个页面了。

备注：内容来源于stack exchange，提问作者Gaurav Mehta