Embedding Prebuilt as a native component

Building fast versus the perfect custom setup for your users is a debate that has plagued engineers and PMs alike. And then 100ms Prebuilt was born. 🌅

💨 Shipping faster with Prebuilt

Building audio and video experiences should not be difficult, and it should not take more than 30 minutes to set up a video call within your application. Unfortunately, developers often spend days building even a basic video call setup on their platforms. To solve for this, we launched 100ms Prebuilt which abstracts the complexities of audio/video integration, providing your end-users with a reliable live video experience, while managing audio/video and room controls with 100ms dashboard templates.

🔗 Prebuilt Links as a way to get started

To make it easier to get started, we have partly solved this problem with Prebuilt links. These links empower developers to effortlessly generate and share role-specific links tailored for end-users, enabling them to seamlessly join a room. These links can be embedded using a simple iFrame or utilized as a web view in mobile applications.

However, if your use case or, more importantly, your users demand a more seamless video calling experience, it becomes crucial to natively integrate that into your app. Recognizing this need, we've expanded Prebuilt support across various platforms in the form of a native, embeddable component known as HMSPrebuilt.

💡 Prebuilt is now available cross-platform

• Embed Prebuilt as a native component on React Native, Web, Flutter, iOS, and Android.
• This component is getting an upgrade with improved UI and customization. Read more→

🌟 HMSPrebuilt component for a more immersive experience

An embeddable, highest-level UI component of a 100ms room, covering all screens and audio-video functionalities, chat, participant list, video layouts, roles, and more.

• This component is shipped through RoomKit packages. In the future, we plan to extend more components to build custom experiences with Prebuilt components like Chat, Participant List, Video Layouts, etc. so you can build custom experiences using our Prebuilt components
• Like Prebuilt links, the HMSPrebuilt Component requires room codes to get initialized.

Step-by-Step Guides - Follow these guides for Web, React Native, Android, Flutter, iOS

Let us now see how easy it is to use Prebuilt as a native embed in your apps.

For this, we’ll use the example of a teleconsultation app built using Next.js (a React framework) that lets you connect with medical practitioners. The final application, with HMSPrebuilt component as embed, can be tried out here and it would look this:

The code sandbox for the project is available here for you to try along.

The steps are as follows:

• Start by adding the roomkit-react dependency to your project.

  npm install @100mslive/roomkit-react --save

• Import the dependency in the app/page.js file.

  import { HMSPrebuilt } from "@100mslive/roomkit-react";

• Find the comment with the text ‘TODO: Embed HMSPrebuilt component here’ and paste the following with your room code as below:

  <HMSPrebuilt roomCode="<room code>" />

Room code can be found on the 100ms dashboard. We have written about Room codes for Prebuilt links in an earlier piece.

That is it! We should now be able to see an audio-video calling option on our landing page.

The final project code is available on GitHub and CodeSandbox.

🎨 Custom UI versus HMSPrebuilt component

Building customized video experiences is undeniably appealing, but it can be quite demanding on your development resources. 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI.

However, if you find yourself unsure about committing to an extensively customized video experience, and what you truly need is a speedy, low-code, and customizable (hint: Big Update coming soon) solution that doesn't demand a substantial effort, then HMSPrebuilt might be your solution of choice.

🚀 Prebuilt Upgrade

In our upcoming September'23 release, 100ms Prebuilt is getting some major upgrades. The idea is to reduce the development time and effort and provide a customizable solution that helps you go live faster.

You'll be able to do more with Prebuilt. We are coming out with the following:

• Ready-to-ship UI built for use cases: We're upgrading the calling experience with improved UI/UX, including room controls and beautiful video layouts for 1:1, group calls, and live streaming, all with good defaults built-in.
• Prebuilt Customiser: Customise everything from customizing Prebuilt to match your themes, setting up a custom welcome text to configuring chat and participant list controls, and much more.
• You can get the upgraded experience on the Prebuilt Links and HMSPrebuilt Component after this release.

This is just the first of many releases to come. Watch out for more of our upcoming blogs which will provide more detail on this upgrade. We have a lot more planned in our Prebuilt roadmap and if you'd like to be a part of this journey and contribute to it, please tune in to our #Prebuilt discord channel.