Chrome全屏及Electron环境下<video>宽高受限导致画面挤压问题

根因 #

该问题是Chromium内核（Chrome、Electron均基于该内核）的媒体渲染优化机制导致：当页面处于全屏状态，或是运行在Electron这类原生桌面容器中时，为了降低显存占用和渲染功耗，Chromium会自动将<video>元素的实际渲染尺寸上限钳位到当前显示器的物理分辨率，超出分辨率的宽高设置会被直接忽略。
你当前使用的竖屏显示器物理分辨率为1080×1920，因此video的宽度被强制限制为1080px、高度被限制为1920px，原本1920×1920的视频源被强制缩放到1080×1920的渲染画布上，就出现了挤压变形的问题。

解决方案 #

方案1：使用Canvas中转渲染（优先级最高，兼容性最好） #

你已经确认普通DOM元素不受该分辨率钳位限制，可以用Canvas作为视频画面的载体，完全绕过video的渲染限制：

1. 修改HTML代码，隐藏原始video标签，新增等尺寸canvas标签

<div class='container'>
  <video id="selfie-video" style="display:none" width="1920" height="1920" />
  <canvas id="selfie-canvas" width="1920" height="1920"></canvas>
</div>

2. 添加帧绘制逻辑，把视频画面实时同步到Canvas上

const video = document.getElementById('selfie-video');
const canvas = document.getElementById('selfie-canvas');
const ctx = canvas.getContext('2d');

video.addEventListener('play', () => {
  function drawFrame() {
    if (!video.paused && !video.ended) {
      ctx.drawImage(video, 0, 0, 1920, 1920);
      requestAnimationFrame(drawFrame);
    }
  }
  drawFrame();
});

3. 原来给video配置的CSS样式、旋转逻辑直接迁移到canvas元素上即可，完全不受视频渲染规则限制。

方案2：修改渲染配置绕过钳位（适合不想改核心逻辑的场景） #

如果不想引入Canvas，可以通过CSS+Electron配置强制绕过Chromium的媒体分辨率限制：

1. 给video元素添加以下CSS属性：

#selfie-video {
  /* 原有样式保留 */
  will-change: transform;
  image-rendering: high-quality;
  transform: translateZ(0); /* 强制将video放入独立合成层，绕过媒体渲染钳位逻辑 */
}

2. 若为Electron环境，创建窗口时在webPreferences中添加以下配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    // 原有配置保持不变
    hardwareAcceleration: true,
    enableBlinkFeatures: 'HardwareVideoDecoding'
  }
})

方案3：缩放适配（临时快速修复方案） #

如果不方便做大的逻辑改动，可以通过缩放将被压缩的画面拉回正确比例：

#selfie-video {
  /* 原有left、top等定位属性保留，修改宽高和transform */
  width: 1080px;
  height: 1080px;
  /* 1920/1080≈1.7778，scaleX将水平方向拉回原比例，旋转时调整对应缩放参数即可 */
  transform: scaleX(1.7778) rotate(0deg); 
}

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