jitsi-meet-vue-sdk

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

jitsi-meet-vue-sdk

★ 24 Open GitHub ↗

Vue SDK for Jitsi Meet (built during GSoC 2022)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Jitsi Meet Vue SDK

The Jitsi Meet Vue SDK provides the same user experience as the [Jitsi Meet](https://github.com/jitsi/jitsi-meet) app, in a customizable way which you can embed in your Vue.js app.

## Install

```bash

npm install @jitsi/vue-sdk

```

### Modules

This library exposes two components with similar properties, intended for different use-cases.

#### JitsiMeeting

To be used with custom domains as-it-is in React projects:

```js

<JitsiMeeting

:domain="YOUR_DOMAIN"

:room-name="YOUR_ROOM_NAME"

```

##### Properties specific to the `JitsiMeeting` component

###### `domain`

Optional. Field used to retrieve the external_api.js file that initializes the IFrame. If omitted, defaults to `meet.jit.si`.

#### JaaSMeeting

To be used with the `8x8.vc` domain as-it-is in Vue projects:

```js

<JaaSMeeting

:app-id="YOUR_APP_ID"

:room-name="YOUR_ROOM_NAME"

```

...or with the `stage.8x8.vc` domain:

```js

<JaaSMeeting

:app-id="YOUR_APP_ID"

:room-name="YOUR_ROOM_NAME"

:use-staging="true"

```

**Note: When using the props name, Vuejs automatically converts it to kebab case**

##### Properties specific to the `JaasMeeting` component

###### `appId`

Required. Provides an isolated context and prefixes the room name.

###### `useStaging`

Optional. Tells whether to use the staging environment or not.

#### Common properties

###### `roomName`

Required. String used when joining the meeting.

###### `lang`

Optional. The default meeting language.

```js

<JitsiMeeting

:domain="YOUR_DOMAIN"

:room-name="YOUR_ROOM_NAME"

lang="de"

```

###### `configOverwrite`

Optional. Object used for options overrides.

###### `interfaceConfigOverwrite`

Optional. Object used for more options overrides.

###### `jwt`

Optional. Token for authentication.

###### `invitees`

Optional. Participants list.

###### `devices`

Optional. Information regarding the devices used during the call.

###### `userInfo`

Optional. Details about the participant that started the meeting.

#### Slots

###### `spinner`

Optional. Custom loading view while the IFrame is loading.

```js

import  CustomSpinner  from  "yourcustomspinner";

<JitsiMeeting

:domain="YOUR_DOMAIN"

:room-name="YOUR_ROOM_NAME"

</template>

</JitsiMeeting>

```

#### Events

###### `getIFrameRefOnApiReady`

Event to retrieve the parent node of the IFrame for more control (e.g. styling). Triggered when the Jitsi Iframe is ready.

```js

<JitsiMeeting

...

@get-iframe-ref-on-api-ready="(parentNode) => { parentNode.style.height  =  '700px'}"

```

###### Typescript example

```ts

<JitsiMeeting

...

@get-iframe-ref-on-api-ready="(parentNode: HTMLDivElement) => { parentNode.style.height = '700px'}"

```

###### `onApiReady`

Callback triggered when the external API is loaded to expose it for events and commands.

```js

<JitsiMeeting

...

@on-api-ready="(externalApi) => {console.log('Jisti is ready')

```

###### Typescript example

```ts

<JitsiMeeting

...

@on-api-ready="(externalApi: IJitsiMeetExternalApi) => {console.log('Jisti is ready')

```

###### `onReadyToClose`

Callback triggered when the meeting is ready to be closed.

```js

<JitsiMeeting

...

@on-ready-to-close="() => { console.log('Ready to close') }"

```

## Sample

Run npm build in the root folder

```bash

npm run build

```

Navigate to the `example` directory.

Install and run the project from the `example` directory to see the JitsiMeeting module in action.

```bash

npm install

```

###

```bash

npm run dev

```

## Acknowledgements

This module is modeled after: https://github.com/jitsi/jitsi-meet-react-sdk

jitsi-meet-vue-sdk

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README