Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
K
kd_control
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
zhanglw
kd_control
Commits
70e16a1d
Commit
70e16a1d
authored
Sep 27, 2023
by
zhanglw
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
调整
parent
240671f8
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
529 additions
and
47 deletions
+529
-47
dialView.vue
src/components/DialView/dialView.vue
+525
-0
index.vue
src/components/DialView/index.vue
+4
-44
AppMain.vue
src/layout/components/AppMain.vue
+0
-3
No files found.
src/components/DialView/dialView.vue
0 → 100644
View file @
70e16a1d
<
template
>
<!-- 表单渲染 -->
<div
ref=
"dragArea"
v-show=
"visible"
class=
"fixed-View"
:class=
"isMousedown?'grabbing':'grab'"
>
<div
class=
"fixed-View-subTitle"
>
安全帽SOS请求通话:
</div>
<div
v-show=
"status"
class=
"corrugation"
>
<span
style=
"--d: 7"
></span>
<span
style=
"--d: 6"
></span>
<span
style=
"--d: 5"
></span>
<span
style=
"--d: 4"
></span>
<span
style=
"--d: 3"
></span>
<span
style=
"--d: 2"
></span>
<span
style=
"--d: 1"
></span>
<span
style=
"--d: 0"
></span>
<span
style=
"--d: 1"
></span>
<span
style=
"--d: 2"
></span>
<span
style=
"--d: 3"
></span>
<span
style=
"--d: 4"
></span>
<span
style=
"--d: 5"
></span>
<span
style=
"--d: 6"
></span>
<span
style=
"--d: 7"
></span>
</div>
<div
v-show=
"!status"
class=
"corrugation-s"
>
<span
style=
"--d: 7"
></span>
<span
style=
"--d: 6"
></span>
<span
style=
"--d: 5"
></span>
<span
style=
"--d: 4"
></span>
<span
style=
"--d: 3"
></span>
<span
style=
"--d: 2"
></span>
<span
style=
"--d: 1"
></span>
<span
style=
"--d: 0"
></span>
<span
style=
"--d: 1"
></span>
<span
style=
"--d: 2"
></span>
<span
style=
"--d: 3"
></span>
<span
style=
"--d: 4"
></span>
<span
style=
"--d: 5"
></span>
<span
style=
"--d: 6"
></span>
<span
style=
"--d: 7"
></span>
</div>
<div
style=
"text-align: center"
>
<i
v-if=
"status"
class=
"el-icon-phone-outline el-icon--left"
/>
<i
v-else
class=
"el-icon-phone el-icon--left"
/>
{{
message
}}
</div>
<audio
id=
"audioElement"
></audio>
<audio
id=
"localVideo"
></audio>
<div
class=
"fixed-footer"
style=
"text-align: center"
>
<el-button
type=
"success"
style=
"width:120px;font-size:20px"
@
click=
"uaCall"
>
接听
<i
class=
"el-icon-video-play el-icon--right"
></i></el-button>
<el-button
type=
"danger"
style=
"width:120px;font-size:20px"
@
click=
"uaHangup"
>
挂断
<i
class=
"el-icon-video-pause el-icon--right"
></i></el-button>
<el-button
style=
"width:120px;font-size:20px"
@
click=
"cancelView"
>
关闭
<i
class=
"el-icon-circle-close el-icon--right"
></i></el-button>
</div>
</div>
</
template
>
<
script
>
import
{
HttpReq
}
from
'
@/assets/js/common.js
'
;
import
JsSIP
from
'
jssip
'
import
alarm
from
"
@/assets/audio/alarm.mp3
"
;
export
default
{
data
()
{
return
{
isMousedown
:
false
,
visible
:
false
,
title
:
'
安全帽SOS请求通话
'
,
userAgent
:
null
,
session
:
null
,
uaSipInfo
:
null
,
callSipId
:
null
,
status
:
0
,
isReady
:
false
,
audio
:
null
,
loopAgain
:
false
,
message
:
'
正在建立链接,等待服务器响应...
'
,
sosDialTimer
:
null
}
},
mounted
()
{
this
.
$nextTick
(()
=>
{
// 获取DOM元素
const
dragArea
=
this
.
$refs
.
dragArea
// 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
const
clientOffset
=
{}
dragArea
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
this
.
isMousedown
=
true
// const offsetX = dragArea.getBoundingClientRect().left // 获取当前的x轴距离
const
offsetY
=
dragArea
.
getBoundingClientRect
().
top
// 获取当前的y轴距离
// const innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
const
innerY
=
event
.
clientY
-
offsetY
// 获取鼠标在方块内的y轴距
// 缓存 clientX clientY
clientOffset
.
clientX
=
event
.
clientX
clientOffset
.
clientY
=
event
.
clientY
document
.
onmousemove
=
(
event
)
=>
{
// dragArea.style.left = event.clientX - innerX + 'px'
dragArea
.
style
.
top
=
event
.
clientY
-
innerY
+
'
px
'
const
dragAreaTop
=
window
.
innerHeight
-
dragArea
.
getBoundingClientRect
().
height
// const dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width - 160
// if (dragArea.getBoundingClientRect().left
<=
0
)
{
// dragArea.style.left = '0px'
// }
// if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
// dragArea.style.left = dragAreaLeft + 'px'
// }
if
(
dragArea
.
getBoundingClientRect
().
top
<=
100
)
{
dragArea
.
style
.
top
=
'
100px
'
}
if
(
dragArea
.
getBoundingClientRect
().
top
>=
dragAreaTop
)
{
dragArea
.
style
.
top
=
dragAreaTop
+
'
px
'
}
}
document
.
onmouseup
=
()
=>
{
document
.
onmousemove
=
null
document
.
onmouseup
=
null
this
.
isMousedown
=
false
}
},
false
)
// 绑定鼠标松开事件
dragArea
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
// const clientX = event.clientX
// const clientY = event.clientY
// if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
// console.log('click 事件')
// } else {
// console.log('drag 事件')
// }
})
})
},
methods
:
{
audioPlayByUrl
(
url
)
{
this
.
$nextTick
(()
=>
{
this
.
audio
=
document
.
createElement
(
"
audio
"
);
this
.
audio
.
currentTime
=
0
;
this
.
audio
.
src
=
url
;
setTimeout
(()
=>
{
this
.
audio
.
addEventListener
(
'
ended
'
,
()
=>
{
if
(
this
.
loopAgain
)
{
this
.
audio
.
play
();
}
},
false
);
this
.
audio
.
play
();
},
1500
)
})
},
uaRegister
()
{
let
sip_uri_
=
`sip:
${
this
.
uaSipInfo
.
adminsip_id
}
@
${
this
.
uaSipInfo
.
adminwsip_host
}
`
;
let
sip_password_
=
`
${
this
.
uaSipInfo
.
adminsip_pwd
}
`
;
let
ws_uri_
=
`
${
this
.
uaSipInfo
.
adminwss_url
}
`
;
console
.
info
(
"
get input info: sip_uri =
"
,
sip_uri_
,
"
sip_password =
"
,
sip_password_
,
"
ws_uri =
"
,
ws_uri_
);
let
socket
=
new
JsSIP
.
WebSocketInterface
(
ws_uri_
);
let
configuration
=
{
sockets
:
[
socket
],
uri
:
sip_uri_
,
password
:
sip_password_
,
session_timers
:
false
,
// 启用会话计时器(根据RFC 4028)
user_agent
:
"
Aegis WebRTC v1.0
"
,
contact_uri
:
sip_uri_
,
autostart
:
true
,
// 自动连接
register
:
true
,
// 自动就绪
};
this
.
userAgent
=
new
JsSIP
.
UA
(
configuration
);
this
.
userAgent
.
on
(
"
connecting
"
,
(
args
)
=>
{
this
.
message
=
`开始尝试连接...`
;
console
.
info
(
"
开始尝试连接
"
,
args
);
});
this
.
userAgent
.
on
(
'
registered
'
,
(
data
)
=>
{
console
.
info
(
"
registered:
"
,
data
.
response
.
status_code
,
"
,
"
,
data
.
response
.
reason_phrase
);
this
.
message
=
`监测到安全帽SOS通话请求,请接听...`
;
this
.
isReady
=
true
});
this
.
userAgent
.
on
(
'
registrationFailed
'
,
(
data
)
=>
{
console
.
log
(
"
registrationFailed,
"
,
data
);
});
this
.
userAgent
.
on
(
'
registrationExpiring
'
,
()
=>
{
console
.
warn
(
"
registrationExpiring
"
);
});
this
.
userAgent
.
on
(
'
newRTCSession
'
,
(
e
)
=>
{
this
.
message
=
`注意:您有新的
${
e
.
originator
===
"
local
"
?
"
外呼
"
:
"
来电
"
}
`
;
console
.
log
(
`新的
${
e
.
originator
===
"
local
"
?
"
外呼
"
:
"
来电
"
}
`
,
e
);
const
session
=
e
.
session
;
this
.
session
=
session
;
const
peerconnection
=
session
.
connection
;
if
(
e
.
originator
===
"
local
"
)
{
// 打电话
peerconnection
.
addEventListener
(
"
addstream
"
,
(
event
)
=>
{
const
audio
=
document
.
getElementById
(
"
audioElement
"
);
audio
.
srcObject
=
event
.
stream
;
});
}
else
{
document
.
getElementById
(
"
localVideo
"
).
play
();
// 接电话
this
.
dialogVisible
=
true
;
this
.
isg
=
true
;
this
.
callers
=
session
.
remote_identity
.
uri
.
user
;
}
// 接通,在这一步可以处理音频播放
// 接通并不代表对方已经接受,接通代表 滴 滴 滴
session
.
on
(
"
confirmed
"
,
()
=>
{
console
.
info
(
"
接通中
"
);
this
.
message
=
`已接通,请通话...`
;
this
.
status
=
1
;
const
audioElement
=
document
.
getElementById
(
"
audioElement
"
);
audioElement
.
autoplay
=
true
;
const
stream
=
new
MediaStream
();
const
receivers
=
session
.
connection
.
getReceivers
();
if
(
receivers
)
{
receivers
.
forEach
((
receiver
)
=>
stream
.
addTrack
(
receiver
.
track
));
}
audioElement
.
srcObject
=
stream
;
audioElement
.
play
();
});
// 接听失败
session
.
on
(
"
failed
"
,
(
mdata
)
=>
{
const
myAuto
=
document
.
getElementById
(
"
localVideo
"
);
myAuto
.
pause
();
myAuto
.
load
();
this
.
message
=
`来电的时拒接或,未接听对方就挂断...`
;
console
.
info
(
"
来电的时候 拒接或者 还没接听对方自己就挂断了
"
);
});
// 接听成功
session
.
on
(
"
accepted
"
,
(
response
,
cause
)
=>
{
// 嘟嘟嘟
this
.
message
=
`接听成功...`
;
this
.
status
=
1
;
console
.
info
(
"
接听成功
"
);
});
// 接听成功后 挂断
session
.
on
(
"
ended
"
,
()
=>
{
this
.
dialogVisible
=
false
;
this
.
InCall
=
false
;
});
// 通话被挂起
session
.
on
(
"
hold
"
,
(
data
)
=>
{
const
org
=
data
.
originator
;
if
(
org
===
"
local
"
)
{
this
.
message
=
`通话被本地挂起...`
;
console
.
log
(
"
通话被本地挂起:
"
,
org
);
}
else
{
this
.
message
=
`通话被对方挂起...`
;
console
.
log
(
"
通话被对方挂起:
"
,
org
);
}
});
// 通话被继续
session
.
on
(
"
unhold
"
,
(
data
)
=>
{
const
org
=
data
.
originator
;
if
(
org
===
"
local
"
)
{
}
else
{
this
.
message
=
`对方要求继续通话...`
;
console
.
log
(
"
对方要求继续通话:
"
,
org
);
}
});
});
this
.
userAgent
.
on
(
'
newMessage
'
,
(
data
)
=>
{
if
(
data
.
originator
==
'
local
'
)
{
console
.
info
(
'
onNewMessage , OutgoingRequest -
'
,
data
.
request
);
}
else
{
console
.
info
(
'
onNewMessage , IncomingRequest -
'
,
data
.
request
);
}
});
console
.
info
(
"
call register
"
);
this
.
userAgent
.
start
();
},
uaCall
()
{
this
.
loopAgain
=
false
if
(
this
.
isReady
||
this
.
userAgent
)
{
let
sip_phone_number_
=
`sip:
${
this
.
uaSipInfo
.
room_id
}
@
${
this
.
uaSipInfo
.
adminwsip_host
}
`
;
let
options
=
{
'
pcConfig
'
:
{
'
rtcpMuxPolicy
'
:
"
negotiate
"
,
},
'
rtcOfferConstraints
'
:
{
'
offerToReceiveAudio
'
:
'
1
'
,
'
offerToReceiveVideo
'
:
'
0
'
,
},
'
eventHandlers
'
:
{
'
progress
'
:
(
e
)
=>
{
console
.
log
(
'
call is in progress
'
);
},
'
failed
'
:
(
e
)
=>
{
console
.
log
(
'
call failed:
'
,
e
);
},
'
ended
'
:
(
e
)
=>
{
console
.
log
(
'
call ended :
'
,
e
);
console
.
log
(
'
通话结束
'
);
this
.
message
=
`通话结束...`
this
.
status
=
0
this
.
isReady
=
false
},
'
confirmed
'
:
(
e
)
=>
{
console
.
log
(
'
call confirmed
'
);
}
},
'
mediaConstraints
'
:
{
'
audio
'
:
true
,
'
video
'
:
false
,
},
};
this
.
userAgent
.
call
(
sip_phone_number_
,
options
);
}
else
{
this
.
$message
({
message
:
"
尚未建立链接无法拨号通话,请确保链接通畅且对方在线!
"
,
type
:
'
error
'
});
}
},
uaHangup
()
{
this
.
loopAgain
=
false
if
(
this
.
isReady
||
this
.
userAgent
)
{
this
.
isReady
=
false
this
.
userAgent
.
terminateSessions
();
const
myAuto
=
document
.
getElementById
(
"
localVideo
"
);
myAuto
.
pause
();
myAuto
.
load
();
const
audioElement
=
document
.
getElementById
(
"
audioElement
"
);
audioElement
.
pause
();
audioElement
.
load
();
}
},
init
()
{
this
.
message
=
'
正在建立链接,等待服务器响应...
'
this
.
sosDialTimer
=
setInterval
(()
=>
{
if
(
this
.
isReady
)
{
return
}
HttpReq
.
truckDispatching
.
propleGetSOSSipInfo
({}).
then
((
res
)
=>
{
if
(
res
.
msg
)
{
this
.
$notify
({
title
:
res
.
msg
,
type
:
'
error
'
,
});
}
if
(
res
.
data
&&
res
.
data
.
room_id
)
{
this
.
uaSipInfo
=
res
.
data
this
.
showView
()
this
.
uaRegister
()
}
})
},
5000
)
},
showView
()
{
this
.
visible
=
true
this
.
loopAgain
=
true
this
.
audioPlayByUrl
(
alarm
);
},
hideView
()
{
this
.
visible
=
false
this
.
loopAgain
=
false
this
.
uaHangup
()
},
cancelView
()
{
this
.
hideView
()
}
},
beforeDestroy
()
{
this
.
hideView
()
if
(
this
.
sosDialTimer
)
{
clearInterval
(
this
.
sosDialTimer
);
this
.
sosDialTimer
=
null
;
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.touch
{
cursor
:
pointer
;
}
.grab
{
cursor
:
grab
;
}
.grabbing
{
cursor
:
grabbing
;
}
.fixed-View
{
position
:
fixed
;
margin-left
:
0
;
padding
:
10px
;
width
:
520px
;
height
:
226px
;
right
:
1vw
;
bottom
:
6vh
;
background
:
#FFFFFF
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.8
);
box-shadow
:
1px
2px
8px
0
rgba
(
0
,
0
,
0
,
0
.8
);
border-radius
:
10px
;
font-weight
:
400
;
user-select
:
none
;
z-index
:
99
;
.cell-input
{
margin
:
5px
0
;
}
.fixed-footer
{
width
:
100%
;
padding
:
20px
;
}
.fixed-View-subTitle
{
color
:
#333
;
font-size
:
18px
;
padding-top
:
10px
;
padding-bottom
:
5px
;
}
.fixed-View-btn
{
padding
:
10px
;
width
:
100%
;
text-align
:
center
;
.btn
{
margin
:
auto
;
width
:
140px
;
padding
:
6px
;
background
:
#0156E5
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.12
);
border-radius
:
5px
;
color
:
white
;
font-size
:
16px
;
opacity
:
0
.8
;
}
.btn
:hover
{
opacity
:
1
;
}
}
.fixed-View-title
{
text-align
:
center
;
color
:
#0342AB
;
font-size
:
20px
;
}
.fixed-View-location
{
height
:
38px
;
position
:
relative
;
color
:
#666
;
font-size
:
16px
;
img
{
position
:
absolute
;
top
:
9px
;
left
:
236px
;
}
div
{
position
:
absolute
;
top
:
12px
;
left
:
260px
;
}
}
}
.corrugation-s
{
height
:
80px
;
width
:
118px
;
margin
:
auto
;
display
:
flex
;
align-items
:
center
;
position
:
relative
;
}
.corrugation-s
span
{
background
:
linear-gradient
(
to
top
,
#d299c2
0%
,
#fef9d7
100%
);
width
:
4px
;
height
:
60%
;
border-radius
:
4px
;
margin-right
:
4px
;
}
.corrugation-s
span
:last-child
{
margin-right
:
0
;
}
.corrugation
{
height
:
80px
;
width
:
118px
;
margin
:
auto
;
display
:
flex
;
align-items
:
center
;
position
:
relative
;
}
.corrugation
span
{
background
:
linear-gradient
(
to
top
,
#d299c2
0%
,
#fef9d7
100%
);
width
:
4px
;
height
:
20%
;
border-radius
:
10px
;
margin-right
:
4px
;
animation
:
loading
2
.5s
infinite
linear
;
animation-delay
:
calc
(
0
.2s
*
var
(
--
d
));
}
.corrugation
span
:last-child
{
margin-right
:
0
;
}
@keyframes
loading
{
0
%
{
background-image
:
linear-gradient
(
to
right
,
#fa709a
0%
,
#fee140
100%
);
height
:
20%
;
border-radius
:
calc
(
var
(
--
h
)
*
0
.2
*
0
.5
);
}
50
%
{
background-image
:
linear-gradient
(
to
top
,
#d299c2
0%
,
#fef9d7
100%
);
height
:
100%
;
border-radius
:
calc
(
var
(
--
h
)
*
1
*
0
.5
);
}
100
%
{
background-image
:
linear-gradient
(
to
top
,
#a8edea
0%
,
#fed6e3
100%
);
height
:
20%
;
border-radius
:
calc
(
var
(
--
h
)
*
0
.2
*
0
.5
);
}
}
</
style
>
src/components/DialView/index.vue
View file @
70e16a1d
<
template
>
<
template
>
<!-- 表单渲染 -->
<div
ref=
"dragArea"
v-show=
"visible"
class=
"fixed-View"
:class=
"isMousedown?'grabbing':'grab'"
>
<div
ref=
"dragArea"
v-show=
"visible"
class=
"fixed-View"
:class=
"isMousedown?'grabbing':'grab'"
>
<div
class=
"fixed-View-subTitle"
>
安全帽SOS请求通话:
</div>
<div
class=
"fixed-View-subTitle"
>
安全帽SOS请求通话:
</div>
<div
v-show=
"status"
class=
"corrugation"
>
<div
v-show=
"status"
class=
"corrugation"
>
...
@@ -75,30 +74,17 @@ export default {
...
@@ -75,30 +74,17 @@ export default {
},
},
mounted
()
{
mounted
()
{
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
// 获取DOM元素
const
dragArea
=
this
.
$refs
.
dragArea
const
dragArea
=
this
.
$refs
.
dragArea
// 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
const
clientOffset
=
{}
const
clientOffset
=
{}
dragArea
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
dragArea
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
this
.
isMousedown
=
true
this
.
isMousedown
=
true
// const offsetX = dragArea.getBoundingClientRect().left // 获取当前的x轴距离
const
offsetY
=
dragArea
.
getBoundingClientRect
().
top
const
offsetY
=
dragArea
.
getBoundingClientRect
().
top
// 获取当前的y轴距离
const
innerY
=
event
.
clientY
-
offsetY
// const innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
const
innerY
=
event
.
clientY
-
offsetY
// 获取鼠标在方块内的y轴距
// 缓存 clientX clientY
clientOffset
.
clientX
=
event
.
clientX
clientOffset
.
clientX
=
event
.
clientX
clientOffset
.
clientY
=
event
.
clientY
clientOffset
.
clientY
=
event
.
clientY
document
.
onmousemove
=
(
event
)
=>
{
document
.
onmousemove
=
(
event
)
=>
{
// dragArea.style.left = event.clientX - innerX + 'px'
dragArea
.
style
.
top
=
event
.
clientY
-
innerY
+
'
px
'
dragArea
.
style
.
top
=
event
.
clientY
-
innerY
+
'
px
'
const
dragAreaTop
=
window
.
innerHeight
-
dragArea
.
getBoundingClientRect
().
height
const
dragAreaTop
=
window
.
innerHeight
-
dragArea
.
getBoundingClientRect
().
height
// const dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width - 160
// if (dragArea.getBoundingClientRect().left
<=
0
)
{
// dragArea.style.left = '0px'
// }
// if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
// dragArea.style.left = dragAreaLeft + 'px'
// }
if
(
dragArea
.
getBoundingClientRect
().
top
<=
100
)
{
if
(
dragArea
.
getBoundingClientRect
().
top
<=
100
)
{
dragArea
.
style
.
top
=
'
100px
'
dragArea
.
style
.
top
=
'
100px
'
}
}
...
@@ -112,16 +98,7 @@ export default {
...
@@ -112,16 +98,7 @@ export default {
this
.
isMousedown
=
false
this
.
isMousedown
=
false
}
}
},
false
)
},
false
)
// 绑定鼠标松开事件
dragArea
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{})
dragArea
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
// const clientX = event.clientX
// const clientY = event.clientY
// if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
// console.log('click 事件')
// } else {
// console.log('drag 事件')
// }
})
})
})
},
},
methods
:
{
methods
:
{
...
@@ -144,21 +121,17 @@ export default {
...
@@ -144,21 +121,17 @@ export default {
let
sip_uri_
=
`sip:
${
this
.
uaSipInfo
.
adminsip_id
}
@
${
this
.
uaSipInfo
.
adminwsip_host
}
`
;
let
sip_uri_
=
`sip:
${
this
.
uaSipInfo
.
adminsip_id
}
@
${
this
.
uaSipInfo
.
adminwsip_host
}
`
;
let
sip_password_
=
`
${
this
.
uaSipInfo
.
adminsip_pwd
}
`
;
let
sip_password_
=
`
${
this
.
uaSipInfo
.
adminsip_pwd
}
`
;
let
ws_uri_
=
`
${
this
.
uaSipInfo
.
adminwss_url
}
`
;
let
ws_uri_
=
`
${
this
.
uaSipInfo
.
adminwss_url
}
`
;
console
.
info
(
"
get input info: sip_uri =
"
,
sip_uri_
,
"
sip_password =
"
,
sip_password_
,
"
ws_uri =
"
,
ws_uri_
);
let
socket
=
new
JsSIP
.
WebSocketInterface
(
ws_uri_
);
let
socket
=
new
JsSIP
.
WebSocketInterface
(
ws_uri_
);
let
configuration
=
{
let
configuration
=
{
sockets
:
[
socket
],
sockets
:
[
socket
],
uri
:
sip_uri_
,
uri
:
sip_uri_
,
password
:
sip_password_
,
password
:
sip_password_
,
session_timers
:
false
,
// 启用会话计时器(根据RFC 4028)
session_timers
:
false
,
user_agent
:
"
Aegis WebRTC v1.0
"
,
user_agent
:
"
Aegis WebRTC v1.0
"
,
contact_uri
:
sip_uri_
,
contact_uri
:
sip_uri_
,
autostart
:
true
,
// 自动连接
autostart
:
true
,
// 自动连接
register
:
true
,
// 自动就绪
register
:
true
,
// 自动就绪
};
};
this
.
userAgent
=
new
JsSIP
.
UA
(
configuration
);
this
.
userAgent
=
new
JsSIP
.
UA
(
configuration
);
this
.
userAgent
.
on
(
"
connecting
"
,
(
args
)
=>
{
this
.
userAgent
.
on
(
"
connecting
"
,
(
args
)
=>
{
...
@@ -191,13 +164,10 @@ export default {
...
@@ -191,13 +164,10 @@ export default {
}
else
{
}
else
{
document
.
getElementById
(
"
localVideo
"
).
play
();
document
.
getElementById
(
"
localVideo
"
).
play
();
// 接电话
this
.
dialogVisible
=
true
;
this
.
dialogVisible
=
true
;
this
.
isg
=
true
;
this
.
isg
=
true
;
this
.
callers
=
session
.
remote_identity
.
uri
.
user
;
this
.
callers
=
session
.
remote_identity
.
uri
.
user
;
}
}
// 接通,在这一步可以处理音频播放
// 接通并不代表对方已经接受,接通代表 滴 滴 滴
session
.
on
(
"
confirmed
"
,
()
=>
{
session
.
on
(
"
confirmed
"
,
()
=>
{
console
.
info
(
"
接通中
"
);
console
.
info
(
"
接通中
"
);
this
.
message
=
`已接通,请通话...`
;
this
.
message
=
`已接通,请通话...`
;
...
@@ -212,8 +182,6 @@ export default {
...
@@ -212,8 +182,6 @@ export default {
audioElement
.
srcObject
=
stream
;
audioElement
.
srcObject
=
stream
;
audioElement
.
play
();
audioElement
.
play
();
});
});
// 接听失败
session
.
on
(
"
failed
"
,
(
mdata
)
=>
{
session
.
on
(
"
failed
"
,
(
mdata
)
=>
{
const
myAuto
=
document
.
getElementById
(
"
localVideo
"
);
const
myAuto
=
document
.
getElementById
(
"
localVideo
"
);
myAuto
.
pause
();
myAuto
.
pause
();
...
@@ -221,20 +189,15 @@ export default {
...
@@ -221,20 +189,15 @@ export default {
this
.
message
=
`来电的时拒接或,未接听对方就挂断...`
;
this
.
message
=
`来电的时拒接或,未接听对方就挂断...`
;
console
.
info
(
"
来电的时候 拒接或者 还没接听对方自己就挂断了
"
);
console
.
info
(
"
来电的时候 拒接或者 还没接听对方自己就挂断了
"
);
});
});
// 接听成功
session
.
on
(
"
accepted
"
,
(
response
,
cause
)
=>
{
session
.
on
(
"
accepted
"
,
(
response
,
cause
)
=>
{
// 嘟嘟嘟
this
.
message
=
`接听成功...`
;
this
.
message
=
`接听成功...`
;
this
.
status
=
1
;
this
.
status
=
1
;
console
.
info
(
"
接听成功
"
);
console
.
info
(
"
接听成功
"
);
});
});
// 接听成功后 挂断
session
.
on
(
"
ended
"
,
()
=>
{
session
.
on
(
"
ended
"
,
()
=>
{
this
.
dialogVisible
=
false
;
this
.
dialogVisible
=
false
;
this
.
InCall
=
false
;
this
.
InCall
=
false
;
});
});
// 通话被挂起
session
.
on
(
"
hold
"
,
(
data
)
=>
{
session
.
on
(
"
hold
"
,
(
data
)
=>
{
const
org
=
data
.
originator
;
const
org
=
data
.
originator
;
if
(
org
===
"
local
"
)
{
if
(
org
===
"
local
"
)
{
...
@@ -245,7 +208,6 @@ export default {
...
@@ -245,7 +208,6 @@ export default {
console
.
log
(
"
通话被对方挂起:
"
,
org
);
console
.
log
(
"
通话被对方挂起:
"
,
org
);
}
}
});
});
// 通话被继续
session
.
on
(
"
unhold
"
,
(
data
)
=>
{
session
.
on
(
"
unhold
"
,
(
data
)
=>
{
const
org
=
data
.
originator
;
const
org
=
data
.
originator
;
if
(
org
===
"
local
"
)
{
if
(
org
===
"
local
"
)
{
...
@@ -256,7 +218,6 @@ export default {
...
@@ -256,7 +218,6 @@ export default {
}
}
});
});
});
});
this
.
userAgent
.
on
(
'
newMessage
'
,
(
data
)
=>
{
this
.
userAgent
.
on
(
'
newMessage
'
,
(
data
)
=>
{
if
(
data
.
originator
==
'
local
'
)
{
if
(
data
.
originator
==
'
local
'
)
{
console
.
info
(
'
onNewMessage , OutgoingRequest -
'
,
data
.
request
);
console
.
info
(
'
onNewMessage , OutgoingRequest -
'
,
data
.
request
);
...
@@ -264,7 +225,6 @@ export default {
...
@@ -264,7 +225,6 @@ export default {
console
.
info
(
'
onNewMessage , IncomingRequest -
'
,
data
.
request
);
console
.
info
(
'
onNewMessage , IncomingRequest -
'
,
data
.
request
);
}
}
});
});
console
.
info
(
"
call register
"
);
console
.
info
(
"
call register
"
);
this
.
userAgent
.
start
();
this
.
userAgent
.
start
();
},
},
...
...
src/layout/components/AppMain.vue
View file @
70e16a1d
...
@@ -34,9 +34,6 @@ export default {
...
@@ -34,9 +34,6 @@ export default {
mounted
()
{
mounted
()
{
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
this
.
$refs
.
dialView
.
init
()
this
.
$refs
.
dialView
.
init
()
// setTimeout(()=>{
// this.$refs.dialView.init('123456')
// },5000)
})
})
},
},
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment