iOS 15 WebRTC竖屏模式下视频后方横向黑背景如何设置为透明

这个异常是iOS 15 Safari系统层对WebRTC媒体流渲染的已知bug，系统会强制给video元素填充黑色背景，无视CSS透明配置，可通过以下几种方案修复：

方案1：CSS强制修正（最轻量，适配大部分场景） #

给承载媒体流的video元素添加以下CSS规则：

video {
  /* 触发GPU渲染，绕过系统默认的黑色背景填充逻辑 */
  -webkit-transform: translateZ(0) !important;
  background-color: transparent !important;
  /* 按容器比例适配视频，cover为铺满容器裁剪边缘，contain为完整显示视频无裁剪 */
  object-fit: cover;
  width: 100%;
  height: 100%;
}

如果需要视频完整显示不裁剪，把object-fit的属性值改为contain即可

方案2：请求媒体流时指定竖屏适配参数 #

调用getUserMedia时明确传入竖屏匹配的分辨率参数，避免WebRTC默认返回横向分辨率导致额外黑边：

const mediaConstraints = {
  video: {
    width: { ideal: window.innerWidth },
    height: { ideal: window.innerHeight },
    orientation: "portrait"
  },
  audio: true
};

// 请求媒体流
const localStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);

方案3：Canvas中转渲染（兼容性最高，100%解决黑背景问题） #

如果以上两种方案都不生效，可以用canvas中转绘制视频帧，完全绕开系统video元素的渲染bug，天然支持透明背景：

// 创建隐藏的video元素承载原始媒体流
const hiddenVideo = document.createElement('video');
hiddenVideo.style.display = 'none';
hiddenVideo.srcObject = localStream;
hiddenVideo.play().catch(err => console.log(err));

// 初始化显示用的canvas
const displayCanvas = document.getElementById('display-canvas');
const ctx = displayCanvas.getContext('2d');
displayCanvas.width = window.innerWidth;
displayCanvas.height = window.innerHeight;

// 逐帧绘制视频内容
function renderFrame() {
  // 清空画布保证透明背景
  ctx.clearRect(0, 0, displayCanvas.width, displayCanvas.height);
  ctx.drawImage(hiddenVideo, 0, 0, displayCanvas.width, displayCanvas.height);
  requestAnimationFrame(renderFrame);
}
renderFrame();

该方案仅会产生极小的性能损耗，iPhone设备上可稳定运行

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