An introduction to live streaming with Daily

Overview

As more of our everyday offline activities shift online, we at Daily see customers using real-time video for bigger occasions and audiences. You can read our dedicated blog post on how Daily customers can use live streaming — in this post we’ll talk about how to live stream video calls for customers who are thinking about:

• Webinars
• Conference panels
• Classes
• Concerts and other live events
• All-hands meetings at large companies
• Demonstrations (like live coding, twitch-style live streaming)
• Live podcasts

Our API lets developers add video calls to any app or website. We're very excited to make it as easy as possible to live stream those video chats to platforms like Amazon IVS, YouTube, Facebook Live, and Mux. Keep reading for details on how it all works.

Background

Let's start by defining a few key terms:

• Encoder: A piece of software (or potentially hardware) that creates and encodes the RTMP stream. For example: Daily.
• RTMP: Real-Time Messaging Protocol is a TCP-based protocol, which maintains persistent connections and allows low-latency communication.
• Transcoder: A piece of software that ingests the RTMP stream and transcodes it to an HLS stream. For example: YouTube Live
• HLS: HTTP Live Streaming is an HTTP-based adaptive bitrate streaming communications protocol developed by Apple Inc.

At a high level, a live stream originating from a Daily call and appearing on YouTube Live happens in the following sequence:

1. An owner joins a video call.
2. They start a live stream.
3. Daily encodes an RTMP stream.
4. Daily begins sending the RTMP stream to YouTube Live.
5. YouTube Live begins transcoding the RTMP stream into an HLS stream.
6. Viewers all over the world watch the stream live*.

*Live in this case means a delay of roughly 20 seconds from Step 1 to streaming.

The Daily way

Now that you understand how live streaming on the web works, let's look at how simple Daily makes it to add to your app. We'll be using a special live-streaming branch of our Prebuilt demo.

To get started you’ll need to have a paid plan, either Launch or Scale.

Next you’ll need to create a room, and a meeting token that identifies you as an owner of that room. Please see our intro to room access control, if you need help creating the room or the token.

Finally, you’ll need to set up a stream with the streaming provider of your choice. Today we'll use YouTube, as they make the setup easy to follow, and most people already have an account. You can follow their guide about using an encoder. Make note of the stream URL that YouTube provides. You’ll need it in a second.

Putting it all together

Looking at index.js you’ll notice a few things specific to live streaming.

In the joinCall() function:

async function joinCall() {
  const roomURL = document.getElementById('room-url');

  // To use live streaming, add a meeting token. `is_owner` must be set to true for the token
  const token = 'MEETING_OWNER_TOKEN';
  await callFrame.join({
    url: roomURL.value,
    showLeaveButton: true,
    token, 
  });
}

We're using the room from the form input and the token you created above.

In startLiveStreaming():

// To use live streaming, the room URL should use the format:
// https://your-daily-domain.daily.co/room-name?t=your-owner-meeting-token

function startLiveStreaming() {
  // This should be in the format rtmp://RTMP_ENDPOINT/STREAM_KEY
  // or rtmps://RTMP_ENDPOINT/STREAM_KEY
  const rtmpUrl = 'INSERT_RTMP_URL';
  callFrame.startLiveStreaming({ rtmpUrl });
}

function stopLiveStreaming() {
  callFrame.stopLiveStreaming();
}

Here we have the function that actually starts the stream by calling startLiveStreaming() and passing in the rtmpUrl, which is the stream URL (and stream key) that YouTube provided you. Additionally we have stopLiveStreaming() which, you guessed it, calls stopLiveStreaming()`.

Finally, we've added those UI buttons to start and stop the stream and wired them up to the functions above with their onclick handlers.

<button
  class="call-panel--button button"
  id="start-livestreaming"
  onclick="startLiveStreaming()"
>
Start live streaming
</button>
<button
  class="call-panel--button button"
  id="stop-livestreaming"
  onclick="stopLiveStreaming()"
>
Stop live streaming
</button>

Summary

With just a few lines of code, you now have a fully functional live streaming room that can be broadcast to as many people as you need. Since Daily handles all the heavy lifting in the background, we recommend that you keep the number of participants with mics and cameras on to six or fewer. This will ensure smooth audio and video for those who are watching your live stream, like the ones who tuned into our demo.