@zhangxuejing123./sip-phone-sdk 0.0.0 → 0.0.1

package/package.json

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

package/public/index.html

@@ -18,7 +18,8 @@
           width: { min: 480, max: 480 },
           height: { min: 640, max: 640 }
         },
-        videoCodec: 'h264'
+        videoCodec: 'h264',
+        isAPP:false,
       }
     </script>
   </head>

package/src/App.vue

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

package/src/components/MobilePhone.vue

@@ -82,7 +82,7 @@
         </v-btn>
       </v-row>
     </div>
-    <!-- 视频容器区域 -->
+    <!-- 视频容器区域 -->·
     <v-expand-transition>
       <div class="sip-call-wrapper" v-show="showVideoCt" @click="onSipCallClick">
         <!-- 远程视频窗口 -->
@@ -1153,5 +1153,205 @@ export default {
   width: 110px;
   height: 160px;
 }
+</style>
+
+<style lang="scss">
+.my-APP {
+  .sip-call-main {
+    background-color: #737778;
+    padding: 25% 10px 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: 250px;
+    z-index: 4000;
+  }
+  @media screen and (min-width: 1024px) {
+    .btn-group {
+      position: absolute;
+      bottom: 40px;
+      width: 320px;
+      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: 40px;
+    left: 16px;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 2px 8px 2px 6px;
+    border-radius: 12px;
+    z-index: 2000;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .video-switch-btn {
+    position: absolute !important;
+    top: 40px;
+    right: 80px;
+    z-index: 2000;
+    img {
+      background-color: #000000;
+      border-radius: 6px;
+      border: 1px solid #000000;
+    }
+  }
+
+  .video-mini-mode {
+    position: absolute !important;
+    top: 40px;
+    right: 48px;
+    z-index: 2000;
+  }
+
+  .camera-switch-btn {
+    position: absolute !important;
+    top: 40px;
+    right: 16px;
+    z-index: 2000;
+  }
+
+  .video-normal-mode {
+    position: absolute !important;
+    top: 16px;
+    right: 16px;
+    z-index: 2000;
+  }
+
+  .location-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 150px;
+    background-color: #00000055;
+    color: #FFFFFF;
+    padding: 6px;
+    p {
+      font-size: 12px;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
+<style scoped  lang="scss">
+.my-APP {
+  .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% + 80px) !important;
+  }
+  .transparent-btn::before {
+      background-color: transparent !important;
+      opacity: 0 !important;
+  }
+
+  .call-btn{
+    margin-top:160px;
+  }
+  .call-img{
+  width:100px;
+  height:100px; 
+  border-radius: 50%;
+  }
+  .call-label{
+    font-size: 16px;
+    color: #FFFFFF
+  }
+  .cancel-btn{
+    opacity: 1; 
+    background: transparent !important;
+    box-shadow: none !important; 
+    position: relative !important;
+    margin-top: -50px !important;
+  }
+  .cancel-img {
+    width: 80px;
+    height: 80px;
+  }
+  .cancel-label{
+    top: 78px;
+    position: absolute;  color: #FFFFFF;
+    font-size: 16px;
+  }
 
+  .call-duration{
+    font-size: 14px;margin-top: -12.5px; color: #FFFFFF;
+  }
+  .hangup-img{
+    width: 80px;
+    height: 80px;
+  }
+  .hangup-label{
+    top: 73px;
+    position: absolute;  color: #FFFFFF;
+    font-size: 14px;
+  }
+  .img-open-close{
+    width: 55px;
+    height: 80px;
+  }
+}
 </style>