vue-video-conference v1.0.7

Toneflix Vue Video Conferencing

This is a simple video conferencing library built for Vue.js (Vue 3) with Jitsi Meet API (Low Level). The library allows you to create a voice/video conferencing solution with support for one to many connection.

Vue support

Supports only Vue >= 3

Installation and usage

$ npm i vue-video-conference

Install the lite version

$ npm i vue-video-conference-lite

Main.js

import { createApp } from "vue";
import App from "./App.vue";

import conferencing from "vue-video-conference";

createApp(App).use(conferencing).mount("#app");

Component.vue

<template>
  <VideoConference />
</template>

Direct usage

It is also possible to use the library directly in your component without installing it in your main.js file.

<template>
  <VideoConference />
</template>

<script>
  import { VideoConference } from "vue-video-conference";

  export default {
    components: {
      VideoConference,
    },
  };
</script>

Importing the css

<style>
  @import "vue-video-conference/dist/core.css";
</style>

Props

Slots

#controls

The controls slot allows you to modify or add custom controls to the video conferencing component.

<template>
  <VideoConference>
    <template
      #controls="{ 
        // toggleFullscreen, 
        // activeVideoTrack, 
        // videoTracks, 
        // conference, 
        // muteMe, 
        // tracks, 
        // status,     
        // start, 
        // stop 
    }"
    >
      <button>Custom Button</button>
    </template>
  </VideoConference>
</template>

Function toggleFullscreen

The toggleFullscreen function allows you to toggle the fullscreen mode of the video conferencing component.

Object activeVideoTrack

The activeVideoTrack variable contains the current active video track object.

Array videoTracks

The videoTracks variable contains an array of all the video tracks.

Object conference

The conference variable contains the current conference object.

Function muteMe

The muteMe function allows you to toggle the mute state of the current user. The function takes a string as an argument which can be either "audio" or "video", if no argument is provided it will toggle the mute state of the audio.

Array tracks

The tracks variable contains an array of all the tracks.

Object status

The status variable contains the current status of the video conferencing component.

{
  loading: false, // true if the video conferencing component is making a request to the server
  show: false, // true if a video conference is active and the video conferencing component is visible
  audioMuted: false, // true if the audio of the current user is muted
  videoMuted: false, // true if the video of the current user is muted
}

Function start

The start function allows you to start the video conferencing component.

Function stop

The stop function allows you to stop the video conferencing component.

Events

ready

The ready event is emitted when the video conferencing component is mounted and ready to be used.

<template>
  <VideoConference @ready="onReady" />
</template>

<script>
  export default {
    methods: {
      onReady() {
        console.log("Ready");
      },
    },
  };
</script>

connected

The connected event is emitted when the video conferencing component is connected to the server.

<template>
  <VideoConference @connected="onConnected" />
</template>

<script>
  export default {
    methods: {
      onConnected() {
        console.log("Connected");
      },
    },
  };
</script>

started

The started event is emitted when the video conference is started.

<template>
  <VideoConference @started="onStarted" />
</template>

<script>
  export default {
    methods: {
      onStarted() {
        console.log("Started");
      },
    },
  };
</script>

stopped

The stopped event is emitted when the video conference has ended or stopped.

<template>
  <VideoConference @stopped="onStopped" />
</template>

<script>
  export default {
    methods: {
      onStopped() {
        console.log("Stopped");
      },
    },
  };
</script>

joined

The joined event is emitted when the user joins the video conferencing room.

<template>
  <VideoConference @joined="onJoined" />
</template>

<script>
  export default {
    methods: {
      onJoined(conferenceObject) {
        console.log("Joined");
      },
    },
  };
</script>

left

The left event is emitted when a user leaves the video conferencing room.

<template>
  <VideoConference @left="onLeft" />
</template>

<script>
  export default {
    methods: {
      onLeft(userObject) {
        console.log("Left");
      },
    },
  };
</script>

trackAdded

The trackAdded event is emitted when a track is added.

<template>
  <VideoConference @trackAdded="onTrackAdded" />
</template>

<script>
  export default {
    methods: {
      onTrackAdded(trackObject) {
        console.log("Track Added");
      },
    },
  };
</script>

error

The error event is emitted when an error occurs.

<template>
  <VideoConference @error="onError" />
</template>

<script>
  export default {
    methods: {
      onError(errorMessage) {
        console.log("Error");
      },
    },
  };
</script>