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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangxuejing123./sip-phone-sdk",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "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>

package/src/main.js

@@ -4,7 +4,7 @@ import VueI18n from 'vue-i18n'
 import vuetify from './plugins/vuetify'
 import zh from '@/libs/zh.js'
 import en from '@/libs/en.js'
-import '@/utils/rem'
+// import '@/utils/rem'
 Vue.use(VueI18n)
 const i18n = new VueI18n({
   locale: window.config.lang || localStorage.getItem('language') || 'zh', // 语言标识

package/vue.config.js

@@ -5,33 +5,33 @@ module.exports = {
   publicPath: '/sip-phone-demo',
   productionSourceMap: false,
   // 新增的css配置部分
-  css: {
-    loaderOptions: {
-      stylus: {
-        use: [
-          require('poststylus')([
-            require('postcss-pxtorem')({
-              rootValue: 100,
-              propWhiteList: [],
-              minPixelValue: 2,
-            }),
-            'autoprefixer',
-          ]),
-        ],
-        import: [require('path').resolve('./src/assets/theme.custom')]
-      },
-      postcss: {
-        plugins: [
-          require('postcss-pxtorem')({
-            rootValue: 100,
-            propWhiteList: [],
-            minPixelValue: 2,
-          }),
-          require('autoprefixer')(),
-        ],
-      }
-    }
-  },
+  // css: {
+  //   loaderOptions: {
+  //     stylus: {
+  //       use: [
+  //         require('poststylus')([
+  //           require('postcss-pxtorem')({
+  //             rootValue: 100,
+  //             propWhiteList: [],
+  //             minPixelValue: 2,
+  //           }),
+  //           'autoprefixer',
+  //         ]),
+  //       ],
+  //       import: [require('path').resolve('./src/assets/theme.custom')]
+  //     },
+  //     postcss: {
+  //       plugins: [
+  //         require('postcss-pxtorem')({
+  //           rootValue: 100,
+  //           propWhiteList: [],
+  //           minPixelValue: 2,
+  //         }),
+  //         require('autoprefixer')(),
+  //       ],
+  //     }
+  //   }
+  // },
   devServer: {
     port: 8080,
     hot: true