@sdk185/sip-phone-sdk26 0.2.4 → 0.2.6

package/src/components/{MobilePhone copy 2.vue → MobilePhone-ol.vue}

@@ -1,11 +1,7 @@
 <!-- 主模板：视频通话界面 -->
 <template>
   <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
-  <div class="d-flex flex-column align-center justify-space-between sip-call-main">
-    <!-- 顶部提示信息 -->
-    <div style="position: absolute; top: 0; left: 0; background: transparent; color: #FFFFFF; width: 100%; z-index: 9999; height: 0; padding-top: 10px; padding-left: 10px;">
-      <!-- {{ prompt }} -->
-    </div>
+  <div class="phone-nmain d-flex flex-column align-center justify-space-between sip-call-main">
     <!-- 位置信息显示区域 -->
     <div class="location-wrapper" v-if="showLocation">
       <!-- 显示经纬度和海拔信息 -->
@@ -14,21 +10,19 @@
       <p>ALT: {{altitude}}</p>
     </div>
     <!-- 通话信息显示区域 -->
-    <div class="d-flex flex-column align-center" v-if="!miniMode && !showDialPad" style="margin-top:160px;">
+    <div class="d-flex flex-column align-center call-btn" v-if="!miniMode && !showDialPad">
       <!-- 应用logo -->
-      <!-- <img class="elevation-4" alt="logo" :src="require('@/assets/normal-logo.png')" width="72" height="72" style="border-radius: 50%;"/> -->
-      <img class="elevation-4" alt="logo" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png" width="72" height="72" style="border-radius: 50%;"/>
+      <img class="elevation-4 call-img" alt="logo" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png"/>
       <!-- 通话状态提示 -->
-      <p class="mt-6 mb-0" style="font-size: 16px; color: #FFFFFF;">{{callPrompt}}</p>
+      <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 " v-if="!miniMode && !showDialPad">
       <v-row>
         <v-col cols="12" class="text-center">
           <!-- 通话计时器 -->
           <div 
-            v-show="isCalling && showHangup" style="font-size: 14px;margin-top: -50px; color: #FFFFFF;">
+            v-show="isCalling && showHangup" class="call-duration">
             视频时长 {{duration}}
           </div>
         </v-col>
@@ -37,46 +31,23 @@
       <v-row class="d-flex justify-space-around mb-10">
         <!-- 取消按钮 - 用于微信公众号调用的场景 -->
         <v-btn
-            style="opacity: 1; background: transparent; box-shadow: none; position: relative; margin-top: -200px;"
+            class="cancel-btn"
+            style=" "
             v-show="!isCalling && !needDial"
             @click="onHangupBtnClick"
         >
-          <!-- <img :src="require('@/assets/call-down.png')" alt="hangup" width="80" height="80"> -->
-          <img src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" width="80" height="80">
-
-          <span style="position: absolute; top: 78px; color: #FFFFFF;">取消</span>
+          <img class="cancel-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" >
+          <span class="cancel-label">取消</span>
         </v-btn>
-        
-        <!-- 原拨号按钮已注释，改为由微信公众号调用 -->
-        <!-- <v-btn
-            large
-            fab
-            color="#FFFFFF"
-            v-show="!isCalling && !needDial"
-            @click="onMakeCallBtnClick"
-        >
-          <v-icon>mdi-phone</v-icon>
-          <span class="btn-label">拨号</span>
-        </v-btn> -->
-
-        <!-- 麦克风静音/取消静音按钮 -->
-        <!-- 当正在通话且显示挂断按钮时显示 -->
-        <!-- 点击时触发onMuteBtnClick方法，传入'audio'参数 -->
         <v-btn
             large
             v-show="isCalling && showHangup"
             @click="onMuteBtnClick('audio')"
-            class="custom-mute-btn"
+            class="custom-mute-btn btn-box"
         >
-         <!-- 静音状态显示开启的麦克风图标 -->
-          <!-- <img v-if="!isAudioMute" :src="require('@/assets/adudio-open.png')" width="55" height="80">
-          <img v-else :src="require('@/assets/audio-close.png')" width="55" height="80"> -->
-          <img v-if="!isAudioMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-open.png" width="55" height="80">
-          <img v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-close.png" width="55" height="80">
-          <!-- 显示当前状态的文字提示 -->
-          <!-- <span class="btn-label">{{ isAudioMute ? '取消静音' : '静音' }}</span> -->
+          <img class="img-open-close" v-if="!isAudioMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-open.png" >
+          <img class="img-open-close" v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-close.png" >
         </v-btn>
-
         <!-- 摄像头开关按钮 -->
         <v-btn
             large
@@ -84,26 +55,10 @@
             @click="onMuteBtnClick('video')"
             class="custom-mute-btn"
         >
