Skip to content

Showcase of 100ms using Vue as the framework of choice

License

Notifications You must be signed in to change notification settings

thisdot/100-ms-vue

Repository files navigation

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.