@zhangxuejing123./sip-phone-sdk 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/babel.config.js +5 -0
- package/dist/demo.html +21 -0
- package/dist/media/outgoing-call2.b8558579.mp3 +0 -0
- package/dist/sip-phone-sdk.common.js +42439 -0
- package/dist/sip-phone-sdk.css +5 -0
- package/dist/sip-phone-sdk.umd.js +42449 -0
- package/dist/sip-phone-sdk.umd.min.js +14 -0
- package/jsconfig.json +19 -0
- package/package-lock.json +15671 -0
- package/package.json +99 -0
- package/public/SIP_MIX_WEB.js +50 -0
- package/public/en.js +24 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +32 -0
- package/public/index.test.html +31 -0
- package/public/zh.js +24 -0
- package/src/.DS_Store +0 -0
- package/src/App.vue +136 -0
- package/src/assets/.DS_Store +0 -0
- package/src/assets/adudio-open.png +0 -0
- package/src/assets/audio-close.png +0 -0
- package/src/assets/call-down.png +0 -0
- package/src/assets/camera-close.png +0 -0
- package/src/assets/camera-open.png +0 -0
- package/src/assets/icon_Recording_Fill_Red_Active.svg +15 -0
- package/src/assets/icon_Recording_Fill_Red_Inactive.svg +15 -0
- package/src/assets/img_Avatar_User.png +0 -0
- package/src/assets/normal-logo.png +0 -0
- package/src/assets/outgoing-call2.mp3 +0 -0
- package/src/components/DialPanelMini.vue +179 -0
- package/src/components/MobilePhone copy 2.vue +1173 -0
- package/src/components/MobilePhone copy.vue +1046 -0
- package/src/components/MobilePhone.vue +1157 -0
- package/src/components/index.js +36 -0
- package/src/components/vuetify.css +29663 -0
- package/src/index.js +100 -0
- package/src/lang/en.js +24 -0
- package/src/lang/zh.js +24 -0
- package/src/libs/SIP_MIX_WEB.js +50 -0
- package/src/libs/en.js +24 -0
- package/src/libs/tool.js +312 -0
- package/src/libs/zh.js +24 -0
- package/src/main.js +24 -0
- package/src/plugins/vuetify.js +11 -0
- package/src/utils/rem.js +22 -0
- package/vue.config copy 2.js +39 -0
- package/vue.config copy.js +11 -0
- package/vue.config.js +39 -0
package/public/en.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Created by Wade (weida1985@163.com) on 2023/8/1.
|
|
3
|
+
*/
|
|
4
|
+
const en={
|
|
5
|
+
serverConnecting: 'Server connecting',
|
|
6
|
+
serverConnected: 'Server connected',
|
|
7
|
+
connectionClosed: 'Connection closed',
|
|
8
|
+
clickButtonToMakeCall: 'Click button to make call',
|
|
9
|
+
gotCameraStreamFailed: 'Got camera stream failed',
|
|
10
|
+
calling: 'Calling',
|
|
11
|
+
pleaseBePatient: 'Please be patient',
|
|
12
|
+
cameraOrMicUnsupported: 'Camera or mic unsupported',
|
|
13
|
+
WebRTCUnsupported: 'WebRTC unsupported',
|
|
14
|
+
connectionFailedPleaseCheckYourNetwork: 'Connection failed. Please check your network',
|
|
15
|
+
registered: 'Registered',
|
|
16
|
+
unregistered: 'Unregistered',
|
|
17
|
+
registerFailed: 'Register failed',
|
|
18
|
+
cancelled: 'Cancelled',
|
|
19
|
+
hangedUp: 'hangedUp',
|
|
20
|
+
remoteRinging: 'Remote ringing',
|
|
21
|
+
remoteAccept: 'Remote accept'
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default en
|
|
Binary file
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
|
8
|
+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
9
|
+
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
10
|
+
<script>
|
|
11
|
+
window.config = {
|
|
12
|
+
domain: 'kefu-gm-rtc-dat.boc-samsunglife.cn',
|
|
13
|
+
path: 'webcall',
|
|
14
|
+
port: 443,
|
|
15
|
+
lang: 'zh',
|
|
16
|
+
videoParams: {
|
|
17
|
+
frameRate: 25,
|
|
18
|
+
width: { min: 480, max: 480 },
|
|
19
|
+
height: { min: 640, max: 640 }
|
|
20
|
+
},
|
|
21
|
+
videoCodec: 'h264'
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<noscript>
|
|
27
|
+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
28
|
+
</noscript>
|
|
29
|
+
<div id="app"></div>
|
|
30
|
+
<!-- built files will be auto injected -->
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>script 标签引入</title>
|
|
6
|
+
<script src="./SIP_MIX_WEB.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body onload="onload()">
|
|
9
|
+
|
|
10
|
+
<h1>
|
|
11
|
+
This is a test page for script import.
|
|
12
|
+
</h1>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
window.config = {
|
|
16
|
+
domain: 'videocc.cincc.cn',
|
|
17
|
+
path: 'webcall',
|
|
18
|
+
port: 5049
|
|
19
|
+
}
|
|
20
|
+
function onload () {
|
|
21
|
+
const sipMix = SIP_MIX_WEB.getInstance(window.config)
|
|
22
|
+
console.info(sipMix)
|
|
23
|
+
sipMix.start({
|
|
24
|
+
password: '',
|
|
25
|
+
register: false,
|
|
26
|
+
debug: true
|
|
27
|
+
})
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
package/public/zh.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Created by Wade (weida1985@163.com) on 2023/8/1.
|
|
3
|
+
*/
|
|
4
|
+
const zh={
|
|
5
|
+
serverConnecting: '服务器连接中',
|
|
6
|
+
serverConnected: '服务器已连接',
|
|
7
|
+
connectionClosed: '连接已断开',
|
|
8
|
+
clickButtonToMakeCall: '点击拨号开始呼叫',
|
|
9
|
+
gotCameraStreamFailed: '获取摄像头视频流失败',
|
|
10
|
+
calling: '呼叫中',
|
|
11
|
+
// pleaseBePatient: '请耐心等待',
|
|
12
|
+
pleaseBePatient: '正在邀请对方加入视频通话...',
|
|
13
|
+
cameraOrMicUnsupported: '不支持开启摄像头或Mic接口',
|
|
14
|
+
WebRTCUnsupported: '不支持WebRTC',
|
|
15
|
+
connectionFailedPleaseCheckYourNetwork: '服务器连接失败，请检查网络。',
|
|
16
|
+
registered: '已注册',
|
|
17
|
+
unregistered: '已注销',
|
|
18
|
+
registerFailed: '注册失败',
|
|
19
|
+
cancelled: '已取消',
|
|
20
|
+
hangedUp: '已挂机',
|
|
21
|
+
remoteRinging: '对端开始振铃',
|
|
22
|
+
remoteAccept: '已接通'
|
|
23
|
+
}
|
|
24
|
+
export default zh
|
package/src/.DS_Store
ADDED
|
Binary file
|
package/src/App.vue
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-app style="background-color: rgba(5,29,63)">
|
|
3
|
+
|
|
4
|
+
<!-- <button @click="onMakeCall">拨号</button> -->
|
|
5
|
+
<v-main>
|
|
6
|
+
<v-container fluid class="fill-height pa-0 align-center justify-center">
|
|
7
|
+
<component
|
|
8
|
+
:is="phoneComponent"
|
|
9
|
+
ref="mobilePhone"
|
|
10
|
+
:calling-num="callingNum"
|
|
11
|
+
:called-num="calledNum"
|
|
12
|
+
:call-type="callType"
|
|
13
|
+
:needDial="dialPad"
|
|
14
|
+
:autoHideLocalVideo="autoHideLocalVideo"
|
|
15
|
+
:showLocation="showLocation"
|
|
16
|
+
:call-data="callData"
|
|
17
|
+
@hangup="onHangup"
|
|
18
|
+
style="max-width: 480px; max-height: 852px;"
|
|
19
|
+
@hook:mounted="onPhoneComponentMounted"
|
|
20
|
+
/>
|
|
21
|
+
</v-container>
|
|
22
|
+
</v-main>
|
|
23
|
+
</v-app>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
import { getUrlParams } from '@/libs/tool'
|
|
28
|
+
import VConsole from 'vconsole'
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
name: 'App',
|
|
32
|
+
components: {
|
|
33
|
+
MobilePhone: () => import('@/components/MobilePhone')
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
data: () => ({
|
|
37
|
+
debug: false,
|
|
38
|
+
password: '',
|
|
39
|
+
calledNum: '',
|
|
40
|
+
callingNum: 'H5User',
|
|
41
|
+
callType: 'video',
|
|
42
|
+
callData: '',
|
|
43
|
+
dialPad: false,
|
|
44
|
+
phoneComponent: null,
|
|
45
|
+
autoHideLocalVideo: false,
|
|
46
|
+
showLocation: false,
|
|
47
|
+
autoDial: false
|
|
48
|
+
}),
|
|
49
|
+
|
|
50
|
+
methods: {
|
|
51
|
+
onPhoneComponentMounted () {
|
|
52
|
+
if (this.dialPad && this.calledNum) {
|
|
53
|
+
this.$refs.mobilePhone.setDialNum(this.calledNum)
|
|
54
|
+
}
|
|
55
|
+
this.$refs.mobilePhone.startSip({debug: this.debug, password: decodeURIComponent(this.password), register: !!this.password, autoDial: this.autoDial})
|
|
56
|
+
},
|
|
57
|
+
onMakeCall(){
|
|
58
|
+
const val = {
|
|
59
|
+
// calledNum: '000001100002011001',
|
|
60
|
+
// callData: '{"calledNum":"000001100002011001","videoRecordId":"ae756872ff3a122817848719605aa5cb"}'
|
|
61
|
+
calledNum: '0000021000021001',
|
|
62
|
+
// callData: '{"calledNum":"0000021000021001","videoRecordId":"41895659bea0f020c37f4a7f8a3db928"}'
|
|
63
|
+
callData: JSON.stringify({ // 通话相关数据
|
|
64
|
+
calledNum: '0000021000021001',
|
|
65
|
+
videoRecordId: '41895659bea0f020c37f4a7f8a3db928'
|
|
66
|
+
})
|
|
67
|
+
// calledNum:0000021000021001 videoRecordId:41895659bea0f020c37f4a7f8a3db928
|
|
68
|
+
}
|
|
69
|
+
this.$refs.mobilePhone.handleWechatParams(val)
|
|
70
|
+
},
|
|
71
|
+
// 处理挂断事件
|
|
72
|
+
onHangup(data) {
|
|
73
|
+
console.log('通话已挂断', data)
|
|
74
|
+
// 这里可以添加挂断后的处理逻辑更新UI、记录日志等
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
mounted () {
|
|
79
|
+
let {
|
|
80
|
+
calledNum = '0000021000021001',
|
|
81
|
+
//calledNum = '000001100002011001',
|
|
82
|
+
debug = 'false',
|
|
83
|
+
dialPad = 'false',
|
|
84
|
+
callingNum,
|
|
85
|
+
av = 'video',
|
|
86
|
+
password = '',
|
|
87
|
+
autoHideLocalVideo = 'false',
|
|
88
|
+
showLocation = 'false',
|
|
89
|
+
autoDial = 'false',
|
|
90
|
+
|
|
91
|
+
callData = JSON.stringify({ // 通话相关数据
|
|
92
|
+
calledNum: '0000021000021001',
|
|
93
|
+
videoRecordId: '41895659bea0f020c37f4a7f8a3db928'
|
|
94
|
+
}) } = getUrlParams()
|
|
95
|
+
if (debug === 'true' && process.env.NODE_ENV === 'production') {
|
|
96
|
+
// eslint-disable-next-line no-unused-vars
|
|
97
|
+
new VConsole()
|
|
98
|
+
}
|
|
99
|
+
this.debug = debug === 'true'
|
|
100
|
+
this.dialPad = dialPad === 'true'
|
|
101
|
+
|
|
102
|
+
this.calledNum = calledNum
|
|
103
|
+
this.callingNum = callingNum
|
|
104
|
+
this.callType = av === 'videoonly' ? 'videoOnly' : av
|
|
105
|
+
this.password = password
|
|
106
|
+
this.autoHideLocalVideo = autoHideLocalVideo !== 'false'
|
|
107
|
+
this.showLocation = showLocation === 'true'
|
|
108
|
+
this.autoDial = autoDial === 'true'
|
|
109
|
+
this.callData = callData
|
|
110
|
+
|
|
111
|
+
this.phoneComponent = 'MobilePhone'
|
|
112
|
+
setTimeout(() => {
|
|
113
|
+
this.onMakeCall()
|
|
114
|
+
}, 3000)
|
|
115
|
+
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style lang="scss">
|
|
121
|
+
html, body, p {
|
|
122
|
+
margin: 0;
|
|
123
|
+
padding: 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
html, body {
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
#app {
|
|
131
|
+
height: 100vh;
|
|
132
|
+
width: 100vw;
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
</style>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
|
4
|
+
<title>icon_Recording_Fill_Red_Active</title>
|
|
5
|
+
<desc>Created with Sketch.</desc>
|
|
6
|
+
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
7
|
+
<g id="Console_Videocall" transform="translate(-308.000000, -105.000000)" fill="#FF0000">
|
|
8
|
+
<g id="用户视频" transform="translate(294.000000, 90.000000)">
|
|
9
|
+
<g id="time" transform="translate(8.000000, 10.000000)">
|
|
10
|
+
<path d="M13,5 C9.13232668,5.00707761 6.00707761,8.13232668 6,12 C6,15.8676733 9.13232668,19 13,19 C16.8676733,19 20,15.8676733 20,12 C20,8.13232668 16.8676733,5 13,5 Z M13,17.4798152 C9.97373392,17.4798152 7.5201675,15.0191712 7.5201675,12 C7.5201675,8.98081153 9.97373392,6.52018476 13,6.52018476 C16.0262488,6.52018476 18.4798152,8.98081153 18.4798152,12 C18.4798152,15.0191712 16.0262488,17.4798152 13,17.4798152 Z M8.9131106,12 C8.9131106,14.2625917 10.7444168,16.0868894 13,16.0868894 C15.2555832,16.0868894 17.0868894,14.2555832 17.0868894,12 C17.0868894,9.73740826 15.2555832,7.9131106 13,7.9131106 C10.7444168,7.9131106 8.9131106,9.73740826 8.9131106,12 Z" id="icon_Recording_Fill_Red_Active"></path>
|
|
11
|
+
</g>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
|
4
|
+
<title>icon_Recording_Fill_Red_Inactive</title>
|
|
5
|
+
<desc>Created with Sketch.</desc>
|
|
6
|
+
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
7
|
+
<g id="Console_Videocall" transform="translate(-308.000000, -105.000000)" fill="#FF4A4A">
|
|
8
|
+
<g id="用户视频" transform="translate(294.000000, 90.000000)">
|
|
9
|
+
<g id="time" transform="translate(8.000000, 10.000000)">
|
|
10
|
+
<path d="M13,5 C9.13232668,5.00707761 6.00707761,8.13232668 6,12 C6,15.8676733 9.13232668,19 13,19 C16.8676733,19 20,15.8676733 20,12 C20,8.13232668 16.8676733,5 13,5 Z M13,17.4798152 C9.97373392,17.4798152 7.5201675,15.0191712 7.5201675,12 C7.5201675,8.98081153 9.97373392,6.52018476 13,6.52018476 C16.0262488,6.52018476 18.4798152,8.98081153 18.4798152,12 C18.4798152,15.0191712 16.0262488,17.4798152 13,17.4798152 Z M8.9131106,12 C8.9131106,14.2625917 10.7444168,16.0868894 13,16.0868894 C15.2555832,16.0868894 17.0868894,14.2555832 17.0868894,12 C17.0868894,9.73740826 15.2555832,7.9131106 13,7.9131106 C10.7444168,7.9131106 8.9131106,9.73740826 8.9131106,12 Z" id="icon_Recording_Fill_Red_Inactive"></path>
|
|
11
|
+
</g>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</svg>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="background-color: transparent; width: 100%; position: absolute; bottom: 96px; z-index: 4000;" :style="isCalling ? 'opacity: 0.6' : ''">
|
|
3
|
+
<div class="dial-panel pl-10 pr-10 d-flex flex-column align-center">
|
|
4
|
+
<v-row no-gutters class="d-flex justify-space-around mb-12" style="font-size: 36px; color: #FFFFFF;">
|
|
5
|
+
{{dialNum}}
|
|
6
|
+
</v-row>
|
|
7
|
+
|
|
8
|
+
<div style="width: 240px;">
|
|
9
|
+
<v-row no-gutters class="d-flex justify-space-around mt-0 mb-3">
|
|
10
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
11
|
+
1
|
|
12
|
+
</v-btn>
|
|
13
|
+
|
|
14
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
15
|
+
2
|
|
16
|
+
</v-btn>
|
|
17
|
+
|
|
18
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
19
|
+
3
|
|
20
|
+
</v-btn>
|
|
21
|
+
</v-row>
|
|
22
|
+
|
|
23
|
+
<v-row no-gutters class="d-flex justify-space-around mt-3 mb-3">
|
|
24
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
25
|
+
4
|
|
26
|
+
</v-btn>
|
|
27
|
+
|
|
28
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
29
|
+
5
|
|
30
|
+
</v-btn>
|
|
31
|
+
|
|
32
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
33
|
+
6
|
|
34
|
+
</v-btn>
|
|
35
|
+
</v-row>
|
|
36
|
+
<v-row no-gutters class="d-flex justify-space-around mt-3 mb-3">
|
|
37
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
38
|
+
7
|
|
39
|
+
</v-btn>
|
|
40
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
41
|
+
8
|
|
42
|
+
</v-btn>
|
|
43
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
44
|
+
9
|
|
45
|
+
</v-btn>
|
|
46
|
+
</v-row>
|
|
47
|
+
|
|
48
|
+
<v-row no-gutters class="d-flex justify-space-around mt-3 mb-3">
|
|
49
|
+
<v-col cols="4" class="text-center">
|
|
50
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
51
|
+
*
|
|
52
|
+
</v-btn>
|
|
53
|
+
</v-col>
|
|
54
|
+
<v-col cols="4" class="text-center">
|
|
55
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
56
|
+
0
|
|
57
|
+
</v-btn>
|
|
58
|
+
</v-col>
|
|
59
|
+
<v-col cols="4" class="text-center">
|
|
60
|
+
<v-btn fab @click="onDialNumClick" large>
|
|
61
|
+
#
|
|
62
|
+
</v-btn>
|
|
63
|
+
</v-col>
|
|
64
|
+
</v-row>
|
|
65
|
+
|
|
66
|
+
<v-row no-gutters class="d-flex justify-space-around mt-3 mb-3" >
|
|
67
|
+
<v-col cols="4" class="text-center">
|
|
68
|
+
<v-expand-x-transition>
|
|
69
|
+
<v-btn color="blue" fab @click="onCallBtnClick($event,'audio')" v-show="!isCalling" large>
|
|
70
|
+
<v-icon color="white">mdi-phone</v-icon>
|
|
71
|
+
</v-btn>
|
|
72
|
+
</v-expand-x-transition>
|
|
73
|
+
</v-col>
|
|
74
|
+
|
|
75
|
+
<v-col cols="4" class="text-center" >
|
|
76
|
+
<v-expand-x-transition>
|
|
77
|
+
<v-btn color="red" fab @click="onHangupBtnClick" v-show="isCalling" large>
|
|
78
|
+
<v-icon color="white">mdi-phone-hangup</v-icon>
|
|
79
|
+
</v-btn>
|
|
80
|
+
</v-expand-x-transition>
|
|
81
|
+
<v-expand-x-transition>
|
|
82
|
+
<v-btn color="green" fab @click="onCallBtnClick($event, 'video')" v-show="!isCalling" large>
|
|
83
|
+
<v-icon color="white">mdi-video</v-icon>
|
|
84
|
+
</v-btn>
|
|
85
|
+
</v-expand-x-transition>
|
|
86
|
+
</v-col>
|
|
87
|
+
|
|
88
|
+
<v-col cols="4" class="text-center" >
|
|
89
|
+
<!-- <v-expand-x-transition>
|
|
90
|
+
<v-btn fab @click="onCallBtnClick($event, 'video')" v-show="!isCalling" large>
|
|
91
|
+
<v-icon color="white">mdi-video</v-icon>
|
|
92
|
+
</v-btn>
|
|
93
|
+
</v-expand-x-transition>-->
|
|
94
|
+
<v-expand-x-transition>
|
|
95
|
+
<v-btn fab @click="onCloseBtnClick" v-show="isCalling" large>
|
|
96
|
+
<v-icon>mdi-window-close</v-icon>
|
|
97
|
+
</v-btn>
|
|
98
|
+
</v-expand-x-transition>
|
|
99
|
+
|
|
100
|
+
<v-expand-x-transition>
|
|
101
|
+
<v-btn fab depressed @click="onDeleteBtnClick" v-show="!isCalling" large style="opacity: 0.5">
|
|
102
|
+
<v-icon>mdi-backspace</v-icon>
|
|
103
|
+
</v-btn>
|
|
104
|
+
</v-expand-x-transition>
|
|
105
|
+
</v-col>
|
|
106
|
+
</v-row>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</template>
|
|
111
|
+
|
|
112
|
+
<script>
|
|
113
|
+
export default {
|
|
114
|
+
name: 'DialPanelMini',
|
|
115
|
+
props: {
|
|
116
|
+
isCalling: {
|
|
117
|
+
type: Boolean
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
data: () => ({
|
|
121
|
+
isInnerCall: false,
|
|
122
|
+
dialNum: '95518'
|
|
123
|
+
}),
|
|
124
|
+
|
|
125
|
+
methods: {
|
|
126
|
+
onDialNumClick (e) {
|
|
127
|
+
e.stopPropagation()
|
|
128
|
+
const num = e.target.innerText
|
|
129
|
+
this.dialNum = (this.dialNum || '') + num
|
|
130
|
+
|
|
131
|
+
if (this.isCalling) {
|
|
132
|
+
this.$emit('dtmf', num)
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
|
|
136
|
+
onCloseBtnClick () {
|
|
137
|
+
this.$emit('close')
|
|
138
|
+
},
|
|
139
|
+
|
|
140
|
+
onDeleteBtnClick (e) {
|
|
141
|
+
e.stopPropagation()
|
|
142
|
+
if (this.dialNum) {
|
|
143
|
+
this.dialNum = this.dialNum.substr(0, this.dialNum.length - 1)
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
|
|
147
|
+
onCallBtnClick (e, type) {
|
|
148
|
+
e.stopPropagation()
|
|
149
|
+
this.$emit('makeCall', {
|
|
150
|
+
isInnerCall: this.isInnerCall,
|
|
151
|
+
type,
|
|
152
|
+
dialNum: this.dialNum
|
|
153
|
+
})
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
onHangupBtnClick (e) {
|
|
157
|
+
e.stopPropagation()
|
|
158
|
+
this.$emit('hangup', {
|
|
159
|
+
dialNum: this.dialNum
|
|
160
|
+
})
|
|
161
|
+
},
|
|
162
|
+
|
|
163
|
+
setDialNum (dialNum) {
|
|
164
|
+
this.dialNum = dialNum
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
</script>
|
|
169
|
+
|
|
170
|
+
<style lang="scss">
|
|
171
|
+
.dial-panel {
|
|
172
|
+
.row {
|
|
173
|
+
.v-btn__content {
|
|
174
|
+
font-size: 24px;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
</style>
|