Quickstart Guide


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 npm or yarn.

    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.

    token endpoint


    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:

    1. Navigate to your 100ms Dashboard or create an account if you don't have one.
    2. To test this app quickly, use the "Video Conferencing Starter Kit" to create a room with a default template assigned to it.
    3. Go to Rooms page in your Dashboard, copy the "Room Id" of the room and role created in the above step.
    4. 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.

Have a suggestion? Recommend changes ->

Was this helpful?