@sdk185/sip-phone-sdk26 0.2.11 → 0.2.13

package/src/components/MobilePhone copy.vue

@@ -0,0 +1,1289 @@
+<!-- 主模板：视频通话界面 -->
+<template>
+  <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
+  <div class="phone-nmain d-flex flex-column align-center justify-space-between sip-call-main">
+    <!-- 位置信息显示区域 -->
+    <div class="location-wrapper" v-if="showLocation">
+      <!-- 显示经纬度和海拔信息 -->
+      <p>LAT: {{latitude}}</p>
+      <p>LNG: {{longitude}}</p>
+      <p>ALT: {{altitude}}</p>
+    </div>
+    <!-- 通话信息显示区域 -->
+    <div class="d-flex flex-column align-center call-btn" v-if="!miniMode && !showDialPad">
+      <!-- 应用logo -->
+      <img class="elevation-4 call-img" alt="logo" :src="chatURL+'/static/normal-logo.png'"/>
+      <!-- 通话状态提示 -->
+      <p class="mt-6 mb-0 call-label" >{{callPrompt}}</p>
+    </div>
+    <!-- 功能按钮区域 -->
+    <div class="pr-10 pl-10 " v-if="!miniMode && !showDialPad">
+      <v-row>
+        <v-col cols="12" class="text-center">
+          <!-- 通话计时器 -->
+          <div 
+            v-show="isCalling && showHangup" class="call-duration">
+            视频时长 {{duration}}
+          </div>
+        </v-col>
+      </v-row>
+      <!-- 第一行按钮组 -->
+      <v-row class="d-flex justify-space-around mb-10">
+        <!-- 取消按钮 - 用于微信公众号调用的场景 -->
+        <v-btn
+            class="cancel-btn"
+            style=" "
+            v-show="!isCalling && !needDial"
+            @click="onHangupBtnClick"
+        >
+          <img class="cancel-img" :src="chatURL+'/static/call-down.png'" alt="hangup" >
+          <span class="cancel-label">取消</span>
+        </v-btn>
+        <v-btn
+            large
+            v-show="isCalling && showHangup"
+            @click="onMuteBtnClick('audio')"
+            class="custom-mute-btn btn-box"
+        >
+          <img class="img-open-close" v-if="!isAudioMute" :src="chatURL+'/static/adudio-open.png'" >
+          <img class="img-open-close" v-else :src="chatURL+'/static/adudio-close.png'" >
+        </v-btn>
+        <!-- 摄像头开关按钮 -->
+        <v-btn
+            large
+            v-show="isCalling && showHangup"
+            @click="onMuteBtnClick('video')"
+            class="custom-mute-btn"
+        >
+          <img class="img-open-close" v-if="!isVideoMute" :src="chatURL+'/static/camera-open.png'" alt="mic-on">
+          <img class="img-open-close" v-else :src="chatURL+'/static/camera-close.png'" alt="mic-off">
+        </v-btn>
+
+      </v-row>
+
+      <!-- 第二行按钮组 -->
+      <v-row class="d-flex justify-center mt-10" style="position: relative; width: 100%;">
+        <!-- 挂断按钮 -->
+        <v-btn
+            style="opacity: 1; background: transparent; box-shadow: none; position: relative;z-index: 9999;"
+            v-show="isCalling && showHangup"
+            @click="onHangupBtnClick"
+        >
+          <img class="hangup-img" :src="chatURL+'/static/call-down.png'" alt="hangup">
+          <span class="hangup-label">挂断</span>
+        </v-btn>
+        <!-- 切换摄像头按钮 -->
+        <v-btn
+          v-show="isCalling && showHangup"
+          @click="onSwitchCameraBtnClick"
+          class="transparent-btn"
+        >
+          <v-icon size="30">mdi-camera-flip</v-icon>
+        </v-btn>
+      </v-row>
+    </div>
+    <!-- 视频容器区域 -->
+    <v-expand-transition>
+      <div class="sip-call-wrapper" v-show="showVideoCt" @click="onSipCallClick">
+        <!-- 远程视频窗口 -->
+        <vue-draggable-resizable
+          v-show="remoteVideo.show"
+          :w="remoteVideo.w"
+          :h="remoteVideo.h"
+          :x="remoteVideo.x"
+          :y="remoteVideo.y"
+          :z="remoteVideo.z"
+          :draggable="remoteVideo.draggable"
+          :handles="[]"
+          :parent="true"
+          :active="false"
+          class-name="elevation-6 video-panel"
+          ref="remoteVideoWrapper"
+          @mousedown.native="onLocalVideoDragCallback($event, 'remoteVideo')"
+        >
+          <v-btn v-if="miniMode" class="video-normal-mode" dark text x-small width="24" height="24" min-width="24" @click="onChangeVideoNormalModeBtnClick">
+            <v-icon>mdi-arrow-bottom-right-bold-box</v-icon>
+          </v-btn>
+          <video
+            v-show="remoteVideo.show"
+            autoplay="autoplay"
+            webkit-playsinline="true"
+            playsinline="true"
+            x-webkit-airplay="true"
+            x5-video-player-type="h5"
+            x5-video-orientation="h5"
+            ref="remoteVideo"
+            class="sip-call-video"
+            style="object-fit: contain;pointer-events: none !important;"
+            controls
+            controlsList="nodownload nofullscreen noremoteplayback"
+            disablepictureinpicture
+          ></video>
+        </vue-draggable-resizable>
+        <!-- 本地视频窗口 -->
+        <vue-draggable-resizable
+          v-show="localVideo.show"
+          :w="localVideo.w"
+          :h="localVideo.h"
+          :x="localVideo.x"
+          :y="localVideo.y"
+          :z="localVideo.z"
+          :draggable="localVideo.draggable"
+          :handles="[]"
+          :parent="true"
+          :active="false"
+          class-name="elevation-6 video-panel"
+          ref="localVideoWrapper"
+          @mousedown.native="onLocalVideoDragCallback($event, 'localVideo')"
+        >
+          <video
+            v-show="localVideo.show"
+            autoplay="autoplay"
+            muted
+            webkit-playsinline="true"
+            playsinline="true"
+            x-webkit-airplay="true"
+            x5-video-player-type="h5"
+            x5-video-orientation="h5"
+            ref="localVideo"
+            style="pointer-events: none !important;"
+            class="sip-call-video"
+            
+          ></video>
+        </vue-draggable-resizable>
+      </div>
+    </v-expand-transition>
+    <!-- 拨号盘组件 -->
+    <v-expand-transition>
+      <dial-panel-mini
+        :isCalling="isCalling"
+        v-show="showDialPad"
+        @makeCall="onDialPadMakeCallBtnClick"
+        @close="showDialPad=false"
+        @dtmf="onDialPadDtmfBtnClick"
+        @hangup="onHangupBtnClick"
+        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}}
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import 'webrtc-adapter'
+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',
+  api: null,
+  locateHandler: -1,
+  sendPositionHandler: -1,
+  clientHeight: 0,
+  clientWidth: 0,
+
+  components: {
+    VueDraggableResizable,
+    DialPanelMini
+  },
+
+  props: {
+    calledNum: { // 被叫
+      type: String,
+      default: ''
+    },
+
+    callingNum: { // 主叫
+      type: String,
+      default: 'H5User',
+      validator: (v) => !!v
+    },
+
+    callType: {
+      type: String,
+      default: 'videoOnly',
+      validator: v => ['audio', 'video', 'videoOnly'].indexOf(v) > -1
+    },
+
+    debug: {
+      type: Boolean,
+      default: false
+    },
+
+    needDial: {
+      type: Boolean,
+      default: false
+    },
+
+    autoHideLocalVideo: {
+      type: Boolean,
+      default: false
+    },
+
+    showLocation: {
+      type: Boolean,
+      default: true
+    },
+
+    callData: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data: function () {
+    return {
+      prompt: `${this.$t('serverConnecting')}...`,
+      callPrompt: this.$t('pleaseBePatient'),
+      chatURL:"https://kefu-gm-jc-dat.boc-samsunglife.cn",// 环境切换
+      isCalling: false,
+      showHangup: false,
+      showAudioPlayer: true,
+      showVideoCt: false,
+      showDialPad: false,
+      showSnackbar: false,
+
+      miniMode: false,
+      dialNum: '',
+
+      //controls: '',
+
+      isAudioMute: false,
+      isVideoMute: false,
+      cameraType: 'front',
+      videoInputList: [],
+      videoInputIndex: 0,
+
+      localVideo: {
+        w: 1,
+        h: 1,
+        x: 0,
+        y: 0,
+        z: 1000,
+        show: false,
+        draggable: true
+      },
+
+      remoteVideo: {
+        w: 1,
+        h: 1,
+        x: 0,
+        y: 0,
+        z: 1000,
+        show: false,
+        draggable: true
+      },
+
+      connected: false,
+      callDuration: 0,
+
+      durationHandler: -1,
+      snackbarText: '',
+
+      callId: '',
+      lastCallId: '',
+      queueCount: 0,
+
+      latitude: 0,
+      longitude: 0,
+      altitude: 0
+    }
+  },
+
+  watch: {
+    // isCalling (is) {
+    //   if (is) {
+    //     this.startDurationCount()
+    //   } else {
+    //     this.stopDurationCount()
+    //   }
+    // },
+    callId (id) {
+      this.lastCallId = id || this.lastCallId
+    },
+    prompt (v) {
+      console.info('Prompt', v)
+    }
+  },
+
+  computed: {
+    duration () {
+      let s = this.callDuration % 60
+      s = s < 10 ? `0${s}` : `${s}`
+      let m = parseInt(this.callDuration / 60)
+      m = m < 10 ? `0${m}` : `${m}`
+      return `${m}:${s}`
+    }
+  },
+
+  created() {
+    setTimeout(() => {
+      // this.onMakeCallBtnClick();
+      // 处理微信公众号传递的参数
+      // this.handleWechatParams();
+    }, 2000);
+  },
+
+  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) {
+      // ===== 测试代码开始 =====
+      // 测试用的URL参数字符串 - 模拟微信公众号传递的参数
+      // const testParams = 'debug=true&calledNum=0000021000021001&av=video&callData={"calledNum":"0000021000021001","videoRecordId":"ae756872ff3a122817848719605aa5cb"}';
+      // // 解析测试参数
+      // const urlParams = new URLSearchParams(testParams);
+      // // 获取参数值
+      // const calledNum = urlParams.get('calledNum');
+      // const callDataStr = urlParams.get('callData');
+      console.log('e行销传过来的参数',val);
+      
+      // ===== 原始代码（已注释） ===== // 用于微信公众号 此方式是获取url参数；父子组件传值可以使用props
+      // const urlParams = new URLSearchParams(window.location.search);
+      // const calledNum = urlParams.get('calledNum');
+      // const callDataStr = urlParams.get('callData');
+      // const urlParams = val;
+      const calledNum = val.calledNum;
+      const callDataStr = val.callData;
+      
+      // console.log('测试模式：使用模拟参数');
+      
+      if (calledNum) {
+        // 存储被叫号码
+        this.setDialNum(calledNum);
+        
+        // 如果有callData，解析并存储
+        let callData = null;
+        try {
+          callData = callDataStr ? JSON.parse(decodeURIComponent(callDataStr)) : null;
+          // 这里可以将callData存储到Vuex或组件的data中
+          if (callData) {
+            // 例如：this.$store.commit('setCallData', callData);
+            console.log('Call data received:', callData);
+          }
+        } catch (e) {
+          console.error('Failed to parse callData:', e);
+        }
+        
+        // 自动发起呼叫
+        this.$nextTick(() => {
+          this.onMakeCallBtnClick();
+        });
+      }
+    },
+
+    _resetCmpWHLRTB ({rl =0, rt = 0, ll = 0, lt = 0} = {}) {
+      this.$refs.remoteVideoWrapper.left = rl
+      this.$refs.remoteVideoWrapper.top = rt
+
+      this.$refs.localVideoWrapper.left = ll
+      this.$refs.localVideoWrapper.top = lt
+
+      this.$refs.localVideoWrapper.parentWidth = this.clientWidth
+      this.$refs.localVideoWrapper.parentHeight = this.clientHeight
+      this.$refs.localVideoWrapper.right = this.clientWidth - this.localVideo.w
+      this.$refs.localVideoWrapper.bottom = this.clientHeight - this.localVideo.h
+
+      this.$refs.remoteVideoWrapper.parentWidth = this.clientWidth
+      this.$refs.remoteVideoWrapper.parentHeight = this.clientHeight
+      this.$refs.remoteVideoWrapper.right = this.clientWidth - this.remoteVideo.w
+      this.$refs.remoteVideoWrapper.bottom = this.clientHeight - this.remoteVideo.h
+    },
+
+    toMiniMode () {
+      this._resetCmpWHLRTB()
+      Object.assign(this.localVideo, {
+        show: false,
+        draggable: false
+      })
+      this.miniMode = true
+
+      setTimeout(() => {
+        Object.assign(this.remoteVideo, {
+          show: true,
+          w: parseInt(this.clientWidth / 3),
+          h: parseInt(this.clientHeight / 3),
+          x: 0,
+          y: 0,
+          z: 1100,
+          draggable: true
+        })
+      }, 500)
+    },
+
+    toNormalMode () {
+      this._resetCmpWHLRTB()
+      Object.assign(this.localVideo, {
+        show: true,
+        w: parseInt(this.clientWidth / 3),
+        h: parseInt(this.clientHeight / 3),
+        x: 0,
+        y: 0,
+        z: 1100,
+        draggable: false
+      })
+      this.miniMode = false
+
+      setTimeout(() => {
+        // this._resetCmpWHLRTB()
+        Object.assign(this.remoteVideo, {
+          show: true,
+          w: this.clientWidth,
+          h: this.clientHeight,
+          x: 0,
+          y: 0,
+          z: 1000,
+          draggable: true
+        })
+      }, 500)
+    },
+
+    onDialPadBtnClick () {
+      this.showDialPad = true
+    },
+
+    onDialPadMakeCallBtnClick ({dialNum}) {
+      this.dialNum = dialNum
+      this.onMakeCallBtnClick()
+    },
+
+    onDialPadDtmfBtnClick (v) {
+      this.sipMix.sendDTMF({tones: v})
+    },
+
+    onChangeVideoMiniModeBtnClick () {
+      this.toMiniMode()
+    },
+
+    onChangeVideoNormalModeBtnClick () {
+      this.toNormalMode()
+    },
+
+    onChangeVideoFullScreenBtnClick () {
+      if (this.remoteVideo.show) {
+        this.$refs.remoteVideoWrapper.left = 0
+        this.$refs.remoteVideoWrapper.top = 0
+
+        this.$refs.localVideoWrapper.left = 0
+        this.$refs.localVideoWrapper.top = 0
+
+        this.$nextTick(() => {
+          if (this.localVideo.w === this.clientWidth) {
+            Object.assign(this.localVideo, {
+              w: parseInt(this.clientWidth / 3),
+              h: parseInt(this.clientHeight / 3),
+              z: 1100,
+              draggable: true
+            })
+            Object.assign(this.remoteVideo, {
+              w: this.clientWidth,
+              h: this.clientHeight,
+              z: 1000,
+              draggable: false
+            })
+          } else {
+            Object.assign(this.localVideo, {
+              w: this.clientWidth,
+              h: this.clientHeight,
+              z: 1000,
+              draggable: false
+            })
+            Object.assign(this.remoteVideo, {
+              w: parseInt(this.clientWidth / 3),
+              h: parseInt(this.clientHeight / 3),
+              z: 1100,
+              draggable: true
+            })
+          }
+        })
+      }
+    },
+
+    onLocalVideoDragCallback (e, target) {
+      if (target === 'remoteVideo' && this.remoteVideo.w !== this.clientWidth) {
+        e.stopPropagation()
+      } else if (target === 'localVideo' && this.localVideo.w !== this.clientWidth) {
+        e.stopPropagation()
+      }
+    },
+
+    onSipCallClick (){
+      this.autoShowHangupBtn()
+    },
+
+    async onMakeCallBtnClick() {
+      if (!this.needDial) {
+        this.dialNum = this.calledNum
+      }
+
+      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)
+        params.audio = true
+      } else {
+        params.video = false
+        params.audio = true
+      }
+
+      if (this.callData) {
+        params.callData = this.callData
+        console.log('Call Da1ta', this.callData)
+      }
+
+      // console.info('Call Params', params)
+      try {
+        await this.sipMix.call(params)
+      } catch (e) {
+        this.snackbarText = this.$t('gotCameraStreamFailed')
+        this.showSnackbar = true
+      }
+
+      this.isCalling = true
+      this.showHangup = true
+      if (this.needDial) {
+        this.callPrompt = `${this.$t('calling')} ${this.dialNum}`
+        this.showDialPad = false
+      } else {
+        // this.callPrompt = `${this.$t('calling')}...${this.$t('pleaseBePatient')}`
+        this.callPrompt = `${this.$t('pleaseBePatient')}`
+      }
+
+    },
+    onHangupBtnClick () {
+      this.sipMix.hangup();
+      // this.$emit('hangup-event', { imType: 0 });// 通知父组件
+      // 触发 hangup 事件，并传递参数给父组件
+      this.$emit('hangup', { 
+        // callId: this.callId,
+        // duration: this.duration,
+        // timestamp: new Date().getTime(),
+        imType: 0,
+      });
+    },
+
+    onMuteBtnClick (type) {
+      if (type === 'audio') {
+        if (this.isAudioMute) {
+          this.sipMix.unmute({audio: true})
+        } else {
+          this.sipMix.mute({audio: true})
+        }
+        this.isAudioMute = !this.isAudioMute
+      } else {
+        if (this.isVideoMute) {
+          this.sipMix.unmute({video: true})
+        } else {
+          this.sipMix.mute({video: true})
+        }
+        this.isVideoMute = !this.isVideoMute
+      }
+    },
+
+
+    onShowLocalVideoBtnClick () {
+      // this.localVideo.show = !this.localVideo.show
+      this.localVideo.z = (this.localVideo.z === 1 ? 1100 : 1)
+    },
+
+    dealCallEndOrFail () {
+      // this.$refs.audioPlayer.currentTime = 0
+      this.$refs.audioPlayer.pause()
+      this.showVideoCt = false
+      this.remoteVideo.show = false
+      this.localVideo.show = false
+      this.localVideo.w = this.clientWidth
+      this.localVideo.h = this.clientHeight
+      this.isCalling = false
+      this.callId = ''
+      this.prompt = this.$t('serverConnected')
+
+      if (this.needDial) {
+        this.showDialPad = true
+      }
+
+      this.stopDurationCount()
+      this.toNormalMode()
+      this.stopSendPosition()
+    },
+
+    autoShowHangupBtn () {
+      this.showHangup = true
+      /* setTimeout(() => {
+        this.showHangup = false
+      }, 3000) */
+    },
+
+    stopDurationCount () {
+      this.callDuration = 0
+      clearInterval(this.durationHandler)
+    },
+
+    startDurationCount () {
+      this.stopDurationCount()
+      this.durationHandler = setInterval(() => {
+        this.callDuration++
+      }, 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) // 调试用：打印设备列表，可看到摄像头设备信息
+      
+      // 2. 初始化摄像头配置（默认前置摄像头）
+      let videoOption = {
+        facingMode: 'user', // user = 前置摄像头（面向用户）
+      }
+      
+      // 3. 切换摄像头配置：如果当前是前置，切换为后置
+      if (this.cameraType === 'front') {
+        videoOption = {
+          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})
+      }
+    },
+
+    setDialNum (dialNum) {
+      this.$refs.dialPanelMini.setDialNum(dialNum)
+    },
+
+    async checkBrowser() {
+      const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true})
+      if (stream) {
+        closeStream(stream)
+      } else {
+        return Promise.reject(this.$t('cameraOrMicUnsupported'))
+      }
+
+
+      if (!window.RTCPeerConnection) {
+        return Promise.reject(this.$t('WebRTCUnsupported'))
+      }
+
+      const list = await navigator.mediaDevices.enumerateDevices()
+      const vList = list.filter(e => e.kind === 'videoinput')
+      vList.forEach(device => {
+        console.warn({
+          label: device.label,
+          deviceId: device.deviceId,
+          groupId: device.groupId
+        })
+      })
+
+      this.videoInputList = vList
+
+      return Promise.resolve(true)
+    },
+
+    startSip ({debug, password, register, autoDial = false}) {
+      const {domain, port, path} = window.config
+
+      this.sipMix = SipMix.getInstance({
+        domain, port,
+        path
+      })
+      this.sipMix.on('socketError', () => this.prompt = this.$t('connectionFailedPleaseCheckYourNetwork'))
+
+      this.sipMix.on('connecting', () => this.prompt = this.$t('serverConnected') + '...')
+      this.sipMix.on('connected', () => {
+        this.prompt = this.$t('serverConnected')
+        if (!register && autoDial) {
+          this.onMakeCallBtnClick()
+        }
+      })
+      this.sipMix.on('disconnected', () => this.prompt = this.$t('connectionClosed'))
+
+      // 非注册模式不会触发以下3个事件
+      this.sipMix.on('registered', () => {
+        this.prompt = this.$t('registered')
+        if (register && autoDial) {
+          this.onMakeCallBtnClick()
+        }
+      })
+      this.sipMix.on('unregistered', () => this.prompt = this.$t('unregistered'))
+      this.sipMix.on('registrationFailed', () => this.prompt = this.$t('registerFailed'))
+
+
+      this.sipMix.on('newSession', ({sessionId}) => {
+        console.info('New session, session id: ', sessionId)
+      })
+
+      // 处理通话失败事件
+      this.sipMix.on('failed', (e) => {
+        console.warn('通话失败', e)
+        this.stopDurationCount()  // 确保停止计时器 0105
+        this.dealCallEndOrFail()  // 清理通话相关状态
+        this.callPrompt = this.$t('cancelled')  // 显示通话已取消提示
+        
+        // 触发挂断事件，通知父组件
+        this.$emit('hangup', {
+          imType: 0,  // 即时通讯类型
+          reason: 'call_failed',  // 失败原因
+          error: e  // 错误信息
+        });
+        
+        // 2秒后恢复默认提示
+        setTimeout(() => {
+          this.callPrompt = this.$t('pleaseBePatient')
+        }, 2000)
+      })
+
+      // 处理通话结束事件（对方挂断或通话正常结束）
+      this.sipMix.on('ended', () => {
+        console.warn('通话结束')
+        this.stopDurationCount()  // 确保停止计时器 0105
+        this.dealCallEndOrFail()  // 清理通话相关状态
+        this.callPrompt = this.$t('hangedUp')  // 显示通话已挂断提示
+        
+        // 触发挂断事件，通知父组件
+        this.$emit('hangup', {
+          imType: 0,  // 即时通讯类型
+          reason: 'call_ended'  // 通话结束原因
+        });
+        
+        // 2秒后恢复默认提示
+        setTimeout(() => {
+          this.callPrompt = this.$t('pleaseBePatient')
+        }, 2000)
+      })
+
+      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
+      })
+
+      this.sipMix.on('remoteStream', (stream, info) => {
+        console.info('remoteStream', stream, info)
+        this._resetCmpWHLRTB()
+
+        Object.assign(this.localVideo, {
+          w: parseInt(this.clientWidth / 3),
+          h: parseInt(this.clientHeight / 3),
+          x: 0,
+          y: 80,
+          z: 1100,
+          draggable: true
+        })
+        this.$nextTick(() => {
+          this.$refs.localVideoWrapper.moveVertically(80)
+        })
+
+
+        setTimeout(async () => {
+          Object.assign(this.remoteVideo, {
+            show: true,
+            w: this.clientWidth,
+            h: this.clientHeight,
+            x: 0,
+            y: 0,
+            z: 1000,
+            draggable: false
+          })
+
+          await this.$nextTick()
+          if (this.autoHideLocalVideo) {
+            this.localVideo.show = false
+          }
+          this.$refs.remoteVideo.srcObject = stream
+        }, 500)
+
+      })
+
+      this.sipMix.on('remoteRing', () => {
+        this.callPrompt = this.$t('remoteRinging')
+        // this.$refs.audioPlayer.currentTime = 0
+        const promise = this.$refs.audioPlayer.play()
+        if (promise !== undefined) {
+          promise.catch(error => {
+            console.info(error)
+            if (error.name === 'NotAllowedError') {
+              this.showAudioPlayer = true
+            }
+          })
+        }
+      })
+
+      this.sipMix.on('accepted', (e) => {
+        this.callPrompt = this.$t('remoteAccept')
+        const {callId} = e
+        this.callId = callId
+        this.$refs.audioPlayer.pause()
+        this.autoShowHangupBtn()
+      })
+
+      this.sipMix.on('confirmed', () => {
+        this.startDurationCount();  // 通话完全建立后开始计时 0105
+        this.startSendPosition()
+      })
+
+      this.sipMix.on('newInfo', ({content, contentType}) => {
+        console.info('New Info', contentType, content)
+      })
+
+      this.sipMix.start({
+        deviceId: this.callingNum,
+        password,
+        register,
+        debug
+      })
+    },
+
+    startLocate () {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(position => {
+          console.info('Position', position)
+          const {latitude, longitude, altitude } = position?.coords || {}
+          console.info(`获取地里位置信息: ${latitude}, ${longitude}, ${altitude}`)
+          /*this.sendCustomEvent({
+            act: 'position',
+            params: {latitude, longitude, accuracy}
+          })*/
+          this.latitude = latitude
+          this.longitude = longitude
+          this.altitude = altitude
+        }, () => {
+          console.info('获取地里位置信息失败')
+        })
+
+        this.locateHandler = setTimeout (() => {
+          this.startLocate()
+        }, 15000)
+      }
+    },
+
+    stopLocate () {
+      clearTimeout(this.locateHandler)
+    },
+
+    startSendPosition () {
+      if (this.showLocation && this.locateHandler) {
+        this.sipMix.sendInfo({
+          encode: false,
+          content: {
+            type: 'Position',
+            content: {
+              latitude: this.latitude,
+              longitude: this.longitude,
+              altitude: this.altitude
+            }
+          }
+        })
+        /*this.sipMix.sendMessage({
+          target: this.calledNum,
+          content: {
+            type: 'Position',
+            content: {
+              latitude: this.latitude,
+              longitude: this.longitude,
+              altitude: this.altitude
+            }
+          }
+        })*/
+      }
+      this.sendPositionHandler = setTimeout(() => {
+        this.startSendPosition()
+      }, 15000)
+    },
+
+    stopSendPosition () {
+      clearTimeout(this.sendPositionHandler)
+    }
+  },
+
+  async mounted() {
+    console.info('MobilePhone mounted')
+    await this.checkBrowser().catch(e => {
+      this.showSnackbar = true
+      this.snackbarText = e
+    })
+
+    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
+      this.localVideo.w = clientWidth
+      this.localVideo.h = clientHeight
+
+      if (this.showLocation) {
+        this.startLocate()
+      }
+    }, 200)
+
+    this.$nextTick(() => {
+      this.showAudioPlayer = false
+    })
+  },
+
+  beforeDestroy(){
+    this.stopDurationCount();
+    this.sipMix = null;
+    SipMix.destroyInstance()
+  }
+}
+</script>
+<!-- <style>
+@import './vuetify.css';
+</style> -->
+<style lang="scss">
+  .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;
+    }
+
+    .sip-btn-group {
+      width: 100%;
+      position: absolute;
+      //bottom: 250px;
+      bottom: 25%;
+      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;
+    }
+
+    .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">
+  .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;
+    }
+
+    .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%;
+    }
+
+
+    .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;
+    }
+  }
+    /* 隐藏整个控制栏背景 */
+  video::-webkit-media-controls {
+    opacity: 1 !important;
+    height: 20px !important;
+  }
+
+  /* 隐藏进度条（核心） */
+  video::-webkit-media-controls-timeline {
+    display: none !important;
+  }
+
+  /* 隐藏当前时间 */
+  video::-webkit-media-controls-current-time-display {
+    display: none !important;
+  }
+
+  /* 隐藏总时长 */
+  video::-webkit-media-controls-time-remaining-display {
+    display: none !important;
+  }
+
+  /* 完全禁用播放/暂停按钮交互 */
+  video::-webkit-media-controls-play-button {
+    pointer-events: none !important;
+  }
+
+  /* 禁用暂停按钮交互 */
+  video::-webkit-media-controls-pause-button {
+    pointer-events: none !important;
+  }
+
+  /* 禁用整个播放/暂停控制区域交互 */
+  video::-webkit-media-controls-start-playback-button {
+    pointer-events: none !important;
+  }
+
+
+  /* 隐藏音量按钮（可选） */
+  video::-webkit-media-controls-volume-slider {
+    display: none !important;
+  }
+</style>