Vue component for Jitsi Meet Web Integration via IFrame.
Vue component for Jitsi Meet Web Integration via IFrame.
NOTE: Always refer to the official Jitsi Meet IFrame API Docs.
This plugin supports all options available in the .
Just bind the jitsi option object to the options property.
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.
executeCommand(commandName, arg1, arg2, ...args)
Control the embedded JitsiMeet conference using the executeCommand method. Similar to the , this can also be achieved using ref.
domain
String
The jitsi server domain
options
Object
$ yarn add @mycure/vue-jitsi-meet$ npm install @mycure/vue-jitsi-meet<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: {
email: '[email protected]',
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><vue-jitsi-meet domain="meet.jit.si" :options="options"/><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
},
}
...<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');
},
}
...