如何设置video标签中摄像头流内容的精确300×300尺寸？

嘿，这个问题我太熟悉了！出现空白的核心原因是摄像头采集的视频有固定宽高比（比如常见的4:3或16:9），而你强制把video标签设为300×300的正方形，浏览器为了保持视频的原始比例，就会自动添加空白填充。下面给你两个可行的解决方案：

方案一：让摄像头直接采集正方形分辨率的视频流 #

最理想的方式是让摄像头输出和你需要的尺寸匹配的流，这样就不会有多余的空白。你可以修改getUserMedia的配置，指定精确的宽高要求：

var video = document.getElementById('video') as any;
// 修改mediaConfig，指定正方形分辨率
var mediaConfig = {
  video: {
    width: { exact: 300 },
    height: { exact: 300 }
  }
};

navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
  video.srcObject = stream; // 注意：现在更推荐用srcObject代替createObjectURL
  video.play();
}, (e) => { console.log('An error has occurred!', e) });

注意事项： #

• 不是所有摄像头都支持任意分辨率，如果exact设置的尺寸不被支持，会抛出错误。你可以改用ideal来设置优先尺寸，同时搭配min和max做兼容：

  var mediaConfig = {
    video: {
      width: { ideal: 300, min: 200, max: 400 },
      height: { ideal: 300, min: 200, max: 400 }
    }
  };
  

• 另外，window.URL.createObjectURL(stream)已经被逐步废弃，现在更推荐使用video.srcObject = stream，兼容性更好。

方案二：用CSS裁剪视频填满容器 #

如果你的摄像头不支持正方形分辨率，那就通过容器裁剪的方式，让视频铺满300×300的区域：

修改HTML结构： #

<!-- 用一个固定尺寸的容器包裹video -->
<div style="width: 300px; height: 300px; overflow: hidden; position: relative;">
  <video id="video" autoplay style="position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);"></video>
</div>

原理： #

• 容器设置为300×300并隐藏溢出内容；
• video设置min-width和min-height为100%，确保视频至少能覆盖容器；
• 通过transform: translate(-50%, -50%)让视频居中，裁剪掉超出容器的部分，这样视觉上就完全填满了300×300的区域。

总结 #

优先尝试方案一，因为直接采集对应比例的视频流效率更高，也不会损失画面内容；如果摄像头不支持正方形分辨率，再用方案二的裁剪方式来实现视觉上的正方形效果。

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