CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求

src/components/CameraGuide.vue

@@ -33,7 +33,7 @@
           <div class="guideFrameBorder"></div>
           <div class="guideHole">
             <!-- 相机画面仅在取景框内显示 -->
-            <video ref="video" class="cameraVideo" autoplay playsinline muted></video>
+            <video ref="video" class="cameraVideo" autoplay playsinline webkit-playsinline muted></video>
             <!-- 主页模板：标题 + 印章 -->
             <div v-if="type==='front'" class="licenseTemplate ltFrontPage">
               <div class="ltInner">
@@ -134,6 +134,11 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    // 父组件前置探测时已拿到的相机流，传入则直接复用（iOS 上避免二次 getUserMedia 黑屏）
+    stream: {
+      type: Object,
+      default: null
     }
   },
   data() {
@@ -144,7 +149,7 @@ export default {
       'medium', 'tall', 'short wide', 'medium', 'tall', 'short', 'medium wide', 'tall']
     return {
       step: 'guide', // guide 拍摄引导 | preview 预览确认
-      stream: null,
+      activeStream: null,
       previewBlob: null,
       previewDataURL: '',
       barcodeBars: heights
@@ -176,7 +181,8 @@ export default {
   methods: {
     async startCamera() {
       try {
-        const stream = await navigator.mediaDevices.getUserMedia({
+        // 优先复用父组件探测时拿到的流，未传入才自行申请
+        const stream = this.stream || await navigator.mediaDevices.getUserMedia({
           video: { facingMode: 'environment' },
           audio: false
         })
@@ -185,12 +191,23 @@ export default {
           stream.getTracks().forEach(t => t.stop())
           return
         }
-        this.stream = stream
+        this.activeStream = stream
         await this.$nextTick()
         const video = this.$refs.video
         if (video) {
+          // iOS 自动播放加固：muted/playsinline 属性与特性同时设置，元数据就绪后再 play
+          video.muted = true
+          video.setAttribute('playsinline', 'true')
+          video.setAttribute('webkit-playsinline', 'true')
           video.srcObject = stream
-          video.play().catch(() => {})
+          const playVideo = () => {
+            video.play().catch(e => console.warn('video play error:', e && (e.name || e.message || e)))
+          }
+          if (video.readyState >= 1) {
+            playVideo()
+          } else {
+            video.onloadedmetadata = playVideo
+          }
         }
       } catch (e) {
         // 权限拒绝或相机不可用 → 通知父组件降级为系统选择器
@@ -199,9 +216,9 @@ export default {
       }
     },
     stopCamera() {
-      if (this.stream) {
-        this.stream.getTracks().forEach(t => t.stop())
-        this.stream = null
+      if (this.activeStream) {
+        this.activeStream.getTracks().forEach(t => t.stop())
+        this.activeStream = null
       }
     },
     takePhoto() {
@@ -373,7 +390,8 @@ export default {
   max-width: 340px;
   padding-top: 69.93%; /* 宽高比约 1.43:1 */
   flex-shrink: 0;
-  filter: drop-shadow(0 4px 16px rgba(20, 30, 50, .12));
+  /* 不用 filter: drop-shadow，iOS 上父级 filter 会导致 video 合成层不绘制（黑屏） */
+  box-shadow: 0 4px 16px rgba(20, 30, 50, .12);
 }
 .corner {
   position: absolute;