关于前端Video拍摄兼容性问题？

前端使用video录制视频做人脸校验，关键代码如下： const videoConstraints = { facingMode: 'user', width: {ideal: 720, max: 1280}, height: {ideal: 720, max: 1280}, frameRate: {ideal: 24, min: 15, max: 30}, }; const stream: any = await navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints, }); .capture-rect { position: relative; width: 520px; height: 520px; margin: 4vw auto; overflow: hidden; border-radius: 50%; // iOS WKWebView: video 走独立合成层,clip-path / 父级 transform 可能只裁一半 -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); // iOS 17.x: transform 写在 video 上 + 圆形 overflow 会纵向只渲染半屏,镜像放到包裹层 .video-mirror-wrap { width: 100%; height: 100%; transform: scaleX(-1); -webkit-transform: scaleX(-1); video { width: 100%; display: block; height: 100%; object-fit: cover; object-position: center; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; } } } 按照现在这种写法有两个兼容性bug： 1、IOS 17系统上预览就显示一半 2、部分安卓手机黑屏 有大佬知道这种情况怎么解决么