-          <!-- <img v-if="!isVideoMute" :src="require('@/assets/camera-open.png')" alt="mic-on" width="55" height="80">
-          <img v-else :src="require('@/assets/camera-close.png')" alt="mic-off" width="55" height="80"> -->
-          <img v-if="!isVideoMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-open.png" alt="mic-on" width="55" height="80">
-          <img v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-close.png" alt="mic-off" width="55" height="80">
+          <img class="img-open-close" v-if="!isVideoMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-open.png" alt="mic-on">
+          <img class="img-open-close" v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-close.png" alt="mic-off">
         </v-btn>
 
-        <!-- 显示/隐藏本地视频按钮 -->
-        <!-- <v-btn
-            style="opacity: .6"
-            color="blue-grey"
-            fab
-            large
-            dark
-            v-show="isCalling && showHangup"
-            @click="onShowLocalVideoBtnClick"
-        >
-          <v-icon v-if="localVideo.show">mdi-monitor</v-icon>
-          <v-icon v-else>mdi-monitor-multiple</v-icon>
-          <span class="btn-label">{{ localVideo.show ? '隐藏本地' : '显示本地' }}</span>
-        </v-btn> -->
       </v-row>
 
       <!-- 第二行按钮组 -->
@@ -114,14 +69,11 @@
             v-show="isCalling && showHangup"
             @click="onHangupBtnClick"
         >
-          <!-- <img :src="require('@/assets/call-down.png')" alt="hangup" width="80" height="80"> -->
-          <img src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" width="80" height="80">
-          <span style="position: absolute; top: 73px; color: #FFFFFF;">挂断</span>
+          <img class="hangup-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup">
+          <span class="hangup-label">挂断</span>
         </v-btn>
-
         <!-- 切换摄像头按钮 -->
         <v-btn
-          style="opacity: .6; position: absolute; left: calc(50% + 80px);"
           v-show="isCalling && showHangup"
           @click="onSwitchCameraBtnClick"
           class="transparent-btn"
@@ -130,7 +82,6 @@
         </v-btn>
       </v-row>
     </div>
-
     <!-- 视频容器区域 -->
     <v-expand-transition>
       <div class="sip-call-wrapper" v-show="showVideoCt" @click="onSipCallClick">
@@ -164,7 +115,7 @@
             ref="remoteVideo"
             class="sip-call-video"
             style="object-fit: contain;"
-            controls
+            
           ></video>
         </vue-draggable-resizable>
         <!-- 本地视频窗口 -->
@@ -194,28 +145,11 @@
             x5-video-orientation="h5"
             ref="localVideo"
             class="sip-call-video"
-            controls
+            
           ></video>
         </vue-draggable-resizable>
-
-        <!-- 视频控制区域 -->
-        <!-- <template v-if="!miniMode">
-          通话计时器
-          <span class="video-timer">
-            <img :src="require('@/assets/icon_Recording_Fill_Red_Active.svg')" alt="icon" width="24" height="24" class="mr-2">
-            {{duration}}
-          </span>
-
-          全屏切换按钮
-          <v-btn class="camera-switch-btn" dark text x-small width="24" height="24" min-width="24" @click="onChangeVideoFullScreenBtnClick">
-            <v-icon>mdi-box-shadow</v-icon>
-            <span class="btn-label">全屏</span>
-          </v-btn>
-        </template> -->
-
       </div>
     </v-expand-transition>
-
     <!-- 拨号盘组件 -->
     <v-expand-transition>
       <dial-panel-mini
@@ -228,12 +162,10 @@
         ref="dialPanelMini"
       />
     </v-expand-transition>
-
     <!-- 音频播放器（用于播放提示音） -->
     <v-bottom-sheet v-model="showAudioPlayer" hide-overlay>
       <audio :src="require('@/assets/outgoing-call2.mp3')" loop ref="audioPlayer"></audio>
     </v-bottom-sheet>
-
     <!-- 提示信息弹窗 -->
     <v-snackbar v-model="showSnackbar" :timeout="2000">
       {{snackbarText}}
@@ -247,7 +179,7 @@ import SipMix from '@/libs/SIP_MIX_WEB'
 import DialPanelMini from '@/components/DialPanelMini'
 import VueDraggableResizable from 'vue-draggable-resizable'
 import { closeStream } from '@/libs/tool'
-
+import jsNative from 'js-native-n22'
 
 export default {
   name: 'MobilePhone',
@@ -321,7 +253,7 @@ export default {
       miniMode: false,
       dialNum: '',
 
-      controls: '',
+      //controls: '',
 
       isAudioMute: false,
       isVideoMute: false,
@@ -366,13 +298,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
     },
@@ -400,6 +332,25 @@ export default {
   },
 
   methods: {
+    handleAndroidParams(val){
+        console.log("handleAndroidParamsvalvalval", val)
+        jsNative.bridge.callhandler('webRTC', '', (result) => {
+        console.log("%c调用原生返回成功", "color: green", result)
+        console.log("c调用原生返回成功valval", val)
+        if (!result.error) {
+          // success && success(result.content)
+          console.log('webRTC调用成功', result.content)
+          console.log('webRTC调用成功valval', val)
+          this.handleWechatParams(val);
+        } else {
+          // fail && fail(result.content)
+          console.log('webRTC调用失败', result.content)
+          console.log('webRTC调用失败valval', val)
+        }
+      })
+    },
+
+
     // 处理微信公众号参数
     handleWechatParams(val) {
       // ===== 测试代码开始 =====
@@ -410,7 +361,7 @@ export default {
       // // 获取参数值
       // const calledNum = urlParams.get('calledNum');
       // const callDataStr = urlParams.get('callData');
-      console.log('测试模式：使用模拟参数');
+      console.log('e行销传过来的参数',val);
       
       // ===== 原始代码（已注释） ===== // 用于微信公众号 此方式是获取url参数；父子组件传值可以使用props
       // const urlParams = new URLSearchParams(window.location.search);
@@ -420,7 +371,7 @@ export default {
       const calledNum = val.calledNum;
       const callDataStr = val.callData;
       
-      console.log('测试模式：使用模拟参数');
+      // console.log('测试模式：使用模拟参数');
       
       if (calledNum) {
         // 存储被叫号码
@@ -591,12 +542,17 @@ export default {
       }
 
       const params = { target: this.dialNum }
+      console.log('paramsparams Data', params)
+      console.log('this.callData Data', this.callData)
+      console.log('window.config.videoParams', window.config.videoParams)
       if (this.callType === 'videoOnly') {
+        console.log('videoOnly')
         params.video = Object.assign({
           facingMode: 'user'
         }, window.config.videoParams)
         params.audio = false
       } else if (this.callType === 'video') {
+        console.log('video')
         params.video = Object.assign({
           facingMode: 'user'
         }, window.config.videoParams)
@@ -608,6 +564,7 @@ export default {
 
       if (this.callData) {
         params.callData = this.callData
+        console.log('Call Da1ta', this.callData)
       }
 
       // console.info('Call Params', params)
@@ -629,7 +586,6 @@ export default {
       }
 
     },
-
     onHangupBtnClick () {
       this.sipMix.hangup();
       // this.$emit('hangup-event', { imType: 0 });// 通知父组件
@@ -706,26 +662,67 @@ export default {
       }, 1000)
     },
 
+    // async onSwitchCameraBtnClick() {
+    //   const list = await navigator.mediaDevices.enumerateDevices()
+    //   console.warn(list)
+    //   let videoOption =  {
+    //     facingMode: 'user',
+    //   }
+    //   if (this.cameraType === 'front') {
+    //     videoOption = {
+    //       facingMode: { exact: 'environment' }
+    //     }
+    //   }
+    //   Object.assign(videoOption, window.config.videoParams)
+
+    //   const stream = await navigator.mediaDevices.getUserMedia({
+    //     video: videoOption,
+    //     audio: false
+    //   })
+    //   if (stream) {
+    //     this.cameraType = this.cameraType === 'front' ? 'back' : 'front'
+    //     this.$refs.localVideo.srcObject = stream
+    //     this.sipMix.changeLocalVideoTrack({stream})
+    //   }
+    // },
     async onSwitchCameraBtnClick() {
+      // 1. 获取当前设备列表（包含音频/视频输入设备）
       const list = await navigator.mediaDevices.enumerateDevices()
-      console.warn(list)
-      let videoOption =  {
-        facingMode: 'user',
+      console.warn(list) // 调试用：打印设备列表，可看到摄像头设备信息
+      
+      // 2. 初始化摄像头配置（默认前置摄像头）
+      let videoOption = {
+        facingMode: 'user', // user = 前置摄像头（面向用户）
       }
+      
+      // 3. 切换摄像头配置：如果当前是前置，切换为后置
       if (this.cameraType === 'front') {
         videoOption = {
-          facingMode: { exact: 'environment' }
+          facingMode: { exact: 'environment' } // environment = 后置摄像头（面向环境）
         }
       }
+      
+      // 4. 合并全局视频参数（比如分辨率、帧率等配置）
       Object.assign(videoOption, window.config.videoParams)
 
+      // 5. 重新请求摄像头媒体流（只请求视频，不请求音频）
       const stream = await navigator.mediaDevices.getUserMedia({
         video: videoOption,
         audio: false
       })
+      
+      // 6. 流获取成功后执行核心操作
       if (stream) {
+        // ① 切换摄像头状态标记（front ↔ back）
         this.cameraType = this.cameraType === 'front' ? 'back' : 'front'
+        
+        // ② 更新本地video标签的流（这是视频画面显示的核心）
         this.$refs.localVideo.srcObject = stream
+        
+        // 本次新增修改点：强制显示本地视频
+        this.localVideo.show = true
+        
+        // ③ 同步新的视频流到通话链路（让对方也看到切换后的画面）
         this.sipMix.changeLocalVideoTrack({stream})
       }
     },
@@ -798,6 +795,7 @@ export default {
       // 处理通话失败事件
       this.sipMix.on('failed', (e) => {
         console.warn('通话失败', e)
+        this.stopDurationCount()  // 确保停止计时器 0105
         this.dealCallEndOrFail()  // 清理通话相关状态
         this.callPrompt = this.$t('cancelled')  // 显示通话已取消提示
         
@@ -817,6 +815,7 @@ export default {
       // 处理通话结束事件（对方挂断或通话正常结束）
       this.sipMix.on('ended', () => {
         console.warn('通话结束')
+        this.stopDurationCount()  // 确保停止计时器 0105
         this.dealCallEndOrFail()  // 清理通话相关状态
         this.callPrompt = this.$t('hangedUp')  // 显示通话已挂断提示
         
@@ -834,14 +833,18 @@ export default {
 
       this.sipMix.on('localStream', async (stream, info) => {
         console.info('localStream', stream, info)
+        this.$refs.localVideo.srcObject = stream
+        if(this.localVideo.show) {
+            return
+        }
         this.localVideo.w = this.clientWidth
         this.localVideo.h = this.clientHeight
         this.localVideo.draggable = false
         this.showVideoCt = true
         this.localVideo.show = true
 
-        await this.$nextTick()
-        this.$refs.localVideo.srcObject = stream
+        // await this.$nextTick()
+        // this.$refs.localVideo.srcObject = stream
       })
 
       this.sipMix.on('remoteStream', (stream, info) => {
@@ -904,6 +907,7 @@ export default {
       })
 
       this.sipMix.on('confirmed', () => {
+        this.startDurationCount();  // 通话完全建立后开始计时 0105
         this.startSendPosition()
       })
 
@@ -989,6 +993,11 @@ export default {
     })
 
     setTimeout(() => {
+      // this.miniMode = false;// 调试用
+      // this.showDialPad = false;// 调试用
+      // this.isCalling = true;// 调试用
+      // this.needDial = false;// 调试用
+      // this.showHangup = true;// 调试用
       const {clientHeight, clientWidth} = window.document.body
       this.clientHeight = clientHeight
       this.clientWidth = clientWidth
@@ -1010,158 +1019,221 @@ export default {
 @import './vuetify.css';
 </style> -->
 <style lang="scss">
-.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;
-}
+  .phone-nmain{
+      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: 150px;
-  z-index: 4000;
-}
+    .sip-btn-group {
+      width: 100%;
+      position: absolute;
+      //bottom: 250px;
+      bottom: 25%;
+      z-index: 4000;
+    }
 
-@media screen and (min-width: 1024px) {
-  .btn-group {
-    position: absolute;
-    bottom: 80px;
-    width: 640px;
-    z-index: 4000;
-  }
-}
+    @media screen and (min-width: 1024px) {
+      .sip-btn-group {
+        position: absolute;
+        bottom: 40px;
+        width: 320px;
+        z-index: 4000;
+      }
+    }
 
-.sip-call-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: #000000;
-}
+    .sip-call-video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background-color: #000000;
+    }
 
-.video-panel {
-  // touch-action: none;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-}
+    .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-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-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;
-}
+    .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;
-}
+    .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;
-}
+    .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;
+    .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>
-.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;
-}
+<style scoped lang="scss">
+  .phone-nmain{
+    .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::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;
-}
+    .btn-box{
+      padding: 0 90px !important; // 0113
+      margin-left: -100px !important; // 0113
+    }
+    /* 移除按钮的点击效果 */
+    .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;
+        color: #FFFFFF !important;
+    }
+    .transparent-btn::before {
+        background-color: transparent !important;
+        opacity: 0 !important;
+    }
+
+    .call-btn{
+      /* margin-top:160px; */
+      position: relative;
+      top: 0%;
+    }
+    .call-img{
+    width:100px;
+    height:100px; 
+    border-radius: 50%;
+    }
 
-.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;
-}
-.transparent-btn::before {
-    background-color: transparent !important;
-    opacity: 0 !important;
-}
 
+    .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>