@zhangxuejing123./sip-phone-sdk 0.0.2 → 0.0.4

package/package.json

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

package/public/index.html

@@ -19,7 +19,6 @@
           height: { min: 640, max: 640 }
         },
         videoCodec: 'h264',
-        isAPP:false,
       }
     </script>
   </head>

package/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app style="background-color: rgba(5,29,63)"  :class="isAPP ? 'my-APP' : ''">
+  <v-app style="background-color: rgba(5,29,63)" >
     
     <!-- <button @click="onMakeCall">拨号</button> -->
     <v-main>
@@ -34,7 +34,6 @@ export default {
   },
 
   data: () => ({
-    isAPP:false,
     debug: false,
     password: '',
     calledNum: '',
@@ -77,8 +76,6 @@ export default {
   },
 
   mounted () {
-    this.isAPP = window.config.isAPP;
-    console.log("isAPP22",this.isAPP)
     let {
       calledNum = '0000021000021001',
       //calledNum = '000001100002011001',

package/src/components/MobilePhone.vue

@@ -1,7 +1,7 @@
 <!-- 主模板：视频通话界面 -->
-<template>
+<template >
   <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
-  <div 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">
           <!-- 通话计时器 -->
@@ -240,6 +240,7 @@ export default {
 
   data: function () {
     return {
+      isAPP:false,
       prompt: `${this.$t('serverConnecting')}...`,
       callPrompt: this.$t('pleaseBePatient'),
 
@@ -915,10 +916,23 @@ export default {
 
     stopSendPosition () {
       clearTimeout(this.sendPositionHandler)
-    }
+    },
+    isAPPIF(){
+      if (/android/i.test(navigator.userAgent)) {
+        this.isAPP = true;
+        console.log("当前为Android App");
+      } else if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
+        console.log("当前为iOS App");
+        this.isAPP = true;
+      } else {
+        this.isAPP = false;
+        console.log("当前为H5页面");
+      }
+    },
   },
 
   async mounted() {
+    // this.isAPPIF()
     console.info('MobilePhone mounted')
     await this.checkBrowser().catch(e => {
       this.showSnackbar = true
@@ -947,214 +961,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;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+  }
+  .sip-btn-group {
+    width: 100%;
     position: absolute;
-    bottom: 80px;
-    width: 640px;
+    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;
-}
-.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 {
@@ -1172,14 +1169,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;
@@ -1292,16 +1289,17 @@ export default {
   }
 
   .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% + 80px) !important;
+    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;

package/src/components/vuetify.css

@@ -4666,7 +4666,8 @@ html.overflow-y-hidden {
 }
 
 .v-application .mb-10 {
-  margin-bottom: 40px !important;
+  margin-bottom: 160px !important;
+  z-index: 1000 !important;
 }
 
 .v-application .mb-11 {