iPhone端PWA调用摄像头默认全屏遮挡上层HTML按钮相关问题咨询

该现象是iOS Safari对<video>标签的默认特性导致，iOS默认会将媒体流类型的视频内容自动全屏播放，原生全屏层级高于所有页面元素，和你的业务代码逻辑无关，补充专属属性即可解决。

• 首先给承载视频流的<video>标签添加强制内联播放属性，这是解决该问题的核心配置

<video
  ref="video"
  autoplay
  muted
  playsinline
  webkit-playsinline
  x5-video-player-type="h5"
  x5-video-player-fullscreen="false"
></video>

说明：playsinline适配iOS10及以上系统，webkit-playsinline兼容更低版本iOS，后两个属性用于兼容安卓X5内核的浏览器避免出现同类问题。autoplay搭配muted是iOS强制要求的配置，不加会导致视频流无法自动播放。

• 调用getUserMedia申请摄像头权限时，明确指定视频输出尺寸，避免iOS自动拉伸画面

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: window.innerWidth,
    height: window.innerHeight,
    facingMode: 'environment' // 要调用前置摄像头可改为'user'
  },
  audio: false
})
this.$refs.video.srcObject = stream

• 补充CSS适配，确保层级关系正常，同时隐藏原生控件

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}
/* 隐藏iOS原生视频控件 */
video::-webkit-media-controls,
video::-webkit-media-controls-play-button {
  display: none !important;
}
/* 拍摄按钮只需z-index高于video即可正常显示 */
.shoot-btn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

• iOS Safari要求摄像头权限申请必须由用户主动交互触发（比如点击授权按钮），不能在页面加载完成后自动调用，否则会被系统直接拦截。
• 测试时必须使用HTTPS协议或者localhost环境，否则mediaDevices接口会被浏览器禁用。

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