Change-Id: I1d8ae9dc2b241c392e450d02c3aa5eeab7eabd50pull/13/head
Hans-Peter Herzog
3 years ago
parent
9da0c00285
commit
73ba4fa869
@ -1,219 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="col-xs-10 col-sm-8 col-md-4 csc-opt-center"
|
||||
>
|
||||
<csc-inline-alert-info
|
||||
v-if="!hasRtcEngineCapabilityEnabled"
|
||||
class="q-mb-lg"
|
||||
>
|
||||
{{ $t('You can not join a conference, since the RTC:engine is not active. If you operate a C5 CE then first upgrade to a C5 PRO to be able to use the RTC:engine.') }}
|
||||
</csc-inline-alert-info>
|
||||
<div
|
||||
class="text-h6 text-center q-mb-lg"
|
||||
>
|
||||
{{ $t('Join conference with name') }}
|
||||
</div>
|
||||
<q-input
|
||||
ref="conferenceName"
|
||||
class="q-mb-lg"
|
||||
:value="conferenceIdInput"
|
||||
:placeholder="$t('Conference name')"
|
||||
:disable="isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
@input="conferenceIdChanged"
|
||||
>
|
||||
<template
|
||||
v-slot:prepend
|
||||
>
|
||||
<q-icon
|
||||
name="meeting_room"
|
||||
size="24px"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-slot:append
|
||||
>
|
||||
<q-btn
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
:color="shareButtonColor"
|
||||
:label="$t('Share')"
|
||||
flat
|
||||
dense
|
||||
icon="link"
|
||||
@click="showShareDialog"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<div
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-btn
|
||||
:color="joinButtonColor"
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
icon="login"
|
||||
text-color="dark"
|
||||
unelevated
|
||||
round
|
||||
size="large"
|
||||
@click="join"
|
||||
/>
|
||||
</div>
|
||||
<csc-object-spinner
|
||||
:loading="isJoining"
|
||||
/>
|
||||
<csc-share-conference-dialog
|
||||
ref="shareDialog"
|
||||
:conference-url="conferenceUrl"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
randInRange
|
||||
} from 'src/helpers/math-helper'
|
||||
import CscShareConferenceDialog from './CscShareConferenceDialog'
|
||||
import CscObjectSpinner from '../../CscObjectSpinner'
|
||||
import CscInlineAlertInfo from 'components/CscInlineAlertInfo'
|
||||
import { showGlobalError } from 'src/helpers/ui'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'CscConferenceJoin',
|
||||
components: {
|
||||
CscInlineAlertInfo,
|
||||
CscObjectSpinner,
|
||||
CscShareConferenceDialog
|
||||
},
|
||||
props: {
|
||||
conferenceId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
hasConferenceId: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
conferenceUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
localMediaStream: {
|
||||
type: MediaStream,
|
||||
default: null
|
||||
},
|
||||
isMicrophoneEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isCameraEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScreenEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isJoining: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isJoined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasRtcEngineCapabilityEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
conferenceIdInput: this.conferenceId
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('conference', [
|
||||
'localMediaError'
|
||||
]),
|
||||
contentClasses () {
|
||||
const classes = ['col', 'col-md-4', 'text-center']
|
||||
if (this.isCameraEnabled) {
|
||||
classes.push('csc-camera-background')
|
||||
} else if (this.isScreenEnabled) {
|
||||
classes.push('csc-screen-background')
|
||||
}
|
||||
return classes
|
||||
},
|
||||
joinButtonColor () {
|
||||
return 'primary'
|
||||
},
|
||||
shareButtonColor () {
|
||||
if (this.hasConferenceId) {
|
||||
return 'primary'
|
||||
} else {
|
||||
return 'grey'
|
||||
}
|
||||
},
|
||||
isMediaEnabled () {
|
||||
return this.isCameraEnabled || this.isScreenEnabled || this.isMicrophoneEnabled
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
conferenceId (value) {
|
||||
this.conferenceIdInput = value
|
||||
},
|
||||
localMediaError (error) {
|
||||
if (error !== null && error !== undefined) {
|
||||
showGlobalError(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (!this.conferenceId) {
|
||||
this.conferenceIdChanged(this.createConferenceId())
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
join () {
|
||||
this.$emit('join', this.conferenceId)
|
||||
},
|
||||
conferenceIdChanged (value) {
|
||||
try {
|
||||
this.$router.push({
|
||||
path: '/conference/' + value
|
||||
})
|
||||
this.conferenceIdInput = value
|
||||
} catch (err) {
|
||||
this.conferenceIdInput = this.conferenceId
|
||||
}
|
||||
},
|
||||
showShareDialog () {
|
||||
this.$refs.shareDialog.open()
|
||||
},
|
||||
createConferenceId () {
|
||||
const prefixes = ['conf', 'room', 'space']
|
||||
const randPrefixIndex = randInRange(0, prefixes.length - 1)
|
||||
const randSuffix = randInRange(100000, 999999)
|
||||
return prefixes[randPrefixIndex] + randSuffix
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
.csc-conf-alert
|
||||
margin-bottom $flex-gutter-md
|
||||
#csc-conf-link-input
|
||||
margin-bottom $flex-gutter-md
|
||||
#csc-conf-join-text
|
||||
margin-bottom $flex-gutter-md
|
||||
font-weight bold
|
||||
font-size 1rem
|
||||
#csc-conf-join-content
|
||||
padding $flex-gutter-md
|
||||
position relative
|
||||
z-index 2
|
||||
#csc-conf-join-content.csc-camera-background
|
||||
background-color alpha($main-menu-background, 0.5)
|
||||
#csc-conf-join-content.csc-screen-background
|
||||
background-color alpha($main-menu-background, 0.5)
|
||||
</style>
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CscConferenceJoined',
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<q-card
|
||||
class="bg-transparent"
|
||||
flat
|
||||
>
|
||||
<q-card-section
|
||||
v-if="!localMediaStream || localMediaStream && (!isCameraEnabled && !isScreenEnabled)"
|
||||
class="bg-black text-center"
|
||||
style="height: 100px"
|
||||
>
|
||||
<q-avatar
|
||||
class="absolute-center"
|
||||
style="top: 40px"
|
||||
>
|
||||
<q-icon
|
||||
name="person"
|
||||
size="32px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-card-section>
|
||||
<q-card-section
|
||||
v-show="localMediaStream && (isCameraEnabled || isScreenEnabled)"
|
||||
class="relative-position bg-black text-center full-width no-padding"
|
||||
style="height: 100px"
|
||||
>
|
||||
<csc-media
|
||||
ref="cscMedia"
|
||||
:preview="false"
|
||||
:muted="true"
|
||||
:stream="localMediaStream"
|
||||
/>
|
||||
</q-card-section>
|
||||
<div
|
||||
class="absolute-bottom text-center bg-main-menu q-pa-xs"
|
||||
>
|
||||
{{ localParticipant.displayName }}
|
||||
</div>
|
||||
<!-- <q-card-section-->
|
||||
<!-- class="bg-black text-subtitle2 text-center q-pb-sm q-pr-sm q-pl-sm q-pt-none"-->
|
||||
<!-- >-->
|
||||
<!-- {{ localParticipant.displayName }}-->
|
||||
<!-- </q-card-section>-->
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscMedia from '../../CscMedia'
|
||||
export default {
|
||||
name: 'CscConferenceLocalParticipant',
|
||||
components: {
|
||||
CscMedia
|
||||
},
|
||||
props: {
|
||||
localParticipant: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
displayName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
localMediaStream: {
|
||||
type: MediaStream,
|
||||
default: null
|
||||
},
|
||||
isMicrophoneEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isCameraEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScreenEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localMediaStream (stream) {
|
||||
this.assignStream(stream)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.assignStream(this.localMediaStream)
|
||||
},
|
||||
methods: {
|
||||
assignStream (stream) {
|
||||
if (this.$refs.cscMedia) {
|
||||
this.$refs.cscMedia.assignStream(stream)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
id="csc-conf-participants-cont"
|
||||
class="row justify-right items-center"
|
||||
>
|
||||
<csc-conference-local-participant
|
||||
ref="localParticipant"
|
||||
:local-participant="localParticipant"
|
||||
:local-media-stream="localMediaStream"
|
||||
:is-microphone-enabled="isMicrophoneEnabled"
|
||||
:is-camera-enabled="isCameraEnabled"
|
||||
:is-screen-enabled="isScreenEnabled"
|
||||
@click.native="setSelectedParticipant('local')"
|
||||
/>
|
||||
<div
|
||||
id="csc-conf-remote-participants-cont"
|
||||
>
|
||||
<csc-conference-remote-participant
|
||||
v-for="participantId in participantsList"
|
||||
:key="participantId"
|
||||
:remote-participant="remoteParticipant(participantId)"
|
||||
:has-remote-video="hasRemoteVideo(participantId)"
|
||||
:remote-media-stream="remoteMediaStream"
|
||||
:remote-media-streams="remoteMediaStreams"
|
||||
@click.native="setSelectedParticipant(participantId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import CscConferenceRemoteParticipant from './CscConferenceRemoteParticipant'
|
||||
import CscConferenceLocalParticipant from './CscConferenceLocalParticipant'
|
||||
|
||||
export default {
|
||||
name: 'CscConferenceParticipants',
|
||||
components: {
|
||||
CscConferenceRemoteParticipant,
|
||||
CscConferenceLocalParticipant
|
||||
},
|
||||
computed: {
|
||||
...mapState('conference', [
|
||||
'remoteMediaStreams'
|
||||
]),
|
||||
...mapGetters('conference', [
|
||||
'participantsList',
|
||||
'localParticipant',
|
||||
'localMediaStream',
|
||||
'isMicrophoneEnabled',
|
||||
'isCameraEnabled',
|
||||
'isScreenEnabled',
|
||||
'remoteParticipant',
|
||||
'remoteMediaStream',
|
||||
'hasRemoteVideo'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
localMediaStream (stream) {
|
||||
this.assignLocalMediaStream(stream)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.assignLocalMediaStream(this.localMediaStream)
|
||||
},
|
||||
methods: {
|
||||
assignLocalMediaStream (stream) {
|
||||
if (this.$refs.localParticipant) {
|
||||
this.$refs.localParticipant.assignStream(stream)
|
||||
}
|
||||
},
|
||||
setSelectedParticipant (participant) {
|
||||
this.$store.commit('conference/setSelectedParticipant', participant)
|
||||
this.$store.commit('conference/setManualSelection', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
#csc-conf-participants-cont
|
||||
padding 0px 20px 10px 20px
|
||||
display list-item
|
||||
height calc(100vh - 150px)
|
||||
overflow hidden
|
||||
@media (max-width: $breakpoint-sm)
|
||||
font-size 73px
|
||||
left -18px
|
||||
top -2px
|
||||
</style>
|
||||
@ -1,172 +0,0 @@
|
||||
<template>
|
||||
<q-card
|
||||
class="bg-transparent"
|
||||
flat
|
||||
>
|
||||
<q-card-section
|
||||
class="relative-position bg-black text-center full-width no-padding"
|
||||
style="height: 100px"
|
||||
>
|
||||
<q-icon
|
||||
v-ripple
|
||||
name="more_vert"
|
||||
class="absolute-left"
|
||||
style="z-index: 1; padding-top: 3px;"
|
||||
>
|
||||
<csc-popup-menu>
|
||||
<csc-popup-menu-item
|
||||
color="primary"
|
||||
dense
|
||||
:label="audioLabel()"
|
||||
@click="toggleAudio()"
|
||||
/>
|
||||
</csc-popup-menu>
|
||||
</q-icon>
|
||||
<q-icon
|
||||
v-show="isAudioMuted"
|
||||
v-ripple
|
||||
name="volume_off"
|
||||
class="absolute-right"
|
||||
:style="audioIconStyle"
|
||||
/>
|
||||
<q-icon
|
||||
v-show="!isAudioMuted"
|
||||
v-ripple
|
||||
name="volume_up"
|
||||
class="absolute-right"
|
||||
:style="audioIconStyle"
|
||||
/>
|
||||
<q-avatar
|
||||
v-show="!hasRemoteVideo"
|
||||
class="absolute-center"
|
||||
style="top: 40px"
|
||||
>
|
||||
<q-icon
|
||||
name="person"
|
||||
size="32px"
|
||||
/>
|
||||
</q-avatar>
|
||||
<csc-media
|
||||
v-show="hasRemoteVideo"
|
||||
ref="cscMedia"
|
||||
class="csc-media-cont"
|
||||
:preview="false"
|
||||
:muted="true"
|
||||
/>
|
||||
</q-card-section>
|
||||
<div
|
||||
class="absolute-bottom text-center bg-main-menu q-pa-xs"
|
||||
>
|
||||
{{ remoteParticipant.displayName }}
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import CscMedia from '../../CscMedia'
|
||||
import CscPopupMenu from 'components/CscPopupMenu'
|
||||
import CscPopupMenuItem from 'components/CscPopupMenuItem'
|
||||
import {
|
||||
TouchHold
|
||||
} from 'quasar'
|
||||
import {
|
||||
mapGetters,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
name: 'CscConferenceRemoteParticipant',
|
||||
directives: {
|
||||
TouchHold
|
||||
},
|
||||
components: {
|
||||
CscMedia,
|
||||
CscPopupMenu,
|
||||
CscPopupMenuItem
|
||||
},
|
||||
props: {
|
||||
remoteParticipant: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
displayName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
remoteMediaStream: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
remoteMediaStreams: {
|
||||
type: Object,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
hasRemoteVideo: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isAudioMuted: false,
|
||||
localMediaStream: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('conference', [
|
||||
'manualSelection'
|
||||
]),
|
||||
...mapGetters('conference', [
|
||||
'selectedParticipant',
|
||||
'mutedState'
|
||||
]),
|
||||
audioIconStyle () {
|
||||
return 'z-index: 1; padding-top: 3px; padding-right: 3px;'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
remoteMediaStreams () {
|
||||
this.assignStream()
|
||||
},
|
||||
mutedState () {
|
||||
this.isAudioMuted = _.has(this.mutedState, this.remoteParticipant.id)
|
||||
this.$refs.cscMedia.toggleAudio(this.isAudioMuted)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.assignStream()
|
||||
if (!this.manualSelection && this.remoteParticipant) {
|
||||
this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
assignStream () {
|
||||
if (this.$refs.cscMedia && _.has(this.remoteMediaStreams, this.remoteParticipant.id)) {
|
||||
this.localMediaStream = this.remoteMediaStream(this.remoteParticipant.id)
|
||||
this.$refs.cscMedia.assignStream(this.localMediaStream)
|
||||
if (this.selectedParticipant === this.remoteParticipant.id) {
|
||||
this.$store.commit('conference/setSelectedParticipant', 'local') // TODO improve (workaround to reset the mediaStream)
|
||||
this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id)
|
||||
}
|
||||
} else if (this.$refs.cscMedia) {
|
||||
this.$refs.cscMedia.reset()
|
||||
}
|
||||
},
|
||||
toggleAudio () {
|
||||
this.isAudioMuted
|
||||
? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id)
|
||||
: this.$store.commit('conference/addMutedState', this.remoteParticipant.id)
|
||||
},
|
||||
audioLabel () {
|
||||
return this.isAudioMuted
|
||||
? this.$t('Unmute')
|
||||
: this.$t('Mute')
|
||||
},
|
||||
showMenu () {
|
||||
this.$refs.popover.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<csc-dialog
|
||||
ref="dialogComp"
|
||||
:title="$t('Share conference')"
|
||||
:title-icon="'link'"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
>
|
||||
<q-input
|
||||
ref="conferenceUrlInput"
|
||||
:value="conferenceUrl"
|
||||
readonly
|
||||
@focus="selectConferenceUrl"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
slot="actions"
|
||||
color="primary"
|
||||
flat
|
||||
icon="link"
|
||||
@click="copy"
|
||||
>
|
||||
{{ $t('Copy link') }}
|
||||
</q-btn>
|
||||
</csc-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscDialog from '../../CscDialog'
|
||||
export default {
|
||||
name: 'CscShareConferenceDialog',
|
||||
components: {
|
||||
CscDialog
|
||||
},
|
||||
props: {
|
||||
conferenceUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted () {
|
||||
this.selectConferenceUrl()
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.$refs.dialogComp.open()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.conferenceUrlInput.focus()
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$refs.dialogComp.close()
|
||||
},
|
||||
copy () {
|
||||
this.$refs.conferenceUrlInput.select()
|
||||
document.execCommand('copy')
|
||||
this.close()
|
||||
},
|
||||
selectConferenceUrl () {
|
||||
if (this.$refs.conferenceUrlInput) {
|
||||
this.$refs.conferenceUrlInput.select()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -1,417 +0,0 @@
|
||||
<template>
|
||||
<q-layout
|
||||
id="csc-layout-conference"
|
||||
view="lHh lpR lFf"
|
||||
>
|
||||
<q-header
|
||||
id="csc-header-conference"
|
||||
class="bg-transparent"
|
||||
>
|
||||
<q-toolbar
|
||||
id="csc-header-toolbar-conference"
|
||||
class="bg-transparent"
|
||||
>
|
||||
<div
|
||||
v-if="isJoined"
|
||||
class="q-mr-md text-h6"
|
||||
>
|
||||
<q-icon
|
||||
name="meeting_room"
|
||||
size="24px"
|
||||
/>
|
||||
{{ conferenceId }}
|
||||
</div>
|
||||
<q-space />
|
||||
<div
|
||||
v-if="isJoined"
|
||||
class="q-mr-md text-h6"
|
||||
>
|
||||
<q-icon
|
||||
name="person"
|
||||
size="24px"
|
||||
/>
|
||||
{{ selectedParticipantName }}
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
color="tertiary"
|
||||
icon="clear"
|
||||
unelevated
|
||||
dense
|
||||
@click="close()"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
<q-page-container
|
||||
id="csc-page-conference"
|
||||
>
|
||||
<q-page
|
||||
class="full-width row wrap justify-center items-start content-center"
|
||||
>
|
||||
<csc-conference-join
|
||||
v-if="!isJoined"
|
||||
class="bg-main-menu q-pa-lg"
|
||||
style="z-index: 11"
|
||||
:conference-id="conferenceId"
|
||||
:has-conference-id="hasConferenceId"
|
||||
:conference-url="conferenceUrl"
|
||||
:local-media-stream="localMediaStream"
|
||||
:is-microphone-enabled="isMicrophoneEnabled"
|
||||
:is-camera-enabled="isCameraEnabled"
|
||||
:is-screen-enabled="isScreenEnabled"
|
||||
:is-media-enabled="isMediaEnabled"
|
||||
:is-joining="isJoining"
|
||||
:is-joined="isJoined"
|
||||
:has-rtc-engine-capability-enabled="hasRtcEngineCapabilityEnabled"
|
||||
@join="join"
|
||||
/>
|
||||
<csc-conference-joined
|
||||
v-if="!isJoining && isJoined"
|
||||
style="z-index: 10"
|
||||
/>
|
||||
<div
|
||||
class="absolute-full"
|
||||
>
|
||||
<csc-media
|
||||
v-show="showMainMedia"
|
||||
ref="localMedia"
|
||||
:muted="true"
|
||||
:stream="localMediaStream"
|
||||
:preview="false"
|
||||
/>
|
||||
</div>
|
||||
<csc-confirm-dialog
|
||||
ref="confirmDialog"
|
||||
title-icon="exit_to_app"
|
||||
:title="$t('Leave conference')"
|
||||
:message="$t('Leave current conference now!')"
|
||||
@confirm="leave"
|
||||
/>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
<q-drawer
|
||||
id="csc-conference-participants"
|
||||
side="right"
|
||||
:value="isJoined"
|
||||
:width="150"
|
||||
:mini-width="50"
|
||||
>
|
||||
<csc-conference-participants
|
||||
ref="confParticipants"
|
||||
class="no-margin q-mb-lg"
|
||||
/>
|
||||
</q-drawer>
|
||||
<q-footer
|
||||
id="csc-footer-conference"
|
||||
class="bg-footer"
|
||||
>
|
||||
<q-toolbar>
|
||||
<q-space />
|
||||
<q-btn
|
||||
:color="microphoneButtonColor"
|
||||
class="text-dark q-mr-md"
|
||||
style="margin-top: -60px"
|
||||
icon="mic"
|
||||
round
|
||||
size="large"
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
@click="toggleMicrophone()"
|
||||
/>
|
||||
<q-btn
|
||||
:color="cameraButtonColor"
|
||||
class="text-dark q-mr-md"
|
||||
style="margin-top: -60px"
|
||||
icon="videocam"
|
||||
round
|
||||
size="large"
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
@click="toggleCamera()"
|
||||
/>
|
||||
<q-btn
|
||||
:color="screenButtonColor"
|
||||
class="text-dark q-mr-md"
|
||||
style="margin-top: -60px"
|
||||
icon="screen_share"
|
||||
round
|
||||
size="large"
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
@click="toggleScreen()"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="isJoined"
|
||||
:color="screenButtonColor"
|
||||
style="margin-top: -60px"
|
||||
icon="more_vert"
|
||||
round
|
||||
size="large"
|
||||
:disable="!hasConferenceId || isJoining || !hasRtcEngineCapabilityEnabled"
|
||||
>
|
||||
<q-menu
|
||||
ref="popover"
|
||||
:auto-close="true"
|
||||
:disable="conferenceHasParticipants"
|
||||
>
|
||||
<q-list
|
||||
link
|
||||
class="no-border"
|
||||
>
|
||||
<q-item
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section
|
||||
@click="toggleMuteAll()"
|
||||
>
|
||||
<q-item-label>{{ muteLabel }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
</q-toolbar>
|
||||
</q-footer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
mapGetters,
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import CscConferenceJoin from 'components/pages/Conference/CscConferenceJoin'
|
||||
import CscConferenceJoined from 'components/pages/Conference/CscConferenceJoined'
|
||||
import CscMedia from 'components/CscMedia'
|
||||
import CscConfirmDialog from 'components/CscConfirmationDialog'
|
||||
import CscConferenceParticipants from 'components/pages/Conference/CscConferenceParticipants'
|
||||
|
||||
export default {
|
||||
name: 'CscConferenceLayout',
|
||||
components: {
|
||||
CscConferenceParticipants,
|
||||
CscConfirmDialog,
|
||||
CscMedia,
|
||||
CscConferenceJoin,
|
||||
CscConferenceJoined
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selectedMediaStream: null,
|
||||
selectedParticipantName: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('call', [
|
||||
'hasRtcEngineCapabilityEnabled'
|
||||
]),
|
||||
...mapState('conference', [
|
||||
'selectedParticipant'
|
||||
]),
|
||||
...mapGetters('conference', [
|
||||
'conferenceId',
|
||||
'conferenceUrl',
|
||||
'hasConferenceId',
|
||||
'isConferencingEnabled',
|
||||
'isJoined',
|
||||
'isJoining',
|
||||
'isMicrophoneEnabled',
|
||||
'isCameraEnabled',
|
||||
'isScreenEnabled',
|
||||
'isMediaEnabled',
|
||||
'localParticipant',
|
||||
'localMediaStream',
|
||||
'participantsList',
|
||||
'remoteParticipant',
|
||||
'remoteMediaStream',
|
||||
'remoteMediaStreams',
|
||||
'hasRemoteVideo',
|
||||
'mutedState'
|
||||
]),
|
||||
...mapGetters('user', [
|
||||
'getUsername'
|
||||
]),
|
||||
microphoneButtonColor () {
|
||||
if (this.isMicrophoneEnabled) {
|
||||
return 'primary'
|
||||
} else {
|
||||
return 'grey'
|
||||
}
|
||||
},
|
||||
cameraButtonColor () {
|
||||
if (this.isCameraEnabled) {
|
||||
return 'primary'
|
||||
} else {
|
||||
return 'grey'
|
||||
}
|
||||
},
|
||||
screenButtonColor () {
|
||||
if (this.isScreenEnabled) {
|
||||
return 'primary'
|
||||
} else {
|
||||
return 'grey'
|
||||
}
|
||||
},
|
||||
selectedHasVideo () {
|
||||
if (this.selectedParticipant === 'local') {
|
||||
return this.isVideoEnabled
|
||||
} else {
|
||||
return this.hasRemoteVideo(this.selectedParticipant)
|
||||
}
|
||||
},
|
||||
showMainMedia () {
|
||||
return (!this.isJoined && this.isVideoEnabled) || this.selectedHasVideo
|
||||
},
|
||||
isVideoEnabled () {
|
||||
return this.isMediaEnabled && (this.isCameraEnabled || this.isScreenEnabled)
|
||||
},
|
||||
conferenceHasParticipants () {
|
||||
return Object.keys(this.participantsList).length < 1
|
||||
},
|
||||
muteLabel () {
|
||||
return _.isEmpty(this.mutedState)
|
||||
? this.$t('Mute all')
|
||||
: this.$t('Unmute all')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hasConferenceId (value) {
|
||||
if (!value) {
|
||||
this.$store.commit('conference/disposeLocalMedia')
|
||||
}
|
||||
},
|
||||
selectedParticipant: {
|
||||
handler: function (participant) {
|
||||
if (participant) {
|
||||
this.showSelectedParticipant(participant)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
localMediaStream (stream) {
|
||||
if (this.$refs.localMedia && (stream === null || stream === undefined)) {
|
||||
this.$refs.localMedia.reset()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('conference', [
|
||||
'leave'
|
||||
]),
|
||||
close () {
|
||||
if (!this.isJoined) {
|
||||
this.$router.push({ path: '/user/dashboard' })
|
||||
this.$store.commit('conference/disposeLocalMedia')
|
||||
} else {
|
||||
this.$refs.confirmDialog.open()
|
||||
}
|
||||
},
|
||||
toggleMicrophone () {
|
||||
if (this.hasConferenceId) {
|
||||
this.$store.dispatch('conference/toggleMicrophone')
|
||||
}
|
||||
},
|
||||
toggleCamera () {
|
||||
if (this.hasConferenceId) {
|
||||
this.$store.dispatch('conference/toggleCamera')
|
||||
}
|
||||
},
|
||||
toggleScreen () {
|
||||
if (this.hasConferenceId) {
|
||||
this.$store.dispatch('conference/toggleScreen')
|
||||
}
|
||||
},
|
||||
toggleMuteAll () {
|
||||
if (_.isEmpty(this.mutedState)) {
|
||||
this.$store.dispatch('conference/muteAll')
|
||||
} else {
|
||||
this.$store.dispatch('conference/unMuteAll')
|
||||
}
|
||||
},
|
||||
async join (conferenceId) {
|
||||
if (this.hasConferenceId) {
|
||||
await this.$store.dispatch('conference/join', conferenceId)
|
||||
}
|
||||
},
|
||||
showSelectedParticipant (participant) {
|
||||
if (this.$refs.localMedia) {
|
||||
switch (participant) {
|
||||
case 'local':
|
||||
if (this.localParticipant) {
|
||||
this.selectedParticipantName = this.localParticipant.displayName
|
||||
this.selectedMediaStream = this.localMediaStream
|
||||
this.$refs.localMedia.assignStream(this.selectedMediaStream)
|
||||
}
|
||||
break
|
||||
default:
|
||||
this.selectedMediaStream = this.remoteMediaStream(participant)
|
||||
this.$refs.localMedia.assignStream(this.selectedMediaStream)
|
||||
this.selectedParticipantName = this.remoteParticipant(participant) ? this.remoteParticipant(participant).displayName : ''
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
#csc-conf-selected-participant-name
|
||||
position absolute
|
||||
top 20px
|
||||
bottom 0
|
||||
right 0
|
||||
left 0
|
||||
z-index 2
|
||||
background-color $conf-participant-box-color
|
||||
color $primary
|
||||
font-size 20px
|
||||
width 130px
|
||||
height 45px
|
||||
padding 10px
|
||||
@media (max-width: $breakpoint-sm)
|
||||
font-size 16px
|
||||
width 100px
|
||||
height 36px
|
||||
padding 8px
|
||||
#csc-conf-main-media
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
right 0
|
||||
left 0
|
||||
z-index 1
|
||||
background-color black
|
||||
font-size 0
|
||||
|
||||
#csc-conf-header
|
||||
z-index 2
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
position fixed
|
||||
background-color transparent
|
||||
height $call-footer-height
|
||||
.csc-conf-button.q-btn
|
||||
.q-btn-inner
|
||||
color white
|
||||
#csc-conf-body
|
||||
position relative
|
||||
z-index 2
|
||||
top $call-footer-height
|
||||
#csc-conf-footer
|
||||
z-index 2
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
position fixed
|
||||
background-color $layout-aside-background
|
||||
height $call-footer-height
|
||||
|
||||
#csc-conf-actions
|
||||
margin: -28px
|
||||
.q-btn:last-child
|
||||
margin-right 0
|
||||
.q-btn
|
||||
margin-right $flex-gutter-sm
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
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,432 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import {
|
||||
RequestState
|
||||
} from './common'
|
||||
|
||||
const MediaTypes = {
|
||||
mic: 'mic',
|
||||
micCam: 'micCam',
|
||||
cam: 'cam',
|
||||
micScreen: 'micScreen',
|
||||
screen: 'screen'
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
conferencingEnabled: false,
|
||||
microphoneEnabled: false,
|
||||
cameraEnabled: false,
|
||||
screenEnabled: false,
|
||||
localMediaState: RequestState.initiated,
|
||||
localMediaError: null,
|
||||
joinState: RequestState.initiated,
|
||||
joinError: null,
|
||||
leaveState: RequestState.initiated,
|
||||
leaveError: null,
|
||||
participants: [],
|
||||
mutedState: {},
|
||||
remoteMediaStreams: {},
|
||||
selectedParticipant: null,
|
||||
manualSelection: false
|
||||
},
|
||||
getters: {
|
||||
username (state, getters, rootState, rootGetters) {
|
||||
return rootGetters['user/getUsername']
|
||||
},
|
||||
conferenceId (state, getters, rootState, rootGetters) {
|
||||
return rootGetters.conferenceId
|
||||
},
|
||||
conferenceUrl (state, getters, rootState, rootGetters) {
|
||||
return rootGetters.conferenceUrl
|
||||
},
|
||||
hasConferenceId (state, getters, rootState, rootGetters) {
|
||||
return rootGetters.hasConferenceId
|
||||
},
|
||||
isJoined (state) {
|
||||
return state.joinState === RequestState.succeeded
|
||||
},
|
||||
isJoining (state) {
|
||||
return state.joinState === RequestState.requesting
|
||||
},
|
||||
isLeft (state) {
|
||||
return state.leaveState === RequestState.succeeded
|
||||
},
|
||||
isLeaving (state) {
|
||||
return state.leaveState === RequestState.requesting
|
||||
},
|
||||
isConferencingEnabled (state) {
|
||||
return state.conferencingEnabled
|
||||
},
|
||||
isMicrophoneEnabled (state) {
|
||||
return state.microphoneEnabled
|
||||
},
|
||||
isCameraEnabled (state) {
|
||||
return state.cameraEnabled
|
||||
},
|
||||
isScreenEnabled (state) {
|
||||
return state.screenEnabled
|
||||
},
|
||||
isMediaEnabled (state) {
|
||||
return (state.localMediaState === RequestState.succeeded ||
|
||||
state.localMediaState === RequestState.requesting) && Vue.$conference.hasLocalMediaStream()
|
||||
},
|
||||
localMediaStream (state) {
|
||||
if ((state.localMediaState === RequestState.succeeded ||
|
||||
state.localMediaState === RequestState.requesting) && Vue.$conference.hasLocalMediaStream()) {
|
||||
return Vue.$conference.getLocalMediaStreamNative()
|
||||
}
|
||||
return null
|
||||
},
|
||||
hasLocalMediaStream (state) {
|
||||
return (state.localMediaState === RequestState.succeeded ||
|
||||
state.localMediaState === RequestState.requesting) && Vue.$conference.hasLocalMediaStream()
|
||||
},
|
||||
localParticipant (state) {
|
||||
if (state.joinState === RequestState.succeeded) {
|
||||
return Vue.$conference.getLocalParticipant()
|
||||
}
|
||||
},
|
||||
remoteParticipant: () => (participantId) => {
|
||||
return Vue.$conference.getRemoteParticipant(participantId)
|
||||
},
|
||||
remoteMediaStream: () => (participantId) => {
|
||||
const participant = Vue.$conference.getRemoteParticipant(participantId)
|
||||
if (participant) {
|
||||
return participant.mediaStream ? participant.mediaStream.getStream() : null
|
||||
}
|
||||
return null
|
||||
},
|
||||
participantsList (state) {
|
||||
return state.participants
|
||||
},
|
||||
mutedState (state) {
|
||||
return state.mutedState
|
||||
},
|
||||
remoteMediaStreams (state) {
|
||||
return state.remoteMediaStreams
|
||||
},
|
||||
hasRemoteVideo: () => (participantId) => {
|
||||
const participant = Vue.$conference.getRemoteParticipant(participantId)
|
||||
if (participant) {
|
||||
return participant.mediaStream ? participant.mediaStream.hasVideo() : false
|
||||
}
|
||||
return false
|
||||
},
|
||||
selectedParticipant (state) {
|
||||
return state.selectedParticipant
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
enableConferencing (state) {
|
||||
state.conferencingEnabled = true
|
||||
},
|
||||
disableConferencing (state) {
|
||||
state.conferencingEnabled = false
|
||||
},
|
||||
enableMicrophone (state) {
|
||||
state.microphoneEnabled = true
|
||||
},
|
||||
disableMicrophone (state) {
|
||||
state.microphoneEnabled = false
|
||||
},
|
||||
enableCamera (state) {
|
||||
state.cameraEnabled = true
|
||||
},
|
||||
disableCamera (state) {
|
||||
state.cameraEnabled = false
|
||||
},
|
||||
enableScreen (state) {
|
||||
state.screenEnabled = true
|
||||
},
|
||||
disableScreen (state) {
|
||||
state.screenEnabled = false
|
||||
},
|
||||
localMediaRequesting (state) {
|
||||
state.localMediaState = RequestState.requesting
|
||||
state.localMediaError = null
|
||||
},
|
||||
localMediaSucceeded (state) {
|
||||
state.localMediaState = RequestState.succeeded
|
||||
state.localMediaError = null
|
||||
},
|
||||
localMediaFailed (state, error) {
|
||||
state.localMediaState = RequestState.failed
|
||||
state.localMediaError = error
|
||||
},
|
||||
isLocalMediaRequesting (state) {
|
||||
return state.localMediaState === RequestState.requesting
|
||||
},
|
||||
disposeLocalMedia (state) {
|
||||
Vue.$conference.removeLocalMediaStream()
|
||||
state.cameraEnabled = false
|
||||
state.microphoneEnabled = false
|
||||
state.screenEnabled = false
|
||||
},
|
||||
addRemoteMedia (state, participantId) {
|
||||
Vue.set(state.remoteMediaStreams, participantId, participantId)
|
||||
},
|
||||
removeRemoteMedia (state, participantId) {
|
||||
Vue.delete(state.remoteMediaStreams, participantId)
|
||||
},
|
||||
joinRequesting (state) {
|
||||
state.joinState = RequestState.requesting
|
||||
state.joinError = null
|
||||
},
|
||||
joinSucceeded (state) {
|
||||
state.joinState = RequestState.succeeded
|
||||
state.joinError = null
|
||||
state.leaveState = null
|
||||
state.selectedParticipant = 'local'
|
||||
},
|
||||
joinFailed (state, error) {
|
||||
state.joinState = RequestState.failed
|
||||
state.joinError = error
|
||||
},
|
||||
leaveRequesting (state) {
|
||||
state.leaveState = RequestState.requesting
|
||||
state.leaveError = null
|
||||
state.joinState = null
|
||||
},
|
||||
leaveSucceeded (state) {
|
||||
state.leaveState = RequestState.succeeded
|
||||
state.leaveError = null
|
||||
state.joinState = RequestState.initiated
|
||||
state.joinError = null
|
||||
state.selectedParticipant = null
|
||||
state.remoteMediaStreams = {}
|
||||
state.manualSelection = false
|
||||
state.participants = []
|
||||
state.mutedState = {}
|
||||
},
|
||||
leaveFailed (state, error) {
|
||||
state.leaveState = RequestState.failed
|
||||
state.leaveError = error
|
||||
},
|
||||
participantJoined (state, participant) {
|
||||
if (state.participants.includes(participant.getId())) {
|
||||
state.participants = state.participants.filter(($participant) => {
|
||||
return participant.getId() !== $participant
|
||||
})
|
||||
}
|
||||
state.participants.push(participant.getId())
|
||||
},
|
||||
participantLeft (state, participant) {
|
||||
state.participants = state.participants.filter(($participant) => {
|
||||
return participant.getId() !== $participant
|
||||
})
|
||||
},
|
||||
setSelectedParticipant (state, participant) {
|
||||
if (state.selectedParticipant === 'local' && !state.joinState === RequestState.succeeded) {
|
||||
state.selectedParticipant = null
|
||||
} else if (state.selectedParticipant === participant && !state.participants.includes(participant)) {
|
||||
state.selectedParticipant = 'local'
|
||||
state.manualSelection = false
|
||||
} else {
|
||||
state.selectedParticipant = participant
|
||||
}
|
||||
},
|
||||
setManualSelection (state, val) {
|
||||
state.manualSelection = val
|
||||
},
|
||||
addMutedState (state, participantId) {
|
||||
Vue.set(state.mutedState, participantId, participantId)
|
||||
},
|
||||
removeMutedState (state, participantId) {
|
||||
Vue.delete(state.mutedState, participantId)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
createLocalMedia (context, type) {
|
||||
const media = Vue.$rtcEngine.createMedia()
|
||||
context.commit('localMediaRequesting')
|
||||
switch (type) {
|
||||
default:
|
||||
case MediaTypes.mic:
|
||||
media.enableMicrophone()
|
||||
break
|
||||
case MediaTypes.micCam:
|
||||
media.enableMicrophone()
|
||||
media.enableCamera()
|
||||
break
|
||||
case MediaTypes.micScreen:
|
||||
media.enableMicrophone()
|
||||
media.enableScreen()
|
||||
break
|
||||
case MediaTypes.cam:
|
||||
media.enableCamera()
|
||||
break
|
||||
case MediaTypes.screen:
|
||||
media.enableScreen()
|
||||
break
|
||||
}
|
||||
let localMediaStream
|
||||
return media.build().then(($localMediaStream) => {
|
||||
localMediaStream = $localMediaStream
|
||||
Vue.$conference.setLocalMediaStream(localMediaStream)
|
||||
switch (type) {
|
||||
default:
|
||||
case MediaTypes.mic:
|
||||
context.commit('enableMicrophone')
|
||||
context.commit('disableCamera')
|
||||
context.commit('disableScreen')
|
||||
break
|
||||
case MediaTypes.micCam:
|
||||
context.commit('enableMicrophone')
|
||||
context.commit('enableCamera')
|
||||
context.commit('disableScreen')
|
||||
break
|
||||
case MediaTypes.micScreen:
|
||||
context.commit('enableMicrophone')
|
||||
context.commit('disableCamera')
|
||||
context.commit('enableScreen')
|
||||
break
|
||||
case MediaTypes.cam:
|
||||
context.commit('disableMicrophone')
|
||||
context.commit('enableCamera')
|
||||
context.commit('disableScreen')
|
||||
break
|
||||
case MediaTypes.screen:
|
||||
context.commit('disableMicrophone')
|
||||
context.commit('disableCamera')
|
||||
context.commit('enableScreen')
|
||||
break
|
||||
}
|
||||
return Promise.resolve()
|
||||
}).then(() => {
|
||||
if (context.getters.isJoined) {
|
||||
return Vue.$conference.changeConferenceMedia()
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}).then(() => {
|
||||
context.commit('localMediaSucceeded', localMediaStream)
|
||||
}).catch((err) => {
|
||||
if (!context.getters.hasLocalMediaStream) {
|
||||
context.commit('localMediaFailed', err.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
async enableMicrophone (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
let mediaType = MediaTypes.mic
|
||||
if (context.getters.isCameraEnabled) {
|
||||
mediaType = MediaTypes.micCam
|
||||
} else if (context.getters.isScreenEnabled) {
|
||||
mediaType = MediaTypes.micScreen
|
||||
}
|
||||
await context.dispatch('createLocalMedia', mediaType)
|
||||
}
|
||||
},
|
||||
disableMicrophone (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
let mediaType = null
|
||||
if (context.getters.isCameraEnabled) {
|
||||
mediaType = MediaTypes.cam
|
||||
} else if (context.getters.isScreenEnabled) {
|
||||
mediaType = MediaTypes.screen
|
||||
}
|
||||
if (mediaType === null) {
|
||||
context.commit('disposeLocalMedia')
|
||||
} else {
|
||||
context.dispatch('createLocalMedia', mediaType)
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleMicrophone (context) {
|
||||
if (!context.getters.isMicrophoneEnabled) {
|
||||
context.dispatch('enableMicrophone')
|
||||
} else {
|
||||
context.dispatch('disableMicrophone')
|
||||
}
|
||||
},
|
||||
enableCamera (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
context.dispatch('createLocalMedia', MediaTypes.micCam)
|
||||
}
|
||||
},
|
||||
disableCamera (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
let mediaType = null
|
||||
if (context.getters.isMicrophoneEnabled) {
|
||||
mediaType = MediaTypes.mic
|
||||
}
|
||||
if (mediaType === null) {
|
||||
context.commit('disposeLocalMedia')
|
||||
} else {
|
||||
context.dispatch('createLocalMedia', mediaType)
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleCamera (context) {
|
||||
if (!context.getters.isCameraEnabled) {
|
||||
context.dispatch('enableCamera')
|
||||
} else {
|
||||
context.dispatch('disableCamera')
|
||||
}
|
||||
},
|
||||
enableScreen (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
context.dispatch('createLocalMedia', MediaTypes.micScreen)
|
||||
}
|
||||
},
|
||||
disableScreen (context) {
|
||||
if (!context.getters.isLocalMediaRequesting) {
|
||||
let mediaType = null
|
||||
if (context.getters.isMicrophoneEnabled) {
|
||||
mediaType = MediaTypes.mic
|
||||
}
|
||||
if (mediaType === null) {
|
||||
context.commit('disposeLocalMedia')
|
||||
} else {
|
||||
context.dispatch('createLocalMedia', mediaType)
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleScreen (context) {
|
||||
if (!context.getters.isScreenEnabled) {
|
||||
context.dispatch('enableScreen')
|
||||
} else {
|
||||
context.dispatch('disableScreen')
|
||||
}
|
||||
},
|
||||
async join (context, conferenceId) {
|
||||
try {
|
||||
if (!Vue.$conference.hasLocalMediaStream()) {
|
||||
await context.dispatch('enableMicrophone')
|
||||
}
|
||||
context.commit('joinRequesting')
|
||||
await Vue.$conference.joinConference({
|
||||
conferenceName: conferenceId,
|
||||
displayName: context.getters.username
|
||||
})
|
||||
context.commit('joinSucceeded')
|
||||
} catch (err) {
|
||||
context.commit('joinFailed', err.message)
|
||||
}
|
||||
},
|
||||
async leave (context) {
|
||||
if (context.getters.isJoined) {
|
||||
try {
|
||||
context.commit('leaveRequesting')
|
||||
await Vue.$conference.leaveConference()
|
||||
context.commit('leaveSucceeded')
|
||||
} catch (err) {
|
||||
context.commit('leaveFailed', err.message)
|
||||
} finally {
|
||||
context.commit('disposeLocalMedia')
|
||||
}
|
||||
}
|
||||
},
|
||||
muteAll (context) {
|
||||
for (const participant of context.getters.participantsList) {
|
||||
context.commit('addMutedState', participant)
|
||||
}
|
||||
},
|
||||
unMuteAll (context) {
|
||||
for (const participant of context.getters.participantsList) {
|
||||
context.commit('removeMutedState', participant)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue