@zhangxuejing123./sip-phone-sdk 0.0.0

package/src/components/MobilePhone.vue

@@ -0,0 +1,1157 @@
+<!-- 主模板：视频通话界面 -->
+<template>
+  <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
+  <div class="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="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png"/>
+      <!-- 通话状态提示 -->
+      <p class="mt-6 mb-0 call-label" >{{callPrompt}}</p>
+    </div>
+    <!-- 功能按钮区域 -->
+    <div class="pr-10 pl-10 btn-group" 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="https://kefu-gm-jc-dat.boc-samsunglife.cn/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"
+        >
+          <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
+            v-show="isCalling && showHangup"
+            @click="onMuteBtnClick('video')"
+            class="custom-mute-btn"
+        >
+          <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-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;"
+            v-show="isCalling && showHangup"
+            @click="onHangupBtnClick"
+        >
+          <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
+          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;"
+            controls
+          ></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"
+            class="sip-call-video"
+            controls
+          ></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'
+
+
+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'),
+
+      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: {
+    // 处理微信公众号参数
+    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('测试模式：使用模拟参数');
+      
+      // ===== 原始代码（已注释） ===== // 用于微信公众号 此方式是获取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})
+      }
+    },
+
+    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.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.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.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.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(() => {
+      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
+    })
+  }
+}
+</script>
+<!-- <style>
+@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 {
+    position: absolute;
+    bottom: 80px;
+    width: 640px;
+    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;
+  }
+}
+
+.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 {
+    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;
+}
+
+</style>