Overview

100ms Prebuilt is a feature-rich live video app that can be embedded in your web or mobile apps.

Prebuilt is a high-level abstraction that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. Prebuilt abstracts out nuances regarding audio/video integration which enables your end-users to get reliable live video without the hassles of integration.

100ms Prebuilt is available as links that can be shared with end-users or components that can be embedded inside existing apps.

Pre-built concept image

Demo 100ms Pre-built link →

Get started with Prebuilt

Depending on the desired user experience, you can use Prebuilt as shareable links or embeddable components.

Share or embed Prebuilt Links

Create role specific Prebuilt links and share it with you users or embed them as iframe.

Get Started with Prebuilt Links →

Embed natively

Embed the Prebuilt component natively in your iOS, Android or web app.

Embed as a component →

Prebuilt links

In this guide, we will create role-specific Prebuilt link and share/embed the link as an iframe.

Get room code and template subdomain

Prebuilt Link Structure

Prebuilt links are role specific room links with a format https://<template-subdomain>/<room-code> where,

template-subdomain- is the subdomain that you’ve defined at the time of template creation on 100ms Dashboard. Copy subdomain from Template details page on 100ms Dashboard
room-code- is a room code that belongs to a uniqueroom_id and role for which you're creating the room link. Get room codes for each role
- Copy role specific room code from Join Room section for a role in a room
- Create Room Codes API to create room codes

Construct the link

Once you have the template-subdomain and room code ready, append these to the link structure for all roles in your room.

Prebuilt Link for roles

Host Prebuilt Link : https://template-subdomain/meeting/room-code-for-host
Guest Prebuilt Link : https://template-subdomain/meeting/room-code-for-guest

Once you have a Prebuilt link ready, you can share it with your users on the fly as push notification, SMS, email etc or directly embed the link in your application. Refer the sample code snippet to embed the Prebuilt link as an iframe.


<iframe
  title="100ms-app"
  allow="camera *;microphone *;display-capture *"
  src="https://<your-template-subdomain>/meeting/<room-code>"
  style="height: 100vh; width: 100%; border:0;"
>
</iframe>

Embed as Component

100ms Prebuilt can be embedded as a native component HMSPrebuilt by importing 100ms Room Kit package in your app.

Component Basics

The HMSPrebuilt component is available across React, iOS, Android, Flutter, and React Native
- This is the highest-level UI component of a room, covering all screens and functionality
This component is shipped through RoomKit packages
- The RoomKit package will contain more (lower-level) UI components
- If you need a specific UI component, share your feedback on our Discord

Create room code

HMSPrebuilt uses room code to get initialised, it allow users to uniquely join a room_id with a specifc role. Head over to guides for create room codes and get room code.

Embedding HMSPrebuilt component

Import - HMSPrebuilt component requires importing RoomKit package
Initialise - Along with room code, you can additionally set userName and userID of the user joining the room
- userName - prefills the user name on HMSPrebuilt preview screen
- userID - use your user IDs to track user of your app

Sample code snippet to embed Prebuilt component. Head over for a step by step guides for React, Flutter, React Native, Android.



// import HMSPrebuilt component from Roomkit package
import { HMSPrebuilt } from '@100mslive/roomkit-react';

// add pre-built component
function App() {
    return (
        <div style={{ height: "100vh" }}>
            <HMSPrebuilt roomCode="<room-code>" />
        </div>
    );
 }

 export default App;



// import roomkit package
import 'package:hms_room_kit/hms_room_kit.dart';

// add pre-built component
HMSPrebuilt(roomCode: "<room-code>");


// import roomkit package
import { HMSPrebuilt } from "@100mslive/react-native-room-kit";

// add pre-built component
const ConferencingScreen = () => {
  return <HMSPrebuilt roomCode="<room-code>" />;
};



// add roomkit dependency in gradle file
implementation "live.100ms:room-kit:$roomKitVersion"

// import roomkit package
import live.hms.roomkit.ui.HMSRoomKit

// launch prebuilt from your activity or fragment
HMSRoomKit.launchPrebuilt(roomCode = "<room-code>", context = Activity)

Handling audio-video edge cases Overview

Have a suggestion? Recommend changes ->