100-ms-vue

This is a starter pack of 100ms based on svelte-100ms.

Project setup

#usng npm
npm install

#using yarn
yarn install

Compiles and hot-reloads for development

#using npm
npm run serve

#using yarn
yarn serve

Compiles and minifies for production

#using npm
npm run build

#using yarn
yarn build

Lints and fixes files

#using npm
npm run lint

#using yarn
yarn lint

Project structure

• src/store: This handles the global state of the application
• src/utils: This contains re-useable functions
• src/components/icons: This is where icon components are
• src/components/AutoPlayError: Notifies the user of permission to access the audio
• src/components/ConnectionQuality: Shows the strength of the network
• src/components/DeviceSettings: Allows selection of audio, video and speaker option available on your system
• src/components/GalleryView: Displays all connected users
• src/components/JoinForm: This is where users initiate a connection to join
• src/components/ScreenShare: Show the screen the user is sharing
• src/components/ShareLink: Allows the user to copy a shareable link
• src/components/UChat: This is where sending and receiving messages happens
• src/components/UConference: This is the container for both GalleryView and ShareScreen
• src/components/UFooter: This contains the buttons to toggle audio, and video, and buttons to share screen and change settings
• src/components/UHeader: Here you have the leave room button, ShareLink and also the GitHub Icon used as a link to the repo
• src/components/UNotification: Handle notifications from hsmNotification which could be an error, offline users, incoming messages e.t.c
• src/components/UPeer: Handles the connected user, shows a placeholder if the user video is off, shows the name of the user
• src/components/UserAvartar: Used as a placeholder when the user video is off
• src/components/UToast: A custom component for toast should the message of the toast has an HTML tag
• src/components/UVideo: Show a video of the connected user and also the alphabet based on the hand sign overlays the video

Customize configuration

See Configuration Reference.