Quickstart Guide
Overview
100ms-web is a fully featured sample application built using React. This application gives you a ready-made starting point for writing your video apps or customizing the cloned app based on your needs.
You can use this app to test:
- Basic functionalities: Video calling, Recording, Interactive live streaming (HLS), External streaming (RTMP), Screenshare, and Picture-in-Picture (PiP).
- Interactive features: Chat (broadcast, direct, & group), Raise hand.
- Plugins: Virtual background, Collaborative whiteboard.
The app also includes other features and capabilities like custom audio/video tracks, control remote peers, network quality and performance stats, adaptive bitrate (Simulcast), and more.
The sample app is intended to accelerate development, provide a full reference of all the features and capabilities, and demonstrate implementation with easy-to-read code.
If you are a developer trying to build an app from scratch, please check our quickstart guide. Quickstart provides a simple and quick way to build a reference app and familiarize yourself with the different capabilities of the platform with minimal code.
Local development
Set up the app repository
-
Clone the repository from GitHub.
git clone git@github.com:100mslive/100ms-web.git -
Change your working directory to
100ms-web.cd 100ms-web -
Install the dependencies using
npmoryarn.npm install or yarn install
Configure auth token endpoint
-
Set environment variables to configure token generation endpoint. Use the following command to copy the values from "example.env" to a new file called ".env".
cp example.env .env -
Update the 100ms token endpoint as an environment variable to handle auth token generation. You can get your token endpoint from the Developer section of 100ms' Dashboard.
Example:
REACT_APP_TOKEN_GENERATION_ENDPOINT = 'https://prod-in2.100ms.live/hmsapi/example.app.100ms.live/'
Start and test the app
Start the app
-
Start the app with the below command.
npm start or yarn start -
The app should now be running at http://localhost:3000/. You should see a welcome message saying, "Almost There!".
Create and join a room
-
To test audio/video functionality, you need to connect to a 100ms room; please check following steps for the same:
- Navigate to your 100ms Dashboard or create an account if you don't have one.
- To test this app quickly, use the "Video Conferencing Starter Kit" to create a room with a default template assigned to it.
- Go to Rooms page in your Dashboard, copy the "Room Id" of the room and role created in the above step.
- Add the "Room Id" and role to the localhost URL to test the app. For example,
http://localhost:3000/633fcdd84208780bf665346a/host
Next steps
Customize the app
Customize your UI like updating logo, tile aspect ratio, theme, etc. as per your brand.
Build and deploy
Building and deploying the 100ms sample app is simple and the same as any React project. You can deploy this to Vercel, Netlify, AWS, Web server, Docker, etc., as you prefer.
iframe integration
You can use the deployed URL in an iframe to embed the whole sample app inside your UI.
Code structure
Check the overall project structure of the sample app to understand how the code is organized and understand various components of the app.
Simple quickstart
Please check our quickstart guide if you're trying to get started with 100ms with a basic app.
