Live Streaming
Overview
Live video interactions can span various levels of interactivity. For example, in a virtual event, some participants can be on stage talking to each other, whereas participants in the audience can be listening to them.
At 100ms, we think of this as the 3 levels of interactivity. 100ms enables you to build live video use-cases by mixing and matching these 3 levels to get to your ideal solution.
-
Level 1: Full duplex audio/video in real-time
Level 1 participants publish their audio/video, and interact with others in sub-second latency. This is real-time video conferencing, similar to Zoom or Google Meet.
-
Level 2: Webinar-style audience in real-time
Level 2 participants consume audio/video from level 1 participants with sub-second latency, without publishing their own audio/video. Level 2 participants can engage with level 1 through messaging (chat, emojis, custom events). This is similar to a Zoom webinar.
Levels 1 and 2 are enabled using WebRTC.
-
Level 3: Live stream audience consuming in near real-time
Level 3 participants consume a composite live stream in near real-time (<10 secs of latency) without publishing their audio/video. They can interact with other participants via messaging. This is similar to viewers on Twitch or YouTube Live, and is enabled via 100ms Interactive Live Streaming.
Live streaming uses HLS to achieve near real-time latency at scale.
The roles primitive can be used to define capabilities of a participant and associate them to an interaction level. A participant can move between levels using a single API call to change roles.
Try Interactive Live Streaming
Use our Live Streaming Starter Kit to try out the experience before you write a line of code.
Create a new template
- Make sure that you have an account with 100ms and can access the 100ms dashboard
- On the dashboard, create a new template using the Live Streaming preset
- Specify a subdomain and region on the next screen
Understand roles
This preset configures your new template with two roles. All rooms created based on this template will have this configuration.
broadcaster
: This role represents a streamer who publishes their audio/video. There can be multiple peers who join as broadcastershls-viewer
: This role represents a circle 3 audience, who subscribes to the composite live stream and can interact using messaging
Go live
- To go live for the first time, join the room as a
broadcaster
and start the live stream - Once the stream has started, join the room as an
hls-viewer
and you should be able to see the ongoing live stream - Use chat messages to interact between the viewer and the broadcaster
Customize the stream
By default, the live stream is composed in landscape mode for desktop viewers (with an aspect ratio of 16:9). You can customise the live stream for viewers on mobile or to support multiple broadcaster tiles.
- On the 100ms dashboard, click the gear icon on your app to open configuration settings
- Go to "destinations" and scroll down to find live stream (HLS) configuration
- Update the configuration based on your needs:
- If your viewers are on mobile, change the video aspect ratio to 9:16
- If you have multiple broadcasters joining in, choose grid or active speaker based on your needs
- In case of grid layout, choose the tile size that fits your use-case. For example, a stream with 2 streamers looks better with 1:1 tiles.
Integrate in your app
To integrate 100ms Interactive Live Streaming in your app, follow these steps:
- Enable live streaming
- Integrate the 100ms SDK in your app
- Integrate live stream playback
- Video on demand (VOD) use cases
Enable live streaming
If your app is based on the Live Streaming Starter Kit (as shown above), the live streaming destination is enabled out-of-the-box.
For custom apps, you can enable the live streaming destination manually:
- Open configuration for your existing app using the 100ms dashboard
- In the "destinations" tab, enable "Live Streaming with HLS"
- Ensure that you have roles for the broadcaster (who can publish their audio/video) and the viewer (who cannot publish audio/video)
SDK integration
Use the 100ms client-side SDKs to integrate streaming in your application. See code snippets for the client-side SDK here.
Live stream playback
Using our client-side SDKs, you can enable live stream playback and add interactive experiences like chat, raise hand and other functionalities to your app using peer metadata.
The process is so simple:
- Once you start live streaming, you will get an HLS URL (M3U8 URL) which you can use for playback.
- You can use the client-side SDK to get the HLS URL by checking the current state of the room and start playback.
If you need to only enable HLS playback and don't need interactivity, you can follow one of the below approaches to get the HLS URL:
-
Webhook: You can listen to
hls.started.success
webhook event and get the HLS URL from theurl
field. Please check the webhooks guide to learn more about webhooks. -
Static URL: This configuration will help you get a static URL for playback. You can enable the
Static playback URLs
in your template from the dashboard. You can go to Destination > enable "Live streaming with HLS" > under "Stream Video Output" section > enable "Static Playback URLs"- Format:
https://cdn.100ms.live/beam/<customer_id>/<room_id>/master.m3u8
customer_id
: replace this placeholder with your customer_id from developer section on your dashboard.room_id
: replace this placeholder with theroom_id
of the respective room from which the stream will be broadcasted.
- Format:
Video on Demand (VOD) use cases
If you wish to replay your HLS stream for Video on demand (VOD) use case, 100ms provides the capability to record the HLS stream which will be posted to your webhook as a ZIP file of M3U8 format (same playback format as HLS) with all the chunks once the stream ends.
You can start recording a live stream using the client-side SDK or using the server API. Once the HLS recording is completed, you will get the details of recording as a callback to the webhook configured in your account. Check hls.recording.success
webhook event for more information.