npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-video-conference-lite

v1.0.2

Published

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

Downloads

10

Readme

Toneflix Vue Video Conferencing (Lite)

npm npm npm

This is a lite version of the Toneflix Vue Video Conferencing library, the Toneflix Vue Video Conferencing library 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.

This lite version of the library is stripped down of the base dependencies, although it still offers the same functionality as the full version of the library, the lite version rather opts for the CDN version of the Jitsi Meet API instead of the third party NPM libraries used in the full version of the library making it a lot lighter and with less bloat.

Vue support

Supports only Vue >= 3

Installation and usage

$ npm i vue-video-conference-lite

Main.js

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

import conferencing from "vue-video-conference-lite";

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-lite";

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

Importing the css

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

Props

| Prop name | Type | Default | Description | | ------------------ | ------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | roomName* | String | null | The name of the room to join (Should be at least 4 characters long and contains no capital letters or Spaces). | | appDomain | String | meet.jit.si | The domain of the jitsi meet server. | | roomPassword | String | null | The password of the room. | | userName | String | null | The username of the user (Should be at least 3 characters long and contains no capital letters or Spaces), If not provided a random string will be used. | | displayName | String | null | The display name of the user. | | videoConstraints | Number | 360 | The video constraints of the user (180, 360, 720). | | appToken | String | null | the JWT token used to authenticate with the server | | allowVideo | Bool | true | Set to false if you want audio only. | | allowAudio | Bool | true | Set to false if you want video only. | | debugLevel | String | ERROR | The debug level of the jitsi meet api (DEBUG, ERROR, INFO, LOG, TRACE, WARN). | | aspect | Number | 0 | The aspect ratio of the video [0 = 4:3, 1 = 16:9, 2 = 1:1, 3 = 1:2] | | alwaysShowControls | Bool | false | Set to true if you want to always show the controls, otherwise they will only show when you hover over the video. | | autoConnect | Bool | false | When set to true, the component will automatically connect to the room when it is mounted. |

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

loading

The loading event is emitted when the video conferencing component is making a request to the server.

<template>
  <VideoConference @loading="onLoading" />
</template>

<script>
  export default {
    methods: {
      onLoading(loadingState) {
        console.log("loading", loadingState);
      },
    },
  };
</script>

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>