MYCURE OSS
Vue Jitsi Meet
Search
⌃K
Links
Comment on page
🤙

Vue Jitsi Meet

Vue component for Jitsi Meet Web Integration via IFrame.

​​
Deploy
​
​

Vue component for Jitsi Meet Web Integration via IFrame.
NOTE: Always refer to the official Jitsi Meet IFrame API Docs.

Installation

YARN

$ yarn add @mycure/vue-jitsi-meet

NPM

$ npm install @mycure/vue-jitsi-meet

Props

Prop
Type
Description
domain
String
The jitsi server domain
options
Object

Usage

<template>
<vue-jitsi-meet
ref="jitsiRef"
domain="meet.jit.si"
:options="jitsiOptions"
></vue-jitsi-meet>
</template>
​
<script>
import { JitsiMeet } from '@mycure/vue-jitsi-meet';
export default {
components: {
VueJitsiMeet: JitsiMeet
},
computed: {
jitsiOptions () {
return {
roomName: 'some-room-name',
noSSL: false,
userInfo: {
displayName: '',
},
configOverwrite: {
enableNoisyMicDetection: false
},
interfaceConfigOverwrite: {
SHOW_JITSI_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_CHROME_EXTENSION_BANNER: false
},
onload: this.onIFrameLoad
};
},
},
methods: {
onIFrameLoad () {
// do stuff
},
},
};
</script>

Domain, and Options

This plugin supports all options available in the Jitsi IFrame API Documentation.

Usage

Just bind the jitsi option object to the options property.
<vue-jitsi-meet domain="meet.jit.si" :options="options"/>

Events

Methods

addEventListener(eventName, handler)
To create an event, you must specify a ref in the JitsiMeet component. This ref is required to access the methods in the JitMeet component.
<vue-jitsi-meet ref="jitsiRef" :options="jitsiOptions"/>
...
computed: {
jitsiOptions () {
return {
...
onload: this.onIFrameLoad
};
},
},
methods: {
// Setup events after the IFrame onload event
onIFrameLoad () {
this.$refs.jitsiRef.addEventListener('participantJoined', this.onParticipantJoined);
},
onParticipantJoined (e) {
// do stuff
},
}
...

Execute Command

Methods

executeCommand(commandName, arg1, arg2, ...args)
Control the embedded JitsiMeet conference using the executeCommand method. Similar to the events, this can also be achieved using ref.
<vue-jitsi-meet ref="jitsiRef" :options="jitsiOptions"/>
...
computed: {
jitsiOptions () {
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.jitsiRef.executeCommand('displayName', 'The display name');
},
}
...
Last modified 1yr ago