TT#142700 CSC: Create a PoC integration of the VoIP(NGCP) call using Javascript library JsSip in combination with Kamailio's WebSocket module
- Enable and disable camera during the call - Enable and disable screen during the call - Switch from camera to screen and back - Send in-band DTMF - Send "603 Decline" on termination Change-Id: Ife56ca49cadade44ee9b70b77b3f345b262be9d9pull/9/head
Hans-Peter Herzog
4 years ago
parent
3d1c2a7a6a
commit
238f78cb05
@ -0,0 +1,298 @@
|
|||||||
|
|
||||||
|
import {
|
||||||
|
EventEmitter
|
||||||
|
} from 'events'
|
||||||
|
import jssip from 'jssip'
|
||||||
|
|
||||||
|
let $baseWebSocketUrl = null
|
||||||
|
let $subscriber = null
|
||||||
|
let $socket = null
|
||||||
|
let $userAgent = null
|
||||||
|
let $outgoingRtcSession = null
|
||||||
|
let $incomingRtcSession = null
|
||||||
|
let $localMediaStream = null
|
||||||
|
let $remoteMediaStream = null
|
||||||
|
let $isVideoScreen = false
|
||||||
|
|
||||||
|
const TERMINATION_OPTIONS = {
|
||||||
|
status_code: 603,
|
||||||
|
reason_phrase: 'Decline'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const callEvent = new EventEmitter()
|
||||||
|
|
||||||
|
function handleRemoteMediaStream (trackEvent) {
|
||||||
|
const stream = trackEvent.streams[0]
|
||||||
|
if (!$remoteMediaStream) {
|
||||||
|
$remoteMediaStream = stream
|
||||||
|
callEvent.emit('remoteStream', $remoteMediaStream)
|
||||||
|
} else if ($remoteMediaStream && $remoteMediaStream.id !== stream.id) {
|
||||||
|
$remoteMediaStream = stream
|
||||||
|
callEvent.emit('remoteStream', $remoteMediaStream)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSubscriberUri () {
|
||||||
|
return 'sip:' + $subscriber.username + '@' + $subscriber.domain
|
||||||
|
}
|
||||||
|
|
||||||
|
function callCreateSocket () {
|
||||||
|
return new jssip.WebSocketInterface($baseWebSocketUrl + '/' + $subscriber.username)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callConfigure ({ baseWebSocketUrl }) {
|
||||||
|
$baseWebSocketUrl = baseWebSocketUrl
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callInitialize ({ subscriber }) {
|
||||||
|
$subscriber = subscriber
|
||||||
|
callRegister()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callRegister () {
|
||||||
|
if (!$socket) {
|
||||||
|
$socket = callCreateSocket()
|
||||||
|
const config = {
|
||||||
|
sockets: [$socket],
|
||||||
|
uri: getSubscriberUri(),
|
||||||
|
password: $subscriber.password
|
||||||
|
}
|
||||||
|
$userAgent = new jssip.UA(config)
|
||||||
|
const delegateEvent = (eventName) => {
|
||||||
|
$userAgent.on(eventName, (event) => callEvent.emit(eventName, event))
|
||||||
|
}
|
||||||
|
delegateEvent('connected')
|
||||||
|
delegateEvent('disconnected')
|
||||||
|
delegateEvent('newRTCSession')
|
||||||
|
delegateEvent('newMessage')
|
||||||
|
delegateEvent('registered')
|
||||||
|
delegateEvent('unregistered')
|
||||||
|
delegateEvent('registrationFailed')
|
||||||
|
$userAgent.on('newRTCSession', (event) => {
|
||||||
|
if (event.originator === 'remote') {
|
||||||
|
$incomingRtcSession = event.session
|
||||||
|
$incomingRtcSession.on('peerconnection', () => {
|
||||||
|
$incomingRtcSession.connection.ontrack = handleRemoteMediaStream
|
||||||
|
})
|
||||||
|
$incomingRtcSession.on('failed', (failedEvent) => {
|
||||||
|
callEvent.emit('incomingFailed', failedEvent)
|
||||||
|
})
|
||||||
|
$incomingRtcSession.on('ended', (failedEvent) => {
|
||||||
|
callEvent.emit('incomingEnded', failedEvent)
|
||||||
|
$incomingRtcSession = null
|
||||||
|
})
|
||||||
|
callEvent.emit('incoming', $incomingRtcSession)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
$userAgent.start()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callUnregister () {
|
||||||
|
if ($userAgent) {
|
||||||
|
$userAgent.unregister({
|
||||||
|
all: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callStart ({ number }) {
|
||||||
|
$localMediaStream = await callCreateLocalAudioStream()
|
||||||
|
callEvent.emit('localStream', $localMediaStream)
|
||||||
|
$outgoingRtcSession = $userAgent.call(number, {
|
||||||
|
eventHandlers: {
|
||||||
|
progress (event) {
|
||||||
|
callEvent.emit('outgoingProgress', event)
|
||||||
|
},
|
||||||
|
failed (event) {
|
||||||
|
callEvent.emit('outgoingFailed', event)
|
||||||
|
},
|
||||||
|
confirmed (event) {
|
||||||
|
callEvent.emit('outgoingConfirmed', event)
|
||||||
|
},
|
||||||
|
ended (event) {
|
||||||
|
callEvent.emit('outgoingEnded', event)
|
||||||
|
$outgoingRtcSession = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mediaStream: $localMediaStream
|
||||||
|
})
|
||||||
|
$outgoingRtcSession.connection.ontrack = handleRemoteMediaStream
|
||||||
|
const delegateEvent = (eventName, newName) => {
|
||||||
|
$outgoingRtcSession.on(eventName, (event) => callEvent.emit(newName, event))
|
||||||
|
}
|
||||||
|
delegateEvent('failed', 'outgoingFailed')
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callAccept () {
|
||||||
|
$localMediaStream = await callCreateLocalAudioStream()
|
||||||
|
callEvent.emit('localStream', $localMediaStream)
|
||||||
|
if ($incomingRtcSession) {
|
||||||
|
$incomingRtcSession.answer({
|
||||||
|
mediaStream: $localMediaStream
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callCreateLocalAudioStream () {
|
||||||
|
return await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: false,
|
||||||
|
audio: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callGetRemoteMediaStream () {
|
||||||
|
return $remoteMediaStream
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callGetRemoteMediaStreamId () {
|
||||||
|
return $remoteMediaStream?.id
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callGetLocalMediaStream () {
|
||||||
|
return $localMediaStream
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callGetLocalMediaStreamId () {
|
||||||
|
return $localMediaStream?.id
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callGetRtcSession () {
|
||||||
|
if ($outgoingRtcSession) {
|
||||||
|
return $outgoingRtcSession
|
||||||
|
} else if ($incomingRtcSession) {
|
||||||
|
return $incomingRtcSession
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callChangeVideoStream (stream) {
|
||||||
|
if ($localMediaStream && callGetRtcSession()) {
|
||||||
|
callGetRtcSession().connection.getSenders().forEach(
|
||||||
|
sender => callGetRtcSession().connection.removeTrack(sender)
|
||||||
|
)
|
||||||
|
$localMediaStream.getTracks().forEach(track => track.stop())
|
||||||
|
$localMediaStream = stream
|
||||||
|
$localMediaStream.getTracks().forEach(
|
||||||
|
track => callGetRtcSession().connection.addTrack(track, $localMediaStream)
|
||||||
|
)
|
||||||
|
await callRenegotiate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callAddCamera () {
|
||||||
|
await callChangeVideoStream(await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: {
|
||||||
|
width: {
|
||||||
|
ideal: 4096
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
ideal: 2160
|
||||||
|
}
|
||||||
|
},
|
||||||
|
audio: true
|
||||||
|
}))
|
||||||
|
$isVideoScreen = false
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callAddScreen () {
|
||||||
|
$isVideoScreen = true
|
||||||
|
await callChangeVideoStream(await navigator.mediaDevices.getDisplayMedia({
|
||||||
|
video: {
|
||||||
|
width: {
|
||||||
|
ideal: 4096
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
ideal: 2160
|
||||||
|
}
|
||||||
|
},
|
||||||
|
audio: true
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callRemoveVideo () {
|
||||||
|
$isVideoScreen = false
|
||||||
|
await callChangeVideoStream(await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: false,
|
||||||
|
audio: true
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function callRenegotiate () {
|
||||||
|
callGetRtcSession().renegotiate({
|
||||||
|
useUpdate: false
|
||||||
|
}, () => {
|
||||||
|
callEvent.emit('renegotiationSucceeded')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callHasRemoteVideo () {
|
||||||
|
return $remoteMediaStream?.getVideoTracks?.()?.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callHasLocalVideo () {
|
||||||
|
return $localMediaStream?.getVideoTracks?.()?.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callHasLocalCamera () {
|
||||||
|
return callHasLocalVideo() && !$isVideoScreen
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callHasLocalScreen () {
|
||||||
|
return callHasLocalVideo() && $isVideoScreen
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callToggleMicrophone () {
|
||||||
|
const config = {
|
||||||
|
audio: true,
|
||||||
|
video: false
|
||||||
|
}
|
||||||
|
const rtcSession = callGetRtcSession()
|
||||||
|
const muted = rtcSession?.isMuted()
|
||||||
|
if (muted.audio) {
|
||||||
|
rtcSession.unmute(config)
|
||||||
|
} else {
|
||||||
|
rtcSession.mute(config)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callIsMuted () {
|
||||||
|
return callGetRtcSession()?.isMuted()?.audio
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callSendDTMF (tone, transport = 'RFC2833') {
|
||||||
|
const rtcSession = callGetRtcSession()
|
||||||
|
if (rtcSession) {
|
||||||
|
rtcSession.sendDTMF(tone, {
|
||||||
|
transportType: transport
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callToggleRemoteAudio () {
|
||||||
|
if ($remoteMediaStream && $remoteMediaStream.getAudioTracks()[0]) {
|
||||||
|
$remoteMediaStream.getAudioTracks()[0].enabled = !$remoteMediaStream?.getAudioTracks()[0]?.enabled
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callIsRemoteAudioMuted () {
|
||||||
|
return !$remoteMediaStream?.getAudioTracks()[0]?.enabled
|
||||||
|
}
|
||||||
|
|
||||||
|
export function callEnd () {
|
||||||
|
if ($outgoingRtcSession && !$outgoingRtcSession.isEnded()) {
|
||||||
|
$outgoingRtcSession.terminate(TERMINATION_OPTIONS)
|
||||||
|
$outgoingRtcSession = null
|
||||||
|
}
|
||||||
|
if ($incomingRtcSession && !$incomingRtcSession.isEnded()) {
|
||||||
|
$incomingRtcSession.terminate(TERMINATION_OPTIONS)
|
||||||
|
$incomingRtcSession = null
|
||||||
|
}
|
||||||
|
if ($localMediaStream) {
|
||||||
|
$localMediaStream.getTracks().forEach(track => track.stop())
|
||||||
|
$localMediaStream = null
|
||||||
|
}
|
||||||
|
if ($remoteMediaStream) {
|
||||||
|
$remoteMediaStream.getTracks().forEach(track => track.stop())
|
||||||
|
$remoteMediaStream = null
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
|
||||||
|
import {
|
||||||
|
v4
|
||||||
|
} from 'uuid'
|
||||||
|
import _ from 'lodash'
|
||||||
|
import {
|
||||||
|
callConfigure,
|
||||||
|
callEnd,
|
||||||
|
callEvent,
|
||||||
|
callHasLocalCamera,
|
||||||
|
callHasLocalScreen,
|
||||||
|
callHasRemoteVideo,
|
||||||
|
callIsMuted,
|
||||||
|
callIsRemoteAudioMuted
|
||||||
|
} from 'src/api/ngcp-call'
|
||||||
|
import { errorVisibilityTimeout } from 'src/store/call/common'
|
||||||
|
|
||||||
|
export default async ({ Vue, app, store }) => {
|
||||||
|
callConfigure({
|
||||||
|
baseWebSocketUrl: app.$appConfig.baseWsUrl + '/wss/sip'
|
||||||
|
})
|
||||||
|
const callFailed = (event) => {
|
||||||
|
let cause = event.cause
|
||||||
|
const reason = event.message?.parseHeader?.('Reason')
|
||||||
|
if (reason?.text) {
|
||||||
|
cause = reason.text
|
||||||
|
}
|
||||||
|
if (event.originator !== 'local') {
|
||||||
|
callEnd()
|
||||||
|
store.commit('call/endCall', cause)
|
||||||
|
setTimeout(() => {
|
||||||
|
store.commit('call/inputNumber')
|
||||||
|
}, errorVisibilityTimeout)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
callEvent.on('connected', () => {
|
||||||
|
store.commit('call/enableCall')
|
||||||
|
})
|
||||||
|
callEvent.on('disconnected', () => {
|
||||||
|
store.commit('call/disableCall')
|
||||||
|
})
|
||||||
|
callEvent.on('outgoingProgress', (event) => {
|
||||||
|
store.commit('call/startRinging')
|
||||||
|
})
|
||||||
|
callEvent.on('outgoingFailed', callFailed)
|
||||||
|
callEvent.on('incomingFailed', callFailed)
|
||||||
|
callEvent.on('outgoingEnded', callFailed)
|
||||||
|
callEvent.on('incomingEnded', callFailed)
|
||||||
|
callEvent.on('incoming', (session) => {
|
||||||
|
store.commit('call/incomingCall', {
|
||||||
|
number: _.get(session, 'remote_identity.uri.user', 'Unknown')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
callEvent.on('localStream', () => {
|
||||||
|
store.commit('call/toggleMicrophone', !callIsMuted())
|
||||||
|
})
|
||||||
|
callEvent.on('remoteStream', () => {
|
||||||
|
store.commit('call/establishCall', {
|
||||||
|
mediaStreamId: v4(),
|
||||||
|
isLocalAudioMuted: callIsMuted(),
|
||||||
|
hasLocalCamera: callHasLocalCamera(),
|
||||||
|
hasLocalScreen: callHasLocalScreen(),
|
||||||
|
hasRemoteVideo: callHasRemoteVideo(),
|
||||||
|
isRemoteAudioMuted: callIsRemoteAudioMuted()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import getRtcEnginePlugin from 'src/plugins/rtc-engine'
|
|
||||||
import CallPlugin from 'src/plugins/call'
|
|
||||||
import ConferencePlugin from 'src/plugins/conference'
|
|
||||||
import { errorVisibilityTimeout } from 'src/store/call'
|
|
||||||
|
|
||||||
export default ({ Vue, store, app }) => {
|
|
||||||
const rtcPluginConfig = {
|
|
||||||
cdkScriptUrl: app.$appConfig.baseHttpUrl + '/rtc/files/dist/cdk-prod.js',
|
|
||||||
webSocketUrl: app.$appConfig.baseWsUrl + '/rtc/api',
|
|
||||||
ngcpApiBaseUrl: app.$appConfig.baseHttpUrl
|
|
||||||
// ngcpApiJwt: ... // Note: this value will be set in userInit action, with value from "getJwt" function
|
|
||||||
}
|
|
||||||
const RtcEnginePlugin = getRtcEnginePlugin(rtcPluginConfig)
|
|
||||||
Vue.use(RtcEnginePlugin)
|
|
||||||
Vue.use(CallPlugin)
|
|
||||||
Vue.use(ConferencePlugin)
|
|
||||||
|
|
||||||
rtcEngine(store)
|
|
||||||
call(store)
|
|
||||||
conference(store)
|
|
||||||
}
|
|
||||||
|
|
||||||
function rtcEngine (store) {
|
|
||||||
Vue.$rtcEngine.onSipNetworkConnected(() => {
|
|
||||||
store.commit('call/enableCall')
|
|
||||||
}).onSipNetworkDisconnected(() => {
|
|
||||||
store.commit('call/disableCall')
|
|
||||||
}).onConferenceNetworkConnected(() => {
|
|
||||||
store.commit('conference/enableConferencing')
|
|
||||||
}).onConferenceNetworkDisconnected(() => {
|
|
||||||
store.commit('conference/disableConferencing')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function call (store) {
|
|
||||||
Vue.$call.onIncoming(() => {
|
|
||||||
store.commit('call/incomingCall', {
|
|
||||||
number: Vue.$call.getNumber()
|
|
||||||
})
|
|
||||||
}).onRemoteMedia((remoteMediaStream) => {
|
|
||||||
store.commit('call/establishCall', remoteMediaStream)
|
|
||||||
}).onEnded((reason) => {
|
|
||||||
Vue.$call.end()
|
|
||||||
store.commit('call/endCall', reason)
|
|
||||||
setTimeout(() => {
|
|
||||||
store.commit('call/inputNumber')
|
|
||||||
}, errorVisibilityTimeout)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function conference (store) {
|
|
||||||
Vue.$conference.onConferenceParticipantJoined((participant) => {
|
|
||||||
store.commit('conference/participantJoined', participant)
|
|
||||||
participant.onMediaStream(() => {
|
|
||||||
store.commit('conference/removeRemoteMedia', participant.id)
|
|
||||||
store.commit('conference/addRemoteMedia', participant.id)
|
|
||||||
}).onMediaEnded(() => {
|
|
||||||
store.commit('conference/removeRemoteMedia', participant.id)
|
|
||||||
})
|
|
||||||
}).onConferenceParticipantLeft((participant) => {
|
|
||||||
store.commit('conference/participantLeft', participant)
|
|
||||||
store.commit('conference/removeRemoteMedia', participant.id)
|
|
||||||
store.commit('conference/setSelectedParticipant', participant.id)
|
|
||||||
}).onConferenceEvent((event) => {
|
|
||||||
store.commit('conference/event', event)
|
|
||||||
}).onConferenceMessage((message) => {
|
|
||||||
store.commit('conference/message', message)
|
|
||||||
}).onConferenceFile((file) => {
|
|
||||||
store.commit('conference/file', file)
|
|
||||||
}).onLocalMediaStreamEnded(() => {
|
|
||||||
store.commit('conference/disposeLocalMedia')
|
|
||||||
}).onConferenceEnded(() => {
|
|
||||||
store.dispatch('conference/leave')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,327 +0,0 @@
|
|||||||
import EventEmitter from 'events'
|
|
||||||
|
|
||||||
export const LocalMedia = {
|
|
||||||
audioOnly: 'audioOnly',
|
|
||||||
audioVideo: 'audioVideo',
|
|
||||||
videoOnly: 'videoOnly',
|
|
||||||
audioScreen: 'audioScreen',
|
|
||||||
screenOnly: 'screenOnly'
|
|
||||||
}
|
|
||||||
|
|
||||||
export class NetworkNotConnected {
|
|
||||||
constructor (network) {
|
|
||||||
this.name = 'NetworkNotConnected'
|
|
||||||
this.message = 'Network ' + network + ' is not connected'
|
|
||||||
this.network = network
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CallNotFound {
|
|
||||||
constructor () {
|
|
||||||
this.name = 'CallNotFound'
|
|
||||||
this.message = 'Call not found'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CallAlreadyExists {
|
|
||||||
constructor () {
|
|
||||||
this.name = 'CallAlreadyExists'
|
|
||||||
this.message = 'Call already exists'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let rtcEngineCallInstance = null
|
|
||||||
export class RtcEngineCall {
|
|
||||||
constructor () {
|
|
||||||
this.network = null
|
|
||||||
this.rtcEngine = null
|
|
||||||
this.localMedia = null
|
|
||||||
this.remoteMedia = null
|
|
||||||
this.currentCall = null
|
|
||||||
this.events = new EventEmitter()
|
|
||||||
this.endedReason = null
|
|
||||||
}
|
|
||||||
|
|
||||||
setRtcEngine (rtcEngine) {
|
|
||||||
if (this.rtcEngine === null) {
|
|
||||||
this.rtcEngine = rtcEngine
|
|
||||||
this.rtcEngine.onSipNetworkConnected(($network) => {
|
|
||||||
this.events.emit('connected')
|
|
||||||
this.network = $network
|
|
||||||
this.network.onIncomingCall((remoteCall) => {
|
|
||||||
if (this.network !== null && this.currentCall === null) {
|
|
||||||
this.currentCall = remoteCall
|
|
||||||
this.currentCall.onEnded(() => {
|
|
||||||
this.events.emit('ended', this.currentCall.endedReason)
|
|
||||||
}).onRemoteMedia((remoteMediaStream) => {
|
|
||||||
this.remoteMedia = remoteMediaStream
|
|
||||||
this.events.emit('remoteMedia', remoteMediaStream)
|
|
||||||
}).onRemoteMediaEnded(() => {
|
|
||||||
this.events.emit('remoteMediaEnded')
|
|
||||||
}).onError((err) => {
|
|
||||||
console.debug(err)
|
|
||||||
this.end()
|
|
||||||
this.events.emit('ended', err.message)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.events.emit('incoming')
|
|
||||||
})
|
|
||||||
}).onSipNetworkDisconnected(() => {
|
|
||||||
this.events.emit('disconnected')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isAvailable () {
|
|
||||||
return this.network !== null && this.network.isConnected
|
|
||||||
}
|
|
||||||
|
|
||||||
hasRunningCall () {
|
|
||||||
return this.currentCall !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
createLocalMedia (localMedia) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
const localMediaBuilder = cdk.media.create()
|
|
||||||
if (localMedia === LocalMedia.audioOnly || localMedia === LocalMedia.audioVideo ||
|
|
||||||
localMedia === LocalMedia.audioScreen) {
|
|
||||||
localMediaBuilder.enableMicrophone()
|
|
||||||
}
|
|
||||||
if (localMedia === LocalMedia.audioVideo || localMedia === LocalMedia.videoOnly) {
|
|
||||||
localMediaBuilder.enableCamera()
|
|
||||||
} else if (localMedia === LocalMedia.audioScreen || localMedia === LocalMedia.screenOnly) {
|
|
||||||
localMediaBuilder.enableScreen()
|
|
||||||
}
|
|
||||||
localMediaBuilder.build().then((localMediaStream) => {
|
|
||||||
this.localMedia = localMediaStream
|
|
||||||
resolve(this.localMedia)
|
|
||||||
}).catch((err) => {
|
|
||||||
reject(err)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
start (peer, localMediaStream) {
|
|
||||||
if (this.network !== null && this.currentCall === null) {
|
|
||||||
peer = peer.replace(/(\s|\+)/, '')
|
|
||||||
this.currentCall = this.network.call(peer, {
|
|
||||||
localMediaStream: localMediaStream
|
|
||||||
})
|
|
||||||
this.currentCall.onEnded(() => {
|
|
||||||
this.events.emit('ended', this.currentCall.endedReason)
|
|
||||||
this.end()
|
|
||||||
}).onRemoteMedia((remoteMediaStream) => {
|
|
||||||
this.remoteMedia = remoteMediaStream
|
|
||||||
this.events.emit('remoteMedia', remoteMediaStream)
|
|
||||||
}).onRemoteMediaEnded(() => {
|
|
||||||
this.events.emit('remoteMediaEnded')
|
|
||||||
}).onAccepted(() => {
|
|
||||||
this.events.emit('accepted')
|
|
||||||
}).onPending(() => {
|
|
||||||
this.events.emit('pending')
|
|
||||||
}).onRingingStart(() => {
|
|
||||||
this.events.emit('ringingStart')
|
|
||||||
}).onRingingStop(() => {
|
|
||||||
this.events.emit('ringingStop')
|
|
||||||
}).onError((err) => {
|
|
||||||
console.debug(err)
|
|
||||||
this.end()
|
|
||||||
this.events.emit('ended', err.message)
|
|
||||||
})
|
|
||||||
} else if (this.network !== null) {
|
|
||||||
throw new CallAlreadyExists()
|
|
||||||
} else {
|
|
||||||
throw new NetworkNotConnected(this.networkTag) // TODO: "this.networkTag" is not defined. We should get this variable from somewhere
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getNumber () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
return this.currentCall.peer
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onIncoming (listener) {
|
|
||||||
this.events.on('incoming', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onAccepted (listener) {
|
|
||||||
this.events.on('accepted', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onPending (listener) {
|
|
||||||
this.events.on('pending', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onRingingStart (listener) {
|
|
||||||
this.events.on('ringingStart', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onRingingStop (listener) {
|
|
||||||
this.events.on('ringingStop', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onRemoteMedia (listener) {
|
|
||||||
this.events.on('remoteMedia', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onRemoteMediaEnded (listener) {
|
|
||||||
this.events.on('remoteMediaEnded', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onEnded (listener) {
|
|
||||||
this.events.on('ended', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConnected (listener) {
|
|
||||||
this.events.on('connected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onDisconnected (listener) {
|
|
||||||
this.events.on('disconnected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
accept (localMediaStream) {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.accept(localMediaStream).then(() => {
|
|
||||||
this.events.emit('locallyAccepted')
|
|
||||||
}).catch((err) => {
|
|
||||||
console.debug(err)
|
|
||||||
this.end()
|
|
||||||
this.events.emit('ended', err.message)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
throw new Error('Remote call does not exist')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hangUp () {
|
|
||||||
this.end()
|
|
||||||
}
|
|
||||||
|
|
||||||
end () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.end()
|
|
||||||
this.currentCall = null
|
|
||||||
}
|
|
||||||
this.endMedia()
|
|
||||||
}
|
|
||||||
|
|
||||||
endMedia () {
|
|
||||||
if (this.localMedia !== null) {
|
|
||||||
this.localMedia.stop()
|
|
||||||
this.localMedia = null
|
|
||||||
}
|
|
||||||
if (this.remoteMedia !== null) {
|
|
||||||
this.remoteMedia.stop()
|
|
||||||
this.remoteMedia = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
disableAudio () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.disableAudio()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
enableAudio () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.enableAudio()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
disableVideo () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.disableVideo()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
enableVideo () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.enableVideo()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sendDTMF (char) {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
this.currentCall.sendDTMF(char)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getCall () {
|
|
||||||
if (this.currentCall !== null) {
|
|
||||||
return this.currentCall
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocalMediaId () {
|
|
||||||
if (this.localMedia !== null) {
|
|
||||||
return this.localMedia.getStream().id
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocalMediaStream () {
|
|
||||||
if (this.localMedia !== null) {
|
|
||||||
return this.localMedia.getStream()
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
getRemoteMediaId () {
|
|
||||||
if (this.remoteMedia !== null) {
|
|
||||||
return this.remoteMedia.getStream().id
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
getRemoteMediaStream () {
|
|
||||||
if (this.remoteMedia !== null) {
|
|
||||||
return this.remoteMedia.getStream()
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
hasRemoteVideo () {
|
|
||||||
if (this.remoteMedia !== null) {
|
|
||||||
return this.remoteMedia.hasVideo()
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
hasLocalVideo () {
|
|
||||||
if (this.localMedia !== null) {
|
|
||||||
return this.localMedia.hasVideo()
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
static getInstance () {
|
|
||||||
if (rtcEngineCallInstance === null) {
|
|
||||||
rtcEngineCallInstance = new RtcEngineCall()
|
|
||||||
}
|
|
||||||
return rtcEngineCallInstance
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install (Vue) {
|
|
||||||
Vue.$call = RtcEngineCall.getInstance()
|
|
||||||
Vue.$call.setRtcEngine(Vue.$rtcEngine)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
|
|
||||||
import EventEmitter from 'events'
|
|
||||||
|
|
||||||
let conferencePlugin = null
|
|
||||||
|
|
||||||
export class ConferencePlugin {
|
|
||||||
constructor () {
|
|
||||||
this.events = new EventEmitter()
|
|
||||||
this.rtcEngine = null
|
|
||||||
this.conference = null
|
|
||||||
this.localMediaStream = null
|
|
||||||
}
|
|
||||||
|
|
||||||
setRtcEngine (rtcEngine) {
|
|
||||||
if (this.rtcEngine === null) {
|
|
||||||
this.rtcEngine = rtcEngine
|
|
||||||
this.rtcEngine.onConferenceNetworkConnected((network) => {
|
|
||||||
this.events.emit('connected')
|
|
||||||
network
|
|
||||||
.onConferenceParticipantJoined((participant) => {
|
|
||||||
this.events.emit('participantJoined', participant)
|
|
||||||
})
|
|
||||||
.onConferenceParticipantLeft((participant) => {
|
|
||||||
this.events.emit('participantLeft', participant)
|
|
||||||
})
|
|
||||||
.onConferenceEvent((event) => {
|
|
||||||
this.events.emit('conferenceEvent', event)
|
|
||||||
})
|
|
||||||
.onConferenceMessage((message) => {
|
|
||||||
this.events.emit('conferenceMessage', message)
|
|
||||||
})
|
|
||||||
.onConferenceFile((file) => {
|
|
||||||
this.events.emit('conferenceFile', file)
|
|
||||||
})
|
|
||||||
.onConferenceEnded(() => {
|
|
||||||
this.events.emit('conferenceEnded')
|
|
||||||
})
|
|
||||||
}).onConferenceNetworkDisconnected(() => {
|
|
||||||
this.events.emit('disconnected')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getNetwork () {
|
|
||||||
return this.rtcEngine.getConferenceNetwork()
|
|
||||||
}
|
|
||||||
|
|
||||||
async joinConference (options) {
|
|
||||||
options.localMediaStream = this.getLocalMediaStream()
|
|
||||||
this.conference = await this.getNetwork().joinConference(options)
|
|
||||||
return this.conference
|
|
||||||
}
|
|
||||||
|
|
||||||
async changeConferenceMedia () {
|
|
||||||
await this.getNetwork().changeConferenceMedia({
|
|
||||||
localMediaStream: this.getLocalMediaStream()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async leaveConference () {
|
|
||||||
await this.getNetwork().leaveConference()
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceParticipantJoined (listener) {
|
|
||||||
this.events.on('participantJoined', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceParticipantLeft (listener) {
|
|
||||||
this.events.on('participantLeft', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceEvent (listener) {
|
|
||||||
this.events.on('conferenceEvent', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceMessage (listener) {
|
|
||||||
this.events.on('conferenceMessage', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceFile (listener) {
|
|
||||||
this.events.on('conferenceFile', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceEnded (listener) {
|
|
||||||
this.events.on('conferenceEnded', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onError (listener) {
|
|
||||||
this.events.on('error', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
static getInstance () {
|
|
||||||
if (conferencePlugin === null) {
|
|
||||||
conferencePlugin = new ConferencePlugin()
|
|
||||||
}
|
|
||||||
return conferencePlugin
|
|
||||||
}
|
|
||||||
|
|
||||||
setLocalMediaStream (localMediaStream) {
|
|
||||||
this.removeLocalMediaStream()
|
|
||||||
this.localMediaStream = localMediaStream
|
|
||||||
this.localMediaStream.onEnded(() => {
|
|
||||||
this.events.emit('localMediaStreamEnded', this.localMediaStream)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocalMediaStream () {
|
|
||||||
return this.localMediaStream
|
|
||||||
}
|
|
||||||
|
|
||||||
onLocalMediaStreamEnded (listener) {
|
|
||||||
this.events.on('localMediaStreamEnded', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
hasLocalMediaStream () {
|
|
||||||
return this.localMediaStream !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
removeLocalMediaStream () {
|
|
||||||
if (this.hasLocalMediaStream()) {
|
|
||||||
this.getLocalMediaStream().stop()
|
|
||||||
}
|
|
||||||
this.localMediaStream = null
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocalMediaStreamNative () {
|
|
||||||
if (this.hasLocalMediaStream()) {
|
|
||||||
return this.getLocalMediaStream().getStream()
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocalParticipant () {
|
|
||||||
if (this.conference !== null) {
|
|
||||||
return this.conference.getLocalParticipant()
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getRemoteParticipant (id) {
|
|
||||||
if (this.conference !== null) {
|
|
||||||
return this.conference.getRemoteParticipant(id)
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install (Vue) {
|
|
||||||
Vue.$conference = ConferencePlugin.getInstance()
|
|
||||||
Vue.$conference.setRtcEngine(Vue.$rtcEngine)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
|
|
||||||
import loadScript from 'load-script'
|
|
||||||
import EventEmitter from 'events'
|
|
||||||
|
|
||||||
const scriptId = 'cdk'
|
|
||||||
|
|
||||||
let rtcEnginePlugin = null
|
|
||||||
|
|
||||||
export class RtcEnginePlugin {
|
|
||||||
constructor ({
|
|
||||||
cdkScriptUrl = null,
|
|
||||||
webSocketUrl = null,
|
|
||||||
ngcpApiBaseUrl = null,
|
|
||||||
ngcpApiJwt = null
|
|
||||||
}) {
|
|
||||||
this.cdkScriptUrl = cdkScriptUrl
|
|
||||||
this.webSocketUrl = webSocketUrl
|
|
||||||
this.script = null
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @type {cdk.Client}
|
|
||||||
*/
|
|
||||||
this.client = null
|
|
||||||
this.sessionToken = null
|
|
||||||
this.ngcpApiJwt = ngcpApiJwt
|
|
||||||
this.ngcpApiBaseUrl = ngcpApiBaseUrl
|
|
||||||
this.events = new EventEmitter()
|
|
||||||
}
|
|
||||||
|
|
||||||
createMedia () {
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
return cdk.media.create()
|
|
||||||
}
|
|
||||||
|
|
||||||
initialize () {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
Promise.resolve().then(() => {
|
|
||||||
return this.loadLibrary()
|
|
||||||
}).then(() => {
|
|
||||||
return this.createSession()
|
|
||||||
}).then(() => {
|
|
||||||
return this.connectClient()
|
|
||||||
}).then(() => {
|
|
||||||
resolve()
|
|
||||||
}).catch((err) => {
|
|
||||||
reject(err)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
setNgcpApiJwt (jwt) {
|
|
||||||
this.ngcpApiJwt = jwt
|
|
||||||
}
|
|
||||||
|
|
||||||
setNgcpApiBaseUrl (baseUrl) {
|
|
||||||
this.ngcpApiBaseUrl = baseUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
loadLibrary () {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (this.script === null) {
|
|
||||||
loadScript(this.cdkScriptUrl, {
|
|
||||||
attrs: {
|
|
||||||
id: scriptId
|
|
||||||
}
|
|
||||||
}, (err, script) => {
|
|
||||||
this.script = script
|
|
||||||
if (err) {
|
|
||||||
console.debug(err)
|
|
||||||
reject(new Error('Unable to load RTC:Engine client library'))
|
|
||||||
} else {
|
|
||||||
resolve()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
resolve()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
createSession () {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (this.ngcpApiJwt !== null && this.sessionToken === null) {
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
cdk.ngcp.setApiBaseUrl(this.ngcpApiBaseUrl)
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
cdk.ngcp.setApiJwt(this.ngcpApiJwt)
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
cdk.ngcp.createRTCEngineSession().then((sessionToken) => {
|
|
||||||
this.sessionToken = sessionToken
|
|
||||||
resolve()
|
|
||||||
}).catch((err) => {
|
|
||||||
console.error(err)
|
|
||||||
reject(new Error('Unable to create RTC:Engine session'))
|
|
||||||
})
|
|
||||||
} else if (this.ngcpApiJwt !== null && this.sessionToken !== null) {
|
|
||||||
resolve()
|
|
||||||
} else {
|
|
||||||
throw new Error('Can not create RTC:Engine session without a valid NGCP API JWT')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
connectClient () {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (this.client === null) {
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
this.client = new cdk.Client({
|
|
||||||
url: this.webSocketUrl,
|
|
||||||
userSession: this.sessionToken
|
|
||||||
})
|
|
||||||
this.client.onConnect(() => {
|
|
||||||
this.events.emit('connected')
|
|
||||||
try {
|
|
||||||
const conferenceNetwork = this.client.getNetworkByTag('conference')
|
|
||||||
conferenceNetwork.onConnect(() => {
|
|
||||||
this.events.emit('conference-network-connected', conferenceNetwork)
|
|
||||||
}).onDisconnect(() => {
|
|
||||||
this.events.emit('conference-network-disconnected', conferenceNetwork)
|
|
||||||
})
|
|
||||||
const sipNetwork = this.client.getNetworkByTag('sip')
|
|
||||||
sipNetwork.onConnect(() => {
|
|
||||||
this.events.emit('sip-network-connected', sipNetwork)
|
|
||||||
}).onDisconnect(() => {
|
|
||||||
this.events.emit('sip-network-disconnected', sipNetwork)
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
reject(new Error('Unable to connect to a specific network by RTCEngine client'))
|
|
||||||
}
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
this.client.onDisconnect(() => {
|
|
||||||
reject(new Error('Unable to connect RTCEngine client'))
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
resolve()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onSipNetworkConnected (listener) {
|
|
||||||
this.events.on('sip-network-connected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onSipNetworkDisconnected (listener) {
|
|
||||||
this.events.on('sip-network-disconnected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceNetworkConnected (listener) {
|
|
||||||
this.events.on('conference-network-connected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConferenceNetworkDisconnected (listener) {
|
|
||||||
this.events.on('conference-network-disconnected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onConnected (listener) {
|
|
||||||
this.events.on('connected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
onDisconnected (listener) {
|
|
||||||
this.events.on('disconnected', listener)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
getConferenceNetwork () {
|
|
||||||
return this.client.getNetworkByTag('conference')
|
|
||||||
}
|
|
||||||
|
|
||||||
static getInstance (rtcConfig = {}) {
|
|
||||||
if (rtcEnginePlugin === null) {
|
|
||||||
rtcEnginePlugin = new RtcEnginePlugin(rtcConfig)
|
|
||||||
}
|
|
||||||
return rtcEnginePlugin
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function getVuePlugin (rtcConfig) {
|
|
||||||
return {
|
|
||||||
install (Vue) {
|
|
||||||
Vue.$rtcEngine = RtcEnginePlugin.getInstance(rtcConfig)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import loadScript from 'load-script'
|
||||||
|
|
||||||
|
const RTC_ENGINE_LIBRARY_ID = 'ngcp-rtc-engine-library'
|
||||||
|
|
||||||
|
export const LocalMedia = {
|
||||||
|
audioOnly: 'audioOnly',
|
||||||
|
audioVideo: 'audioVideo',
|
||||||
|
videoOnly: 'videoOnly',
|
||||||
|
audioScreen: 'audioScreen',
|
||||||
|
screenOnly: 'screenOnly'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loadRtcEngineLibrary ({ scriptUrl }) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.getElementById(RTC_ENGINE_LIBRARY_ID)
|
||||||
|
if (!script) {
|
||||||
|
loadScript(scriptUrl, {
|
||||||
|
attrs: {
|
||||||
|
id: RTC_ENGINE_LIBRARY_ID
|
||||||
|
}
|
||||||
|
}, (err) => {
|
||||||
|
if (err) {
|
||||||
|
reject(new Error('Unable to load RTC:Engine client library'))
|
||||||
|
} else {
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unloadRtcEngineLibrary () {
|
||||||
|
const script = document.getElementById(RTC_ENGINE_LIBRARY_ID)
|
||||||
|
if (script) {
|
||||||
|
script.remove()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function rtcEngineCreateMedia (localMedia) {
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
const localMediaBuilder = cdk.media.create()
|
||||||
|
if (localMedia === LocalMedia.audioOnly || localMedia === LocalMedia.audioVideo ||
|
||||||
|
localMedia === LocalMedia.audioScreen) {
|
||||||
|
localMediaBuilder.enableMicrophone()
|
||||||
|
}
|
||||||
|
if (localMedia === LocalMedia.audioVideo || localMedia === LocalMedia.videoOnly) {
|
||||||
|
localMediaBuilder.enableCamera()
|
||||||
|
} else if (localMedia === LocalMedia.audioScreen || localMedia === LocalMedia.screenOnly) {
|
||||||
|
localMediaBuilder.enableScreen()
|
||||||
|
}
|
||||||
|
return await localMediaBuilder.build()
|
||||||
|
}
|
||||||
@ -1,374 +0,0 @@
|
|||||||
|
|
||||||
import _ from 'lodash'
|
|
||||||
import Vue from 'vue'
|
|
||||||
import {
|
|
||||||
normalizeDestination
|
|
||||||
} from '../filters/number-format'
|
|
||||||
import {
|
|
||||||
startCase
|
|
||||||
} from '../filters/string'
|
|
||||||
import {
|
|
||||||
i18n
|
|
||||||
} from 'src/boot/i18n'
|
|
||||||
|
|
||||||
export var CallState = {
|
|
||||||
input: 'input',
|
|
||||||
initiating: 'initiating',
|
|
||||||
ringing: 'ringing',
|
|
||||||
incoming: 'incoming',
|
|
||||||
established: 'established',
|
|
||||||
ended: 'ended'
|
|
||||||
}
|
|
||||||
export var CallStateTitle = {
|
|
||||||
get input () { return i18n.t('Start new call') },
|
|
||||||
get initiating () { return i18n.t('Calling') },
|
|
||||||
get ringing () { return i18n.t('Ringing at') },
|
|
||||||
get incoming () { return i18n.t('Incoming call from') },
|
|
||||||
get established () { return i18n.t('In call with') },
|
|
||||||
get ended () { return i18n.t('Call ended') }
|
|
||||||
}
|
|
||||||
|
|
||||||
export var MediaType = {
|
|
||||||
audioOnly: 'audioOnly',
|
|
||||||
audioVideo: 'audioVideo',
|
|
||||||
audioScreen: 'audioScreen'
|
|
||||||
}
|
|
||||||
|
|
||||||
export const errorVisibilityTimeout = 5000
|
|
||||||
export const reinitializeTimeout = 5000
|
|
||||||
|
|
||||||
function handleUserMediaError (context, err) {
|
|
||||||
const errName = _.get(err, 'name', null)
|
|
||||||
const errMessage = _.get(err, 'message', null)
|
|
||||||
if (errName === 'UserMediaError' && errMessage === 'Permission denied') {
|
|
||||||
context.commit('endCall', 'userMediaPermissionDenied')
|
|
||||||
}
|
|
||||||
if (errMessage === 'plugin not detected') {
|
|
||||||
context.commit('desktopSharingInstall')
|
|
||||||
context.commit('hangUpCall')
|
|
||||||
} else if (errMessage === 'PermissionDenied') {
|
|
||||||
context.commit('endCall', 'desktopSharingPermissionDenied')
|
|
||||||
} else {
|
|
||||||
context.commit('endCall', errName)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
namespaced: true,
|
|
||||||
state: {
|
|
||||||
callEnabled: false,
|
|
||||||
endedReason: null,
|
|
||||||
callState: CallState.input,
|
|
||||||
number: '',
|
|
||||||
numberInput: '',
|
|
||||||
localMediaStream: null,
|
|
||||||
remoteMediaStream: null,
|
|
||||||
caller: false,
|
|
||||||
callee: false,
|
|
||||||
desktopSharingInstall: false,
|
|
||||||
microphoneEnabled: true,
|
|
||||||
cameraEnabled: true,
|
|
||||||
remoteVolumeEnabled: true,
|
|
||||||
maximized: false,
|
|
||||||
dialpadOpened: false
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
isCallEnabled (state) {
|
|
||||||
return state.callEnabled
|
|
||||||
},
|
|
||||||
endedReason (state) {
|
|
||||||
return state.endedReason
|
|
||||||
},
|
|
||||||
callNumber (state) {
|
|
||||||
return state.number
|
|
||||||
},
|
|
||||||
callNumberInput (state) {
|
|
||||||
return state.numberInput
|
|
||||||
},
|
|
||||||
// isNetworkConnected(state) {
|
|
||||||
// return state.initializationState === RequestState.succeeded;
|
|
||||||
// },
|
|
||||||
// isCallAvailable(state, getters) {
|
|
||||||
// return getters.isNetworkConnected;
|
|
||||||
// },
|
|
||||||
// isCallInitializing(state, getters, rootState, rootGetters) {
|
|
||||||
// return state.initializationState === RequestState.requesting ||
|
|
||||||
// rootGetters['user/userDataRequesting'];
|
|
||||||
// },
|
|
||||||
// isCallInitialized(state) {
|
|
||||||
// return state.initializationState === RequestState.succeeded
|
|
||||||
// },
|
|
||||||
// hasCallInitError(state) {
|
|
||||||
// return state.initializationError !== null;
|
|
||||||
// },
|
|
||||||
// callInitError(state) {
|
|
||||||
// return state.initializationError;
|
|
||||||
// },
|
|
||||||
isCallInitializing (state, getters, rootState, rootGetters) {
|
|
||||||
return rootGetters['user/isRtcEngineInitializing']
|
|
||||||
},
|
|
||||||
isPreparing (state) {
|
|
||||||
return state.callState === CallState.input
|
|
||||||
},
|
|
||||||
isInitiating (state) {
|
|
||||||
return state.callState === CallState.initiating
|
|
||||||
},
|
|
||||||
isIncoming (state) {
|
|
||||||
return state.callState === CallState.incoming
|
|
||||||
},
|
|
||||||
isTrying (state) {
|
|
||||||
return state.callState === CallState.initiating ||
|
|
||||||
state.callState === CallState.ringing
|
|
||||||
},
|
|
||||||
isRinging (state) {
|
|
||||||
return state.callState === CallState.ringing
|
|
||||||
},
|
|
||||||
isCalling (state) {
|
|
||||||
return state.callState === CallState.initiating ||
|
|
||||||
state.callState === CallState.ringing ||
|
|
||||||
state.callState === CallState.established ||
|
|
||||||
state.callState === CallState.incoming ||
|
|
||||||
state.callState === CallState.ended
|
|
||||||
},
|
|
||||||
isEstablished (state) {
|
|
||||||
return state.callState === CallState.established
|
|
||||||
},
|
|
||||||
isEnded (state) {
|
|
||||||
return state.callState === CallState.ended
|
|
||||||
},
|
|
||||||
hasRtcEngineCapability (state, getters, rootState, rootGetters) {
|
|
||||||
return rootGetters['user/hasRtcEngineCapability']
|
|
||||||
},
|
|
||||||
hasRtcEngineCapabilityEnabled (state, getters, rootState, rootGetters) {
|
|
||||||
return rootGetters['user/hasRtcEngineCapabilityEnabled']
|
|
||||||
},
|
|
||||||
hasRemoteVideo (state) {
|
|
||||||
if (state.remoteMediaStream !== null) {
|
|
||||||
return Vue.$call.hasRemoteVideo()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasLocalVideo (state) {
|
|
||||||
if (state.localMediaStream !== null) {
|
|
||||||
return Vue.$call.hasLocalVideo()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasVideo (state, getters) {
|
|
||||||
return getters.hasLocalVideo || getters.hasRemoteVideo
|
|
||||||
},
|
|
||||||
isAudioEnabled (state) {
|
|
||||||
return state.audioEnabled
|
|
||||||
},
|
|
||||||
isVideoEnabled (state) {
|
|
||||||
return state.videoEnabled
|
|
||||||
},
|
|
||||||
isCaller (state) {
|
|
||||||
return state.caller
|
|
||||||
},
|
|
||||||
isCallee (state) {
|
|
||||||
return state.callee
|
|
||||||
},
|
|
||||||
callState (state) {
|
|
||||||
return state.callState
|
|
||||||
},
|
|
||||||
desktopSharingInstall (state) {
|
|
||||||
return state.desktopSharingInstall
|
|
||||||
},
|
|
||||||
localMediaStream (state) {
|
|
||||||
if (state.localMediaStream !== null) {
|
|
||||||
return Vue.$call.getLocalMediaStream()
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
remoteMediaStream (state) {
|
|
||||||
if (state.remoteMediaStream !== null) {
|
|
||||||
return Vue.$call.getRemoteMediaStream()
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
isMicrophoneEnabled (state) {
|
|
||||||
return state.microphoneEnabled
|
|
||||||
},
|
|
||||||
isCameraEnabled (state) {
|
|
||||||
return state.cameraEnabled
|
|
||||||
},
|
|
||||||
isRemoteVolumeEnabled (state) {
|
|
||||||
return state.remoteVolumeEnabled
|
|
||||||
},
|
|
||||||
isMaximized (state) {
|
|
||||||
return state.maximized
|
|
||||||
},
|
|
||||||
isDialpadOpened (state) {
|
|
||||||
return state.dialpadOpened
|
|
||||||
},
|
|
||||||
callNumberFormatted (state, getters) {
|
|
||||||
return normalizeDestination(getters.callNumber)
|
|
||||||
},
|
|
||||||
callEndedReasonFormatted (state, getters) {
|
|
||||||
return startCase(getters.endedReason)
|
|
||||||
},
|
|
||||||
callStateTitle (state) {
|
|
||||||
return CallStateTitle[state.callState]
|
|
||||||
},
|
|
||||||
callStateSubtitle (state, getters) {
|
|
||||||
if (state.callState === CallState.initiating ||
|
|
||||||
state.callState === CallState.ringing ||
|
|
||||||
state.callState === CallState.incoming ||
|
|
||||||
state.callState === CallState.established) {
|
|
||||||
return getters.callNumberFormatted
|
|
||||||
} else if (state.callState === CallState.ended) {
|
|
||||||
return getters.callEndedReasonFormatted
|
|
||||||
} else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
numberInputChanged (state, numberInput) {
|
|
||||||
state.numberInput = numberInput
|
|
||||||
},
|
|
||||||
inputNumber (state) {
|
|
||||||
state.callState = CallState.input
|
|
||||||
state.number = ''
|
|
||||||
state.numberInput = ''
|
|
||||||
state.endedReason = null
|
|
||||||
},
|
|
||||||
startCalling (state, number) {
|
|
||||||
state.number = number
|
|
||||||
state.callState = CallState.initiating
|
|
||||||
state.caller = true
|
|
||||||
state.callee = false
|
|
||||||
state.endedReason = null
|
|
||||||
},
|
|
||||||
localMediaSuccess (state) {
|
|
||||||
state.localMediaStream = Vue.$call.getLocalMediaId()
|
|
||||||
},
|
|
||||||
startRinging (state) {
|
|
||||||
state.callState = CallState.ringing
|
|
||||||
},
|
|
||||||
stopRinging (state) {
|
|
||||||
state.callState = CallState.established
|
|
||||||
},
|
|
||||||
establishCall (state) {
|
|
||||||
state.remoteMediaStream = Vue.$call.getRemoteMediaId()
|
|
||||||
state.callState = CallState.established
|
|
||||||
state.microphoneEnabled = true
|
|
||||||
state.cameraEnabled = true
|
|
||||||
state.remoteVolumeEnabled = true
|
|
||||||
},
|
|
||||||
incomingCall (state, options) {
|
|
||||||
state.callState = CallState.incoming
|
|
||||||
state.number = options.number
|
|
||||||
state.callee = true
|
|
||||||
state.caller = false
|
|
||||||
state.endedReason = null
|
|
||||||
},
|
|
||||||
hangUpCall (state) {
|
|
||||||
state.callState = CallState.input
|
|
||||||
state.number = ''
|
|
||||||
state.numberInput = ''
|
|
||||||
state.endedReason = null
|
|
||||||
Vue.$call.hangUp()
|
|
||||||
},
|
|
||||||
endCall (state, reason) {
|
|
||||||
if (state.endedReason === null) {
|
|
||||||
state.callState = CallState.ended
|
|
||||||
state.endedReason = reason
|
|
||||||
}
|
|
||||||
Vue.$call.end()
|
|
||||||
},
|
|
||||||
sendDTMF (state, value) {
|
|
||||||
state.dtmf = value
|
|
||||||
},
|
|
||||||
toggleMicrophone (state) {
|
|
||||||
state.microphoneEnabled = !state.microphoneEnabled
|
|
||||||
},
|
|
||||||
toggleCamera (state) {
|
|
||||||
state.cameraEnabled = !state.cameraEnabled
|
|
||||||
},
|
|
||||||
toggleRemoteVolume (state) {
|
|
||||||
state.remoteVolumeEnabled = !state.remoteVolumeEnabled
|
|
||||||
},
|
|
||||||
maximize (state) {
|
|
||||||
state.dialpadOpened = false
|
|
||||||
state.maximized = true
|
|
||||||
},
|
|
||||||
minimize (state) {
|
|
||||||
state.dialpadOpened = false
|
|
||||||
state.maximized = false
|
|
||||||
},
|
|
||||||
toggleDialpad (state) {
|
|
||||||
state.dialpadOpened = !state.dialpadOpened
|
|
||||||
},
|
|
||||||
enableCall (state) {
|
|
||||||
state.callEnabled = true
|
|
||||||
},
|
|
||||||
disableCall (state) {
|
|
||||||
state.callEnabled = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
start (context, localMedia) {
|
|
||||||
const number = context.getters.callNumberInput.replaceAll('(', '')
|
|
||||||
.replaceAll(')', '')
|
|
||||||
.replaceAll(' ', '')
|
|
||||||
.replaceAll('-', '')
|
|
||||||
context.commit('startCalling', number)
|
|
||||||
Promise.resolve().then(() => {
|
|
||||||
return Vue.$call.createLocalMedia(localMedia)
|
|
||||||
}).then((localMediaStream) => {
|
|
||||||
context.commit('localMediaSuccess')
|
|
||||||
Vue.$call.onRingingStart(() => {
|
|
||||||
context.commit('startRinging')
|
|
||||||
}).onRingingStop(() => {
|
|
||||||
context.commit('stopRinging')
|
|
||||||
}).start(number, localMediaStream)
|
|
||||||
}).catch((err) => {
|
|
||||||
Vue.$call.end()
|
|
||||||
handleUserMediaError(context, err)
|
|
||||||
setTimeout(() => {
|
|
||||||
context.commit('inputNumber')
|
|
||||||
}, errorVisibilityTimeout)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
accept (context, localMedia) {
|
|
||||||
Vue.$call.createLocalMedia(localMedia).then((localMediaStream) => {
|
|
||||||
Vue.$call.accept(localMediaStream)
|
|
||||||
context.commit('localMediaSuccess')
|
|
||||||
}).catch((err) => {
|
|
||||||
Vue.$call.end()
|
|
||||||
handleUserMediaError(context, err)
|
|
||||||
setTimeout(() => {
|
|
||||||
context.commit('inputNumber')
|
|
||||||
}, errorVisibilityTimeout)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
end (context) {
|
|
||||||
Vue.$call.end()
|
|
||||||
context.commit('hangUpCall')
|
|
||||||
},
|
|
||||||
sendDTMF (context, value) {
|
|
||||||
if (Vue.$call.hasRunningCall()) {
|
|
||||||
Vue.$call.sendDTMF(value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleMicrophone (context) {
|
|
||||||
if (context.getters.isMicrophoneEnabled) {
|
|
||||||
Vue.$call.disableAudio()
|
|
||||||
} else {
|
|
||||||
Vue.$call.enableAudio()
|
|
||||||
}
|
|
||||||
context.commit('toggleMicrophone')
|
|
||||||
},
|
|
||||||
toggleCamera (context) {
|
|
||||||
if (context.getters.isCameraEnabled) {
|
|
||||||
Vue.$call.disableVideo()
|
|
||||||
} else {
|
|
||||||
Vue.$call.enableVideo()
|
|
||||||
}
|
|
||||||
context.commit('toggleCamera')
|
|
||||||
},
|
|
||||||
toggleRemoteVolume (context) {
|
|
||||||
context.commit('toggleRemoteVolume')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import {
|
||||||
|
callGetLocalMediaStreamId,
|
||||||
|
callAccept,
|
||||||
|
callEnd,
|
||||||
|
callStart,
|
||||||
|
callAddCamera,
|
||||||
|
callAddScreen,
|
||||||
|
callRemoveVideo,
|
||||||
|
callHasLocalVideo,
|
||||||
|
callToggleMicrophone,
|
||||||
|
callIsMuted,
|
||||||
|
callSendDTMF,
|
||||||
|
callToggleRemoteAudio,
|
||||||
|
callIsRemoteAudioMuted, callHasLocalScreen, callHasLocalCamera
|
||||||
|
} from 'src/api/ngcp-call'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async start (context, localMedia) {
|
||||||
|
const number = context.getters.callNumberInput.replaceAll('(', '')
|
||||||
|
.replaceAll(')', '')
|
||||||
|
.replaceAll(' ', '')
|
||||||
|
.replaceAll('-', '')
|
||||||
|
context.commit('startCalling', number)
|
||||||
|
await callStart({
|
||||||
|
number,
|
||||||
|
localMedia
|
||||||
|
})
|
||||||
|
context.commit('localMediaSuccess', callGetLocalMediaStreamId())
|
||||||
|
},
|
||||||
|
async accept (context, localMedia) {
|
||||||
|
await callAccept({
|
||||||
|
localMedia
|
||||||
|
})
|
||||||
|
context.commit('localMediaSuccess', callGetLocalMediaStreamId())
|
||||||
|
},
|
||||||
|
async toggleMicrophone (context) {
|
||||||
|
callToggleMicrophone()
|
||||||
|
context.commit('toggleMicrophone', !callIsMuted())
|
||||||
|
},
|
||||||
|
async toggleCamera (context) {
|
||||||
|
if (!callHasLocalVideo() || callHasLocalScreen()) {
|
||||||
|
await callAddCamera()
|
||||||
|
context.commit('disableVideo')
|
||||||
|
context.commit('enableCamera')
|
||||||
|
} else {
|
||||||
|
await callRemoveVideo()
|
||||||
|
context.commit('disableVideo')
|
||||||
|
}
|
||||||
|
context.commit('localMediaSuccess', callGetLocalMediaStreamId())
|
||||||
|
},
|
||||||
|
async toggleScreen (context) {
|
||||||
|
if (!callHasLocalVideo() || callHasLocalCamera()) {
|
||||||
|
await callAddScreen()
|
||||||
|
context.commit('disableVideo')
|
||||||
|
context.commit('enableScreen')
|
||||||
|
} else {
|
||||||
|
await callRemoveVideo()
|
||||||
|
context.commit('disableVideo')
|
||||||
|
}
|
||||||
|
context.commit('localMediaSuccess', callGetLocalMediaStreamId())
|
||||||
|
},
|
||||||
|
end (context) {
|
||||||
|
callEnd()
|
||||||
|
context.commit('hangUpCall')
|
||||||
|
},
|
||||||
|
sendDTMF (context, tone) {
|
||||||
|
callSendDTMF(tone)
|
||||||
|
},
|
||||||
|
toggleRemoteAudio (context) {
|
||||||
|
callToggleRemoteAudio()
|
||||||
|
context.commit('toggleRemoteAudio', !callIsRemoteAudioMuted())
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import {
|
||||||
|
i18n
|
||||||
|
} from 'boot/i18n'
|
||||||
|
|
||||||
|
export const CallState = {
|
||||||
|
input: 'input',
|
||||||
|
initiating: 'initiating',
|
||||||
|
ringing: 'ringing',
|
||||||
|
incoming: 'incoming',
|
||||||
|
established: 'established',
|
||||||
|
ended: 'ended'
|
||||||
|
}
|
||||||
|
export const CallStateTitle = {
|
||||||
|
get input () { return i18n.t('Start new call') },
|
||||||
|
get initiating () { return i18n.t('Calling') },
|
||||||
|
get ringing () { return i18n.t('Ringing at') },
|
||||||
|
get incoming () { return i18n.t('Incoming call from') },
|
||||||
|
get established () { return i18n.t('In call with') },
|
||||||
|
get ended () { return i18n.t('Call ended') }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MediaType = {
|
||||||
|
audioOnly: 'audioOnly',
|
||||||
|
audioVideo: 'audioVideo',
|
||||||
|
audioScreen: 'audioScreen'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const errorVisibilityTimeout = 5000
|
||||||
|
export const reinitializeTimeout = 5000
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
import {
|
||||||
|
callGetLocalMediaStream,
|
||||||
|
callGetRemoteMediaStream,
|
||||||
|
callHasRemoteVideo
|
||||||
|
} from 'src/api/ngcp-call'
|
||||||
|
import {
|
||||||
|
normalizeDestination
|
||||||
|
} from 'src/filters/number-format'
|
||||||
|
import {
|
||||||
|
startCase
|
||||||
|
} from 'src/filters/string'
|
||||||
|
import {
|
||||||
|
CallState,
|
||||||
|
CallStateTitle
|
||||||
|
} from 'src/store/call/common'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
isCallEnabled (state) {
|
||||||
|
return state.callEnabled
|
||||||
|
},
|
||||||
|
endedReason (state) {
|
||||||
|
return state.endedReason
|
||||||
|
},
|
||||||
|
callNumber (state) {
|
||||||
|
return state.number
|
||||||
|
},
|
||||||
|
callNumberInput (state) {
|
||||||
|
return state.numberInput
|
||||||
|
},
|
||||||
|
isPreparing (state) {
|
||||||
|
return state.callState === CallState.input
|
||||||
|
},
|
||||||
|
isInitiating (state) {
|
||||||
|
return state.callState === CallState.initiating
|
||||||
|
},
|
||||||
|
isIncoming (state) {
|
||||||
|
return state.callState === CallState.incoming
|
||||||
|
},
|
||||||
|
isTrying (state) {
|
||||||
|
return state.callState === CallState.initiating ||
|
||||||
|
state.callState === CallState.ringing
|
||||||
|
},
|
||||||
|
isRinging (state) {
|
||||||
|
return state.callState === CallState.ringing
|
||||||
|
},
|
||||||
|
isCalling (state) {
|
||||||
|
return state.callState === CallState.initiating ||
|
||||||
|
state.callState === CallState.ringing ||
|
||||||
|
state.callState === CallState.established ||
|
||||||
|
state.callState === CallState.incoming ||
|
||||||
|
state.callState === CallState.ended
|
||||||
|
},
|
||||||
|
isEstablished (state) {
|
||||||
|
return state.callState === CallState.established
|
||||||
|
},
|
||||||
|
isEnded (state) {
|
||||||
|
return state.callState === CallState.ended
|
||||||
|
},
|
||||||
|
hasRtcEngineCapability (state, getters, rootState, rootGetters) {
|
||||||
|
return rootGetters['user/hasRtcEngineCapability']
|
||||||
|
},
|
||||||
|
hasRtcEngineCapabilityEnabled (state, getters, rootState, rootGetters) {
|
||||||
|
return rootGetters['user/hasRtcEngineCapabilityEnabled']
|
||||||
|
},
|
||||||
|
hasRemoteVideo (state) {
|
||||||
|
if (state.remoteMediaStream !== null) {
|
||||||
|
return callHasRemoteVideo()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hasLocalVideo (state, getters) {
|
||||||
|
if (state.localMediaStream !== null) {
|
||||||
|
return getters.isScreenEnabled || getters.isCameraEnabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hasVideo (state, getters) {
|
||||||
|
return getters.hasLocalVideo || getters.hasRemoteVideo
|
||||||
|
},
|
||||||
|
isCaller (state) {
|
||||||
|
return state.caller
|
||||||
|
},
|
||||||
|
isCallee (state) {
|
||||||
|
return state.callee
|
||||||
|
},
|
||||||
|
callState (state) {
|
||||||
|
return state.callState
|
||||||
|
},
|
||||||
|
localMediaStream (state) {
|
||||||
|
if (state.localMediaStream) {
|
||||||
|
return callGetLocalMediaStream()
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
remoteMediaStream (state) {
|
||||||
|
if (state.remoteMediaStream) {
|
||||||
|
return callGetRemoteMediaStream()
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
isMicrophoneEnabled (state) {
|
||||||
|
return state.microphoneEnabled
|
||||||
|
},
|
||||||
|
isCameraEnabled (state) {
|
||||||
|
return state.cameraEnabled
|
||||||
|
},
|
||||||
|
isScreenEnabled (state) {
|
||||||
|
return state.screenEnabled
|
||||||
|
},
|
||||||
|
isRemoteVolumeEnabled (state) {
|
||||||
|
return state.remoteAudioEnabled
|
||||||
|
},
|
||||||
|
isMaximized (state) {
|
||||||
|
return state.maximized
|
||||||
|
},
|
||||||
|
isDialpadOpened (state) {
|
||||||
|
return state.dialpadOpened
|
||||||
|
},
|
||||||
|
callNumberFormatted (state, getters) {
|
||||||
|
return normalizeDestination(getters.callNumber)
|
||||||
|
},
|
||||||
|
callEndedReasonFormatted (state, getters) {
|
||||||
|
return startCase(getters.endedReason)
|
||||||
|
},
|
||||||
|
callStateTitle (state) {
|
||||||
|
return CallStateTitle[state.callState]
|
||||||
|
},
|
||||||
|
callStateSubtitle (state, getters) {
|
||||||
|
if (state.callState === CallState.initiating ||
|
||||||
|
state.callState === CallState.ringing ||
|
||||||
|
state.callState === CallState.incoming ||
|
||||||
|
state.callState === CallState.established) {
|
||||||
|
return getters.callNumberFormatted
|
||||||
|
} else if (state.callState === CallState.ended) {
|
||||||
|
return getters.callEndedReasonFormatted
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import state from './state'
|
||||||
|
import getters from './getters'
|
||||||
|
import mutations from './mutations'
|
||||||
|
import actions from './actions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: state,
|
||||||
|
getters: getters,
|
||||||
|
mutations: mutations,
|
||||||
|
actions: actions
|
||||||
|
}
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
import {
|
||||||
|
CallState
|
||||||
|
} from 'src/store/call/common'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
numberInputChanged (state, numberInput) {
|
||||||
|
state.numberInput = numberInput
|
||||||
|
},
|
||||||
|
inputNumber (state) {
|
||||||
|
state.callState = CallState.input
|
||||||
|
state.number = ''
|
||||||
|
state.numberInput = ''
|
||||||
|
state.endedReason = null
|
||||||
|
},
|
||||||
|
startCalling (state, number) {
|
||||||
|
state.number = number
|
||||||
|
state.callState = CallState.initiating
|
||||||
|
state.caller = true
|
||||||
|
state.callee = false
|
||||||
|
state.endedReason = null
|
||||||
|
},
|
||||||
|
localMediaSuccess (state, localMediaStreamId) {
|
||||||
|
state.localMediaStream = localMediaStreamId
|
||||||
|
},
|
||||||
|
startRinging (state) {
|
||||||
|
state.callState = CallState.ringing
|
||||||
|
},
|
||||||
|
stopRinging (state) {
|
||||||
|
state.callState = CallState.established
|
||||||
|
},
|
||||||
|
establishCall (state, {
|
||||||
|
mediaStreamId,
|
||||||
|
isLocalAudioMuted = false,
|
||||||
|
hasLocalCamera = false,
|
||||||
|
hasLocalScreen = false,
|
||||||
|
hasRemoteVideo = false,
|
||||||
|
isRemoteAudioMuted = false
|
||||||
|
}) {
|
||||||
|
state.remoteMediaStream = mediaStreamId
|
||||||
|
state.callState = CallState.established
|
||||||
|
state.microphoneEnabled = !isLocalAudioMuted
|
||||||
|
state.cameraEnabled = hasLocalCamera
|
||||||
|
state.screenEnabled = hasLocalScreen
|
||||||
|
state.remoteAudioEnabled = !isRemoteAudioMuted
|
||||||
|
state.remoteVideoEnabled = hasRemoteVideo
|
||||||
|
},
|
||||||
|
incomingCall (state, options) {
|
||||||
|
state.callState = CallState.incoming
|
||||||
|
state.number = options.number
|
||||||
|
state.callee = true
|
||||||
|
state.caller = false
|
||||||
|
state.endedReason = null
|
||||||
|
},
|
||||||
|
hangUpCall (state) {
|
||||||
|
state.callState = CallState.input
|
||||||
|
state.number = ''
|
||||||
|
state.numberInput = ''
|
||||||
|
state.endedReason = null
|
||||||
|
},
|
||||||
|
endCall (state, reason) {
|
||||||
|
if (state.endedReason === null) {
|
||||||
|
state.callState = CallState.ended
|
||||||
|
state.endedReason = reason
|
||||||
|
state.localMediaStream = null
|
||||||
|
state.remoteMediaStream = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sendDTMF (state, value) {
|
||||||
|
state.dtmf = value
|
||||||
|
},
|
||||||
|
toggleMicrophone (state, enabled) {
|
||||||
|
state.microphoneEnabled = enabled
|
||||||
|
},
|
||||||
|
setCamera (state, enabled) {
|
||||||
|
state.cameraEnabled = enabled
|
||||||
|
},
|
||||||
|
enableCamera (state) {
|
||||||
|
state.cameraEnabled = true
|
||||||
|
},
|
||||||
|
enableScreen (state) {
|
||||||
|
state.screenEnabled = true
|
||||||
|
},
|
||||||
|
setScreen (state, enabled) {
|
||||||
|
state.screenEnabled = enabled
|
||||||
|
},
|
||||||
|
disableVideo (state) {
|
||||||
|
state.cameraEnabled = false
|
||||||
|
state.screenEnabled = false
|
||||||
|
},
|
||||||
|
toggleRemoteAudio (state, enabled) {
|
||||||
|
state.remoteAudioEnabled = enabled
|
||||||
|
},
|
||||||
|
maximize (state) {
|
||||||
|
state.dialpadOpened = false
|
||||||
|
state.maximized = true
|
||||||
|
},
|
||||||
|
minimize (state) {
|
||||||
|
state.dialpadOpened = false
|
||||||
|
state.maximized = false
|
||||||
|
},
|
||||||
|
toggleDialpad (state) {
|
||||||
|
state.dialpadOpened = !state.dialpadOpened
|
||||||
|
},
|
||||||
|
enableCall (state) {
|
||||||
|
state.callEnabled = true
|
||||||
|
},
|
||||||
|
disableCall (state) {
|
||||||
|
state.callEnabled = false
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
import {
|
||||||
|
CallState
|
||||||
|
} from 'src/store/call/common'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
callEnabled: false,
|
||||||
|
endedReason: null,
|
||||||
|
callState: CallState.input,
|
||||||
|
number: '',
|
||||||
|
numberInput: '',
|
||||||
|
localMediaStream: null,
|
||||||
|
remoteMediaStream: null,
|
||||||
|
caller: false,
|
||||||
|
callee: false,
|
||||||
|
microphoneEnabled: true,
|
||||||
|
cameraEnabled: false,
|
||||||
|
screenEnabled: false,
|
||||||
|
remoteAudioEnabled: true,
|
||||||
|
remoteVideoEnabled: true,
|
||||||
|
maximized: false,
|
||||||
|
dialpadOpened: false
|
||||||
|
}
|
||||||
Loading…
Reference in new issue