# Vue Jitsi Meet

## [![Deploy](https://github.com/mycurelabs/vue-jitsi-meet/workflows/Deploy/badge.svg)](https://github.com/mycurelabs/vue-jitsi-meet/workflows/Deploy/badge.svg)

Vue component for Jitsi Meet Web Integration via IFrame.

> **NOTE:** Always refer to the official [Jitsi Meet IFrame API Docs](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe).

## 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 | Jitsi \[Options] (<https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#api--new-jitsimeetexternalapidomain-options>) |

## Usage

```html
<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: 'user@email.com',
          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](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#api--new-jitsimeetexternalapidomain-options).

### **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.

```html
<vue-jitsi-meet ref="jitsiRef" :options="jitsiOptions"/>
```

```javascript
...
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

[Commands Documentation](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#controlling-the-embedded-jitsi-meet-conference)

### **Methods**

> `executeCommand(commandName, arg1, arg2, ...args)`

Control the embedded JitsiMeet conference using the `executeCommand` method. Similar to the [events](https://github.com/mycurelabs/vue-jitsi-meet#events), this can also be achieved using `ref`.

```html
<vue-jitsi-meet ref="jitsiRef" :options="jitsiOptions"/>
```

```javascript
...
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');
  },
}
...
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://oss.mycure.md/vue-jitsi-meet/vue-jitsi-meet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.