@zhangxuejing123./sip-phone-sdk 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangxuejing123./sip-phone-sdk",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/MobilePhone.vue

@@ -1,7 +1,7 @@
 <!-- 主模板：视频通话界面 -->
 <template >
   <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
-  <div :class="isAPP ? 'my-APP' : ''" class="d-flex flex-column align-center justify-space-between sip-call-main">
+  <div :class="isAPP ? 'my-APP' : 'my-H5'" class="d-flex flex-column align-center justify-space-between sip-call-main">
     <!-- 位置信息显示区域 -->
     <div class="location-wrapper" v-if="showLocation">
       <!-- 显示经纬度和海拔信息 -->
@@ -17,7 +17,7 @@
       <p class="mt-6 mb-0 call-label" >{{callPrompt}}</p>
     </div>
     <!-- 功能按钮区域 -->
-    <div class="pr-10 pl-10 btn-group" v-if="!miniMode && !showDialPad">
+    <div class="pr-10 pl-10 sip-btn-group" v-if="!miniMode && !showDialPad">
       <v-row>
         <v-col cols="12" class="text-center">
           <!-- 通话计时器 -->
@@ -299,13 +299,13 @@ export default {
   },
 
   watch: {
-    isCalling (is) {
-      if (is) {
-        this.startDurationCount()
-      } else {
-        this.stopDurationCount()
-      }
-    },
+    // isCalling (is) {
+    //   if (is) {
+    //     this.startDurationCount()
+    //   } else {
+    //     this.stopDurationCount()
+    //   }
+    // },
     callId (id) {
       this.lastCallId = id || this.lastCallId
     },
@@ -736,6 +736,7 @@ export default {
       // 处理通话失败事件
       this.sipMix.on('failed', (e) => {
         console.warn('通话失败', e)
+        this.stopDurationCount();// 停止计算视频时长
         this.dealCallEndOrFail()  // 清理通话相关状态
         this.callPrompt = this.$t('cancelled')  // 显示通话已取消提示
         
@@ -755,6 +756,7 @@ export default {
       // 处理通话结束事件（对方挂断或通话正常结束）
       this.sipMix.on('ended', () => {
         console.warn('通话结束')
+        this.stopDurationCount();// 停止计算视频时长
         this.dealCallEndOrFail()  // 清理通话相关状态
         this.callPrompt = this.$t('hangedUp')  // 显示通话已挂断提示
         
@@ -842,6 +844,7 @@ export default {
       })
 
       this.sipMix.on('confirmed', () => {
+        this.startDurationCount(); // 开始计算视频时长
         this.startSendPosition()
       })
 
@@ -961,215 +964,197 @@ export default {
 @import './vuetify.css';
 </style> -->
 <style lang="scss">
-.sip-call-main {
-  background-color: #737778;
-  padding: 25% 20px 20% !important;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.sip-call-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 100;
-}
-
-.btn-group {
-  width: 100%;
-  position: absolute;
-  bottom: 500px;
-  z-index: 4000;
-}
-
-@media screen and (min-width: 1024px) {
-  .btn-group {
+.my-H5 {
+  .sip-call-main {
+    background-color: #737778;
+    padding: 25% 20px 20% !important;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  .sip-call-wrapper {
     position: absolute;
-    bottom: 80px;
-    width: 640px;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+  }
+  .sip-btn-group {
+    width: 100%;
+    position: absolute;
+    bottom: 500px;
     z-index: 4000;
   }
-}
-
-.sip-call-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: #000000;
-}
-
-.video-panel {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.video-timer {
-  background-color: rgba(255,255,255,0.80);
-  position: absolute;
-  top: 80px;
-  left: 32px;
-  font-size: 28px;
-  font-weight: bold;
-  padding: 4px 16px 4px 12px;
-  border-radius: 24px;
-  z-index: 2000;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.video-switch-btn {
-  position: absolute !important;
-  top: 80px;
-  right: 160px;
-  z-index: 2000;
-  img {
-    background-color: #000000;
-    border-radius: 12px;
-    border: 2px solid #000000;
+  @media screen and (min-width: 1024px) {
+    .sip-btn-group {
+      position: absolute;
+      bottom: 80px;
+      width: 640px;
+      z-index: 4000;
+    }
   }
-}
-
-.video-mini-mode {
-  position: absolute !important;
-  top: 80px;
-  right: 96px;
-  z-index: 2000;
-}
-
-.camera-switch-btn {
-  position: absolute !important;
-  top: 80px;
-  right: 32px;
-  z-index: 2000;
-}
-
-.video-normal-mode {
-  position: absolute !important;
-  top: 32px;
-  right: 32px;
-  z-index: 2000;
-}
-
-.location-wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 300px;
-  background-color: #00000055;
-  color: #FFFFFF;
-  padding: 12px;
-  p {
-    font-size: 24px;
-    margin: 0;
-    padding: 0;
+  .sip-call-video {
     width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    height: 100%;
+    object-fit: cover;
+    background-color: #000000;
+  }
+  .video-panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .video-timer {
+    background-color: rgba(255,255,255,0.80);
+    position: absolute;
+    top: 80px;
+    left: 32px;
+    font-size: 28px;
+    font-weight: bold;
+    padding: 4px 16px 4px 12px;
+    border-radius: 24px;
+    z-index: 2000;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .video-switch-btn {
+    position: absolute !important;
+    top: 80px;
+    right: 160px;
+    z-index: 2000;
+    img {
+      background-color: #000000;
+      border-radius: 12px;
+      border: 2px solid #000000;
+    }
+  }
+  .video-mini-mode {
+    position: absolute !important;
+    top: 80px;
+    right: 96px;
+    z-index: 2000;
+  }
+  .camera-switch-btn {
+    position: absolute !important;
+    top: 80px;
+    right: 32px;
+    z-index: 2000;
+  }
+  .video-normal-mode {
+    position: absolute !important;
+    top: 32px;
+    right: 32px;
+    z-index: 2000;
+  }
+  .location-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    background-color: #00000055;
+    color: #FFFFFF;
+    padding: 12px;
+    p {
+      font-size: 24px;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 }
 </style>
-<style scoped>
-.custom-mute-btn {
-    background: transparent !important;
-    box-shadow: none !important;
-    z-index: 9999 !important;
-    min-width: 0 !important;
-    width: auto !important;
-    height: auto !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* 移除按钮悬停和激活状态的背景色 */
-.custom-mute-btn::before {
-    background-color: transparent !important;
-    opacity: 0 !important;
-}
-
-/* 移除按钮的点击效果 */
-.custom-mute-btn:hover::before,
-.custom-mute-btn:focus::before,
-.custom-mute-btn:active::before {
-    opacity: 0 !important;
-}
-
-.transparent-btn {
+<style scoped lang="scss">
+.my-H5 {
+  .custom-mute-btn {
+      background: transparent !important;
+      box-shadow: none !important;
+      z-index: 9999 !important;
+      min-width: 0 !important;
+      width: auto !important;
+      height: auto !important;
+      padding: 0 !important;
+      margin: 0 !important;
+  }
+  /* 移除按钮悬停和激活状态的背景色 */
+  .custom-mute-btn::before {
+      background-color: transparent !important;
+      opacity: 0 !important;
+  }
+  /* 移除按钮的点击效果 */
+  .custom-mute-btn:hover::before,
+  .custom-mute-btn:focus::before,
+  .custom-mute-btn:active::before {
+      opacity: 0 !important;
+  }
+  .transparent-btn {
+      background: transparent !important;
+      box-shadow: none !important;
+      min-width: 0 !important;
+      width: auto !important;
+      height: auto !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      opacity: .6 !important; 
+      position: absolute !important; 
+      left: calc(50% + 160px) !important;
+      color: #FFFFFF;
+  }
+  .transparent-btn::before {
+      background-color: transparent !important;
+      opacity: 0 !important;
+  }
+  .call-btn{
+    margin-top:320px;
+  }
+  .call-img{
+    width:200px;
+    height:200px; 
+    border-radius: 50%;
+  }
+  .call-label{
+    font-size: 32px;
+    color: #FFFFFF
+  }
+  .cancel-btn{
+    opacity: 1; 
     background: transparent !important;
-    box-shadow: none !important;
-    min-width: 0 !important;
-    width: auto !important;
-    height: auto !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    opacity: .6 !important; 
-    position: absolute !important; 
-    left: calc(50% + 160px) !important;
-    color: #FFFFFF;
-}
-.transparent-btn::before {
-    background-color: transparent !important;
-    opacity: 0 !important;
-}
-
-.call-btn{
-  margin-top:320px;
-}
-.call-img{
- width:200px;
- height:200px; 
- border-radius: 50%;
-}
-
-
-.call-label{
-  font-size: 32px;
-  color: #FFFFFF
-}
-
-.cancel-btn{
-  opacity: 1; 
-  background: transparent !important;
-  box-shadow: none !important; 
-  position: relative !important;
-  margin-top: -100px !important;
-}
-.cancel-img {
-  width: 160px;
-  height: 160px;
-}
-.cancel-label{
-  top: 156px;
-  position: absolute;  color: #FFFFFF;
-  font-size: 32px;
-}
-
-
-.call-duration{
-  font-size: 28px;margin-top: -25px; color: #FFFFFF;
-}
-.hangup-img{
-  width: 160px;
-  height: 160px;
-}
-.hangup-label{
-  top: 146px;
-  position: absolute;  color: #FFFFFF;
-  font-size: 28px;
-}
-
-.img-open-close{
-  width: 110px;
-  height: 160px;
+    box-shadow: none !important; 
+    position: relative !important;
+    margin-top: -100px !important;
+  }
+  .cancel-img {
+    width: 160px;
+    height: 160px;
+  }
+  .cancel-label{
+    top: 156px;
+    position: absolute;  color: #FFFFFF;
+    font-size: 32px;
+  }
+  .call-duration{
+    font-size: 28px;margin-top: -25px; color: #FFFFFF;
+  }
+  .hangup-img{
+    width: 160px;
+    height: 160px;
+  }
+  .hangup-label{
+    top: 146px;
+    position: absolute;  color: #FFFFFF;
+    font-size: 28px;
+  }
+  .img-open-close{
+    width: 110px;
+    height: 160px;
+  }
 }
 </style>
-
 <style lang="scss">
 .my-APP {
   .sip-call-main {
@@ -1187,14 +1172,14 @@ export default {
     height: 100vh;
     z-index: 100;
   }
-  .btn-group {
+  .sip-btn-group {
     width: 100%;
     position: absolute;
     bottom: 250px;
     z-index: 4000;
   }
   @media screen and (min-width: 1024px) {
-    .btn-group {
+    .sip-btn-group {
       position: absolute;
       bottom: 40px;
       width: 320px;