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: "[email protected]",
          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');
  },
}
...