Quickstart

Set up a template

A template governs how its Prebuilt UI functions. Head over to 100ms dashboard to create a template.

Create a room

A default room gets created for any template created using the 100ms dashboard. Create more rooms under the same template programmatically using the create room API.

Create and get room codes

Room code belongs to a unique room_id and role. Get room codes for each role

• from Dashboard - Copy role specific room code from Join Room section for a role in a room
• via API - Use Create Room Codes API to create room codes and get room codes using retrieve room codes API.

Get room code and template subdomain

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.

Passing user context with Prebuilt links(optional)

When using Prebuilt links and room codes, you can pass your user ID and user name to the Prebuilt link by appending ?userId=<user_id>&name=<user_name> to the link. This way, you can track user specific events when using server-side APIs and webhooks.

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>.app.100ms.live/meeting/<room-code>"
    style="height: 100vh; width: 100%; border:0;"
>
</iframe>

Fetch 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, Android, iOS, React Native, Flutter.

// 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;

// 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)

import SwiftUI
import HMSRoomKit

struct ContentView: View {
    var body: some View {
        HMSPrebuiltView(roomCode: /_pass room code as string here_/)
    }
}

// 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>" />;
};