Skip to content

Code structure

Raghuram Iyer "Ragzzy-R edited this page Sep 14, 2022 · 1 revision

Table of Contents

This section explains the project structure and discusses a bit about how we have organized the code of the 100ms-web app.

Directory Structure

.
├── common
├── components
│   ├── AppData
│   ├── Chat
│   ├── Connection
│   ├── Footer
│   ├── Header
│   ├── Hooks
│   ├── Input
│   ├── MoreSettings
│   ├── Notifications
│   ├── PIP
│   ├── Playlist
│   ├── Preview
│   ├── Settings
│   ├── Streaming
│   ├── Toast
│   ├── hooks
│   └── init
├── controllers
│   └── hls
├── images
├── layouts
├── plugins
│   ├── VirtualBackground
│   ├── transcription
│   └── whiteboard
├── primitives
└── services

Details

This section explains each directory briefly.

Common

Contains some commonly used util functions, hooks and list all the constants used by the application.

Components

The heart of the application. Contains every component used in the app. A brief information on each of them is given below

  • AppData - This folder contains some hooks and helper functions that uses 100ms SDK's Store AppData. You can use them or build over this for your custom needs.

Directory Details
Chat The chat component you see on the right side of your screen in the 100ms web app.
Content Cell Content Cell
Connection The tiny connection symbol on the top right of the videoTile. Lets you visualize the peer's connection.
Footer The footer component. Contains two different footers for Conference and Streaming
Header The header component. Everything you see on the top of the page. (e.g) Participant list, Streaming Actions etc.
Hooks Some helper hooks.
Input This contains a small KeyboardInputManager which handles the shortcuts. Currently it has audio/video toggles and could be expanded to suit you needs. Use this Manager if you want to include more shortcuts.
MoreSettings This component is the one that is shown when we press the three dot more settings button
Notifications Component that shows the notification on the left bottom of the screen
 PIP Handles all the Picture in Picture of peer videos
 Playlist Video playlist(For watch party).
Preview The preview component which is displayed when you join the room. This is the page where we enter our name and check our video/audio preview
Settings The settings modal component that contains the device settings, notification settings etc.
Streaming Streaming component that contains UI workflow to start a stream.
Toast Component for showing toast messages

Controllers(hls)

This directory contains the HLS controller. This is a thin wrapper over HlsJs and handle things like parsing HLS Metadata.

Images

Contains the images needed for the webapp like logo, errorpage background etc.

Layouts

This contains components that define the different layout of webapp. (i.e) ActiveSpeakerView, HLSView, mainView etc. These views are selected based on role and other parameters by the MainView.

plugins

This directory contains plugins that imrpove the 100ms-web experience with some important tools like

  • VirtualBackground
  • Transcription
  • whiteboard

services

Contains few services like feature flags and token handling.