Change-Id: I0186ae80529dfaf35d08a22deb4f9b249bc16279changes/55/28255/8
Hans-Peter Herzog
7 years ago
parent
8d95437a08
commit
f1f5bc3583
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<q-layout>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="csc-conf-header"
|
||||||
|
class="csc-conf-full-height"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="row justify-end"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
class="csc-conf-button"
|
||||||
|
color="primary"
|
||||||
|
icon="clear"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
@click="close()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="csc-conf-body"
|
||||||
|
>
|
||||||
|
<csc-conference-join
|
||||||
|
id="csc-conf-join"
|
||||||
|
v-if="!isJoined"
|
||||||
|
:conferenceId="conferenceId"
|
||||||
|
:local-media-stream="localMediaStream"
|
||||||
|
:is-microphone-enabled="isMicrophoneEnabled"
|
||||||
|
:is-camera-enabled="isCameraEnabled"
|
||||||
|
:is-screen-enabled="isScreenEnabled"
|
||||||
|
:is-media-enabled="isMediaEnabled"
|
||||||
|
/>
|
||||||
|
<csc-conference-joined
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
</csc-conference-joined>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="csc-conf-main-media"
|
||||||
|
v-show="isMediaEnabled && isCameraEnabled"
|
||||||
|
>
|
||||||
|
<csc-media
|
||||||
|
ref="localMedia"
|
||||||
|
:muted="true"
|
||||||
|
:stream="localMediaStream"
|
||||||
|
:preview="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="csc-conf-footer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="csc-conf-actions"
|
||||||
|
class="row justify-center"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
class="csc-conf-button"
|
||||||
|
:color="microphoneButtonColor"
|
||||||
|
icon="mic"
|
||||||
|
round
|
||||||
|
@click="toggleMicrophone()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
class="csc-conf-button"
|
||||||
|
:color="cameraButtonColor"
|
||||||
|
icon="videocam"
|
||||||
|
round
|
||||||
|
@click="toggleCamera()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
class="csc-conf-button"
|
||||||
|
:color="screenButtonColor"
|
||||||
|
icon="computer"
|
||||||
|
round
|
||||||
|
@click="toggleScreen()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
mapGetters
|
||||||
|
} from 'vuex'
|
||||||
|
import CscConferenceJoin from '../pages/Conference/CscConferenceJoin'
|
||||||
|
import CscConferenceJoined from '../pages/Conference/CscConferenceJoined'
|
||||||
|
import CscMedia from "../CscMedia";
|
||||||
|
import {
|
||||||
|
QLayout,
|
||||||
|
QBtn
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$store.dispatch('user/initUser');
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CscMedia,
|
||||||
|
CscConferenceJoin,
|
||||||
|
CscConferenceJoined,
|
||||||
|
QLayout,
|
||||||
|
QBtn
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'conferenceId'
|
||||||
|
]),
|
||||||
|
...mapGetters('conference', [
|
||||||
|
'isConferencingEnabled',
|
||||||
|
'isJoined',
|
||||||
|
'isMicrophoneEnabled',
|
||||||
|
'isCameraEnabled',
|
||||||
|
'isScreenEnabled',
|
||||||
|
'isMediaEnabled',
|
||||||
|
'localMediaStream'
|
||||||
|
]),
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close() {
|
||||||
|
this.$router.push({path: '/user/home'});
|
||||||
|
this.$store.commit('conference/disposeLocalMedia');
|
||||||
|
},
|
||||||
|
toggleMicrophone() {
|
||||||
|
this.$store.dispatch('conference/toggleMicrophone');
|
||||||
|
},
|
||||||
|
toggleCamera() {
|
||||||
|
this.$store.dispatch('conference/toggleCamera');
|
||||||
|
},
|
||||||
|
toggleScreen() {
|
||||||
|
this.$store.dispatch('conference/toggleScreen');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../themes/app.common.styl'
|
||||||
|
#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>
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="row justify-center items-center csc-conf-full-height"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="csc-conf-join-content"
|
||||||
|
class="col col-4 text-center"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
id="csc-conf-join-text"
|
||||||
|
>{{ $t('conferencing.joinText') }}</p>
|
||||||
|
<q-input
|
||||||
|
ref="conferenceName"
|
||||||
|
id="csc-conf-link-input"
|
||||||
|
dark
|
||||||
|
:value="conferenceId"
|
||||||
|
align="center"
|
||||||
|
readonly
|
||||||
|
:after="conferenceNameButtons"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
class="csc-button"
|
||||||
|
color="primary"
|
||||||
|
icon="call"
|
||||||
|
round
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscMedia from '../../CscMedia'
|
||||||
|
import {
|
||||||
|
QBtn,
|
||||||
|
QInput
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-conference-join',
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'conferenceId',
|
||||||
|
'localMediaStream',
|
||||||
|
'isMicrophoneEnabled',
|
||||||
|
'isCameraEnabled',
|
||||||
|
'isScreenEnabled',
|
||||||
|
'isMediaEnabled'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QBtn,
|
||||||
|
QInput,
|
||||||
|
CscMedia
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
conferenceNameButtons() {
|
||||||
|
let buttons = [];
|
||||||
|
let self = this;
|
||||||
|
buttons.push({
|
||||||
|
icon: 'link',
|
||||||
|
error: false,
|
||||||
|
handler (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
self.copyLinkToClipboard();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return buttons;
|
||||||
|
},
|
||||||
|
conferenceLinkValue() {
|
||||||
|
return window.location.href;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
copyLinkToClipboard() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/app.common.styl'
|
||||||
|
#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
|
||||||
|
position relative
|
||||||
|
z-index 2
|
||||||
|
</style>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'csc-conference-joined',
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
|
||||||
|
import EventEmitter from 'events'
|
||||||
|
|
||||||
|
let conferencePlugin = null;
|
||||||
|
|
||||||
|
export class ConferencePlugin {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.events = new EventEmitter();
|
||||||
|
this.rtcEngine = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
setRtcEngine(rtcEngine) {
|
||||||
|
if(this.rtcEngine === null) {
|
||||||
|
this.rtcEngine = rtcEngine;
|
||||||
|
this.rtcEngine.onConferenceNetworkConnected(()=>{
|
||||||
|
this.events.emit('connected');
|
||||||
|
}).onConferenceNetworkDisconnected(()=>{
|
||||||
|
this.events.emit('disconnected');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onConnected(listener) {
|
||||||
|
this.events.on('connected', listener);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDisconnected(listener) {
|
||||||
|
this.events.on('disconnected', listener);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
static getInstance() {
|
||||||
|
if(conferencePlugin === null) {
|
||||||
|
conferencePlugin = new ConferencePlugin();
|
||||||
|
}
|
||||||
|
return conferencePlugin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(Vue) {
|
||||||
|
Vue.$conference = ConferencePlugin.getInstance();
|
||||||
|
Vue.$conference.setRtcEngine(Vue.$rtcEngine);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,167 @@
|
|||||||
|
|
||||||
|
import config from '../config'
|
||||||
|
import loadScript from 'load-script'
|
||||||
|
import EventEmitter from 'events'
|
||||||
|
|
||||||
|
const scriptId = 'cdk';
|
||||||
|
const scriptUrl = config.baseHttpUrl + '/rtc/files/dist/cdk-prod.js';
|
||||||
|
const webSocketUrl = config.baseWsUrl + '/rtc/api';
|
||||||
|
|
||||||
|
let rtcEnginePlugin = null;
|
||||||
|
|
||||||
|
export class RtcEnginePlugin {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.script = null;
|
||||||
|
this.client = null;
|
||||||
|
this.sessionToken = null;
|
||||||
|
this.ngcpApiJwt = null;
|
||||||
|
this.events = new EventEmitter();
|
||||||
|
}
|
||||||
|
|
||||||
|
createMedia() {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadLibrary() {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
if(this.script === null) {
|
||||||
|
loadScript(scriptUrl, {
|
||||||
|
attrs: {
|
||||||
|
id: scriptId
|
||||||
|
}
|
||||||
|
}, (err, script) => {
|
||||||
|
this.script = script;
|
||||||
|
if(err) {
|
||||||
|
console.error(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) {
|
||||||
|
cdk.ngcp.setApiJwt(this.ngcpApiJwt);
|
||||||
|
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) {
|
||||||
|
this.client = new cdk.Client({
|
||||||
|
url: webSocketUrl,
|
||||||
|
userSession: this.sessionToken
|
||||||
|
});
|
||||||
|
this.client.onConnect(()=>{
|
||||||
|
this.events.emit('connected');
|
||||||
|
let conferenceNetwork = this.client.getNetworkByTag('conference');
|
||||||
|
conferenceNetwork.onConnect(()=>{
|
||||||
|
this.events.emit('conference-network-connected', conferenceNetwork);
|
||||||
|
}).onDisconnect(()=>{
|
||||||
|
this.events.emit('conference-network-disconnected', conferenceNetwork);
|
||||||
|
});
|
||||||
|
let sipNetwork = this.client.getNetworkByTag('sip');
|
||||||
|
sipNetwork.onConnect(()=>{
|
||||||
|
this.events.emit('sip-network-connected', sipNetwork);
|
||||||
|
}).onDisconnect(()=>{
|
||||||
|
this.events.emit('sip-network-disconnected', sipNetwork);
|
||||||
|
});
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
static getInstance() {
|
||||||
|
if(rtcEnginePlugin === null) {
|
||||||
|
rtcEnginePlugin = new RtcEnginePlugin();
|
||||||
|
}
|
||||||
|
return rtcEnginePlugin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(Vue) {
|
||||||
|
Vue.$rtcEngine = RtcEnginePlugin.getInstance();
|
||||||
|
Vue.$rtcEngine.setNgcpApiJwt(localStorage.getItem('jwt'));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,258 @@
|
|||||||
|
|
||||||
|
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,
|
||||||
|
localMediaStream: null,
|
||||||
|
remoteMediaStreams: []
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
isJoined() {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
isConferencingEnabled(state) {
|
||||||
|
return state.conferencingEnabled;
|
||||||
|
},
|
||||||
|
isMicrophoneEnabled(state) {
|
||||||
|
return state.microphoneEnabled;
|
||||||
|
},
|
||||||
|
isCameraEnabled(state) {
|
||||||
|
return state.cameraEnabled;
|
||||||
|
},
|
||||||
|
isScreenEnabled(state) {
|
||||||
|
return state.screenEnabled;
|
||||||
|
},
|
||||||
|
isMediaEnabled(state) {
|
||||||
|
return state.localMediaStream !== null;
|
||||||
|
},
|
||||||
|
localMediaStream(state) {
|
||||||
|
if(state.localMediaStream !== null) {
|
||||||
|
return state.localMediaStream.getStream();
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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, localMediaStream) {
|
||||||
|
if(state.localMediaStream !== null) {
|
||||||
|
state.localMediaStream.stop();
|
||||||
|
state.localMediaStream = null;
|
||||||
|
}
|
||||||
|
state.localMediaState = RequestState.succeeded;
|
||||||
|
state.localMediaStream = localMediaStream;
|
||||||
|
state.localMediaError = null;
|
||||||
|
},
|
||||||
|
localMediaFailed(state, error) {
|
||||||
|
state.localMediaState = RequestState.failed;
|
||||||
|
state.localMediaError = error;
|
||||||
|
},
|
||||||
|
isLocalMediaRequesting(state) {
|
||||||
|
return state.localMediaState === RequestState.requesting;
|
||||||
|
},
|
||||||
|
disposeLocalMedia(state) {
|
||||||
|
if(state.localMediaStream !== null) {
|
||||||
|
state.localMediaStream.stop();
|
||||||
|
state.localMediaStream = null;
|
||||||
|
state.cameraEnabled = false;
|
||||||
|
state.microphoneEnabled = false;
|
||||||
|
state.screenEnabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
createLocalMedia(context, type) {
|
||||||
|
let 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;
|
||||||
|
}
|
||||||
|
media.build().then((localMediaStream)=>{
|
||||||
|
context.commit('localMediaSucceeded', 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;
|
||||||
|
}
|
||||||
|
}).catch((err)=>{
|
||||||
|
context.commit('localMediaFailed', err.message);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue