Table of Contents

• Directory Structure
• Details

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.