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.
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.
Embed natively
Embed the Prebuilt component natively in your iOS, Android or web app.
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. Copysubdomain
from Template details page on 100ms Dashboardroom-code
- is a room code that belongs to a uniqueroom_id
androle
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
Share or Embed as iFrame
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
- The
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
anduserID
of the user joining the roomuserName
- prefills the user name on HMSPrebuilt preview screenuserID
- 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;