1.0.1 • Published 3 years ago
cloudvoice-connect-vue v1.0.1
cloudvoice-connect-vue
Vue component for Cloudvoice Connect Integration.
Installation
NPM
$ npm install cloudvoice-connect-vue
Usage
<template>
<vue-cloudvoice-connect
ref="CloudvoiceConnectRef"
domain="telemed.cloudvoice.in"
:options="cvcOptions"
></vue-cloudvoice-connect>
</template>
<script>
import { CloudvoiceConnect } from "cloudvoice-connect-vue";
export default {
components: {
VueCloudvoiceConnect: CloudvoiceConnect,
},
computed: {
cvcOptions() {
return {
roomName: "cloudvoice",
token: "",
noSSL: false,
userInfo: {
email: "user@sample.com",
displayName: "FirstName LastName",
},
configOverwrite: {
enableNoisyMicDetection: false,
},
onload: this.onIFrameLoad,
};
},
},
methods: {
onIFrameLoad() {
// do stuff
},
},
};
</script>
Events
Methods
addEventListener(eventName, handler)
To create an event, you must specify a ref
in the CloudvoiceConnect component. This ref
is required to access the methods in the CloudvoiceConnect component.
<cloudvoice-connect-vue ref="CloudvoiceConnectRef" :options="cvcOptions" />
...
computed: {
cvcOptions () {
return {
...
onload: this.onIFrameLoad
};
},
},
methods: {
// Setup events after the IFrame onload event
onIFrameLoad () {
this.$refs.CloudvoiceConnectRef.addEventListener('participantJoined', this.onParticipantJoined);
},
onParticipantJoined (e) {
// do stuff
},
}
...
Methods
executeCommand(commandName, arg1, arg2, ...args)
Control the embedded CloudvoiceConnect conference using the executeCommand
method. Similar to the events, this can also be achieved using ref
.
<cloudvoice-connect-vue ref="CloudvoiceConnectRef" :options="cvcOptions" />
...
computed: {
cvcOptions () {
return {
...
onload: this.onIFrameLoad
};
},
},
methods: {
// Execute commands after the IFrame onload event
// or at any given action by the user.
onIFrameLoad () {
// This will load the 'The display name' value using the `displayName` command.
this.$refs.CloudvoiceConnectRef.executeCommand('displayName', 'The display name');
},
}
...