@zhangxuejing123./sip-phone-sdk 0.0.0

package/src/components/MobilePhone copy.vue

@@ -0,0 +1,1046 @@
+<!-- 主模板：视频通话界面 -->
+<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="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" v-if="!miniMode && !showDialPad" style="margin-top: 60px;">
+      <!-- 应用logo -->
+      <img class="elevation-4" alt="logo" :src="require('@/assets/normal-logo.png')" width="72" height="72" style="border-radius: 50%;"/>
+      <!-- 通话状态提示 -->
+      <p class="mt-6 mb-0" style="font-size: 16px; color: #FFFFFF;">{{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" style="font-size: 16px; color: #FFFFFF;">
+            视频时长{{duration}}
+          </div>
+        </v-col>
+      </v-row>
+      <!-- 第一行按钮组 -->
+      <v-row class="d-flex justify-space-around mb-10">
+        <!-- 拨号按钮 -->
+        <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
+            style="opacity: .6"
+            color="blue-grey"
+            fab
+            large
+            dark
+            v-show="isCalling && showHangup"
+            @click="onMuteBtnClick('audio')"
+        >
+         <!-- 静音状态显示开启的麦克风图标 -->
+          <img v-if="!isAudioMute" :src="require('@/assets/adudio-open.png')" alt="mic-on" width="24" height="24">
+          <img v-else :src="require('@/assets/audio-close.png')" alt="mic-off" width="24" height="24">
+          <!-- 显示当前状态的文字提示 -->
+          <!-- <span class="btn-label">{{ isAudioMute ? '取消静音' : '静音' }}</span> -->
+        </v-btn>
+
+        <!-- 摄像头开关按钮 -->
+        <v-btn
+            style="opacity: .6"
+            color="blue-grey"
+            fab
+            large
+            dark
+            v-show="isCalling && showHangup"
+            @click="onMuteBtnClick('video')"
+        >
+          <img v-if="!isVideoMute" :src="require('@/assets/camera-open.png')" alt="mic-on" width="24" height="24">
+          <img v-else :src="require('@/assets/camera-close.png')" alt="mic-off" width="24" height="24">
+        </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>
+
+      <!-- 第二行按钮组 -->
+      <v-row class="d-flex justify-space-around mt-10">
+        <!-- 拨号盘按钮 -->
+        <v-btn
+            style="opacity: .6"
+            large
+            fab
+            v-show="needDial && !showDialPad"
+            @click="onDialPadBtnClick"
+        >
+          <v-icon>mdi-dialpad</v-icon>
+          <span class="btn-label">拨号盘</span>
+        </v-btn>
+
+        <!-- 挂断按钮 -->
+        <v-btn
+            style="opacity: 1; background: transparent; box-shadow: none;"
+            fab
+            large
+            v-show="isCalling && showHangup"
+            @click="onHangupBtnClick"
+        >
+          <img :src="require('@/assets/call-down.png')" alt="hangup" width="56" height="56">
+        </v-btn>
+
+        <!-- 切换摄像头按钮 -->
+        <v-btn
+          style="opacity: .6"
+          color="blue-grey"
+          fab
+          large
+          dark
+          v-show="isCalling && showHangup"
+          @click="onSwitchCameraBtnClick"
+        >
+          <v-icon>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>
+
+        <!-- 视频控制区域 -->
+        <!-- <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
+        :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}`
+    }
+  },
+
+  methods: {
+    _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 }
+      if (this.callType === 'videoOnly') {
+        params.video = Object.assign({
+          facingMode: 'user'
+        }, window.config.videoParams)
+        params.audio = false
+      } else if (this.callType === '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.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()
+    },
+
+    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('failed', e)
+        this.dealCallEndOrFail()
+        this.callPrompt = this.$t('cancelled')
+        setTimeout(() => {
+          this.callPrompt = this.$t('pleaseBePatient')
+        }, 2000)
+      })
+
+      this.sipMix.on('ended', () => {
+        console.warn('ended')
+        this.dealCallEndOrFail()
+        this.callPrompt = this.$t('hangedUp')
+        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 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;
+}
+
+.btn-group {
+  width: 100%;
+  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 {
+  // touch-action: none;
+  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>