@sdk185/sip-phone-sdk26 0.2.29 → 0.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdk185/sip-phone-sdk26",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/MobilePhone.vue

@@ -2,7 +2,6 @@
 <template>
   <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
   <div class="phone-nmain d-flex flex-column align-center justify-space-between sip-call-main">
-   
     <!-- 位置信息显示区域 -->
     <div class="location-wrapper" v-if="showLocation">
       <!-- 显示经纬度和海拔信息 -->
@@ -100,14 +99,13 @@
           :active="false"
           class-name="elevation-6 video-panel"
           ref="remoteVideoWrapper"
-          style="overflow: hidden !important;position: relative;left: 0;top: 0;"
+          style="overflow: hidden !important;"
           @mousedown.native="onLocalVideoDragCallback($event, 'remoteVideo')"
         >
           <v-btn v-if="miniMode" class="video-normal-mode" dark text x-small width="24" height="24" min-width="24" @click="onChangeVideoNormalModeBtnClick">
             <v-icon>mdi-arrow-bottom-right-bold-box</v-icon>
           </v-btn>
           <video
-            id="remoteVideo"
             v-show="remoteVideo.show"
             autoplay="autoplay"
             webkit-playsinline="true"
@@ -121,14 +119,15 @@
             controls
             controlsList="nodownload nofullscreen noremoteplayback"
             disablepictureinpicture
+            @play="onRemoteVideoPlaying"
+            @loadedmetadata="onRemoteVideoLoaded"
           ></video>
-          <div class="video-cover"></div>
         </vue-draggable-resizable>
         <!-- 本地视频窗口 -->
         <vue-draggable-resizable
           v-show="localVideo.show"
           :w="120"
-          :h="230"
+          :h="260"
           :x="localVideo.x"
           :y="localVideo.y"
           :z="localVideo.z"
@@ -765,6 +764,18 @@ export default {
 
       return Promise.resolve(true)
     },
+    // 视频成功播放回调
+    onRemoteVideoPlaying() {
+      console.log('[iOS] Remote video is playing')
+    },
+
+    // 元数据加载完成回调
+    onRemoteVideoLoaded() {
+      console.log('[iOS] Remote video metadata loaded')
+      if (this.$refs.remoteVideo) {
+        this.$refs.remoteVideo.play().catch(() => {})
+      }
+    },
 
     startSip ({debug, password, register, autoDial = false}) {
       const {domain, port, path} = window.config
@@ -854,8 +865,51 @@ export default {
         // this.$refs.localVideo.srcObject = stream
       })
 
+      // this.sipMix.on('remoteStream', (stream, info) => {
+      //   console.info('remoteStream', stream, info)
+      //   this._resetCmpWHLRTB()
+
+      //   Object.assign(this.localVideo, {
+      //     w: parseInt(this.clientWidth / 3),
+      //     h: parseInt(this.clientHeight / 3),
+      //     x: 0,
+      //     y: 80,
+      //     z: 1100,
+      //     draggable: true
+      //   })
+      //   this.$nextTick(() => {
+      //     this.$refs.localVideoWrapper.moveVertically(80)
+      //   })
+
+
+      //   setTimeout(async () => {
+      //     Object.assign(this.remoteVideo, {
+      //       show: true,
+      //       w: this.clientWidth,
+      //       h: this.clientHeight,
+      //       x: 0,
+      //       y: 0,
+      //       z: 1000,
+      //       draggable: false
+      //     })
+
+      //     await this.$nextTick()
+      //     if (this.autoHideLocalVideo) {
+      //       this.localVideo.show = false
+      //     }
+      //     this.$refs.remoteVideo.srcObject = stream
+      //   }, 500)
+
+      // })
+
       this.sipMix.on('remoteStream', (stream, info) => {
         console.info('remoteStream', stream, info)
+        
+        const video = this.$refs.remoteVideo
+        if (!video) return
+
+        video.srcObject = stream
+
         this._resetCmpWHLRTB()
 
         Object.assign(this.localVideo, {
@@ -866,9 +920,36 @@ export default {
           z: 1100,
           draggable: true
         })
+
         this.$nextTick(() => {
-          this.$refs.localVideoWrapper.moveVertically(80)
+          // ==================== 【iOS 16 纯前端强力修复】 ====================
+          const forcePlay = () => {
+            if (!video || video.paused || video.ended) {
+              const playPromise = video.play()
+              if (playPromise) {
+                playPromise.catch(err => {
+                  console.warn('iOS force play failed:', err.name)
+                })
+              }
+            }
+          }
+
+          // 多重保险，覆盖 iOS 接通瞬间暂停状态
+          forcePlay()
+          setTimeout(forcePlay, 30)
+          setTimeout(forcePlay, 80)
+          setTimeout(forcePlay, 180)
+          setTimeout(forcePlay, 350)
+          setTimeout(forcePlay, 600)
+
+          // 持续监听，任何暂停立即恢复
+          video.addEventListener('pause', forcePlay, { once: false })
+
+          // 额外保护：元数据加载后再次强制播放
+          video.addEventListener('loadedmetadata', forcePlay, { once: true })
         })
+
+        // 原有后续代码
         setTimeout(async () => {
           Object.assign(this.remoteVideo, {
             show: true,
@@ -879,11 +960,11 @@ export default {
             z: 1000,
             draggable: false
           })
+
           await this.$nextTick()
           if (this.autoHideLocalVideo) {
             this.localVideo.show = false
           }
-          this.$refs.remoteVideo.srcObject = stream;
         }, 500)
       })
 
@@ -1282,11 +1363,6 @@ export default {
   }
 
 
-  video::-webkit-media-controls {
-    opacity: 0 !important;
-    height: 0 !important;
-    pointer-events: none !important;
-  }
   video::-webkit-media-controls-volume-button {
     display: none !important;
   }
@@ -1302,6 +1378,22 @@ export default {
   video::-webkit-media-controls-live-button {
     display: none !important;
   }
+  video::-webkit-media-controls {
+    opacity: 0 !important;
+    height: 0 !important;
+    pointer-events: none !important;
+  }
+  /* iOS 16+ 纯前端压制中间暂停按钮 */
+  video::-webkit-media-controls-overlay-play-button,
+  video::-webkit-media-controls-start-playback-button,
+  video::-webkit-media-controls-play-button,
+  video::-webkit-media-controls-pause-button {
+    display: none !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
+
   /* 中间播放按钮 + 直播按钮 + 所有图标彻底隐藏 */
   video::-webkit-media-controls-overlay-play-button,
   video::-webkit-media-controls-start-playback-button,
@@ -1316,15 +1408,4 @@ export default {
     pointer-events: none !important;
   }
   
-  /* 🔥 全覆盖遮罩：所有按钮全部看不见、点不着 */
-  .video-cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    z-index: 999999; /* 最高层级，盖住一切 */
-    pointer-events: none; /* 不影响视频点击 */
-  }
 </style>