iOS Safari 和基于 WebKit 的浏览器（如 Edge for iOS）默认会将 元素中的实时摄像头流强制全屏播放，影响网页布局和交互体验；添加 playsinline 属性可强制视频内联播放，使其严格遵循 HTML 容器尺寸，保持在指定区域（如灰色 video 框）中渲染。
ios safari 和基于 webkit 的浏览器（如 edge for ios）默认会将 `
在 iOS 上使用 navigator.mediaDevices.getUserMedia() 获取摄像头流并渲染到 <video></video> 标签时，即使已设置宽高、CSS 约束或 object-fit，Safari 仍可能无视样式、自动触发全屏播放——这是 WebKit 的默认行为，专为移动设备“视频内容优先”场景设计，但对 WebRTC 类交互式应用（如扫码、美颜、AR 预览）极为不利。
核心解决方案：playsinline 属性
该布尔属性明确告知 iOS 浏览器：此视频应以内联（inline）模式播放，不接管全屏控制权。它必须直接写在 HTML 的 <video></video> 标签中（仅靠 JavaScript 动态设置 video.setAttribute('playsinline', '') 在部分 iOS 版本中可能失效）：
<video id="cameraVideo" autoplay playsinline muted></video>
⚠️ 注意事项：
-
muted属性必不可少：iOS 要求自动播放的<video></video>必须静音，否则autoplay将被阻止，导致流无法启动； -
autoplay与playsinline需共存：仅设playsinline不启用自动播放，仅设autoplay则仍可能全屏； - 不要依赖 CSS
width/height或max-width单独控制尺寸——需配合object-fit: cover或contain确保画面按需缩放：
#cameraVideo {
width: 100%;
height: 320px;
object-fit: cover; /* 保持比例，裁剪溢出 */
background-color: #ccc; /* 替代“灰色 video 框”视觉 */
}
完整修复示例（适配你的 CodePen 代码）
修改 HTML 中的 <video></video> 标签：
<video id="video" autoplay playsinline muted></video>
并在 JS 中确保引用正确：
const video = document.querySelector('#video'); // ✅ 使用 ID 选择器更可靠
// …其余逻辑保持不变
此外，为增强兼容性，建议在 startStream 后显式调用 video.play()（尽管有 autoplay），并捕获可能的拒绝错误：
const handleStream = (stream) => {
video.srcObject = stream;
video.play().catch(e => console.warn("Auto-play prevented:", e));
play.classList.add('d-none');
pause.classList.remove('d-none');
screenshot.classList.remove('d-none');
};
✅ 总结：playsinline 是 iOS WebRTC 视频内联播放的必备开关，配合 muted 和合理 CSS，即可彻底告别意外全屏，让摄像头预览精准嵌入页面布局，保障 H5 视觉与交互一致性。该方案已在 iOS 15–17 及 Safari 16–18 中稳定生效，是当前标准实践。
