Overview

As more of our everyday offline activities shift online in 2020, we at Daily.co felt it important to think about occasions with bigger audiences:

  • 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 now very excited to make it as easy as possible to live stream those video chats to platforms like YouTube, Facebook Live, and Mux. Keep reading for details on how it all works, or dive right into our live stream beta docs.

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.co.
  • RTMP: Real-Time Messaging Protocol is a TCP-based protocol, which maintains persistent connects 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.co 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.co encodes an RTMP stream.
  4. Daily.co 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.co makes it to add to your app. We'll be using a special live-streaming-demo branch of our basic-example.

To get started you’ll need to be a Scale Plan user, and you'll need live streaming turned on for your domain. Please contact us if you need this enabled.

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 basics.html you’ll notice a few things specific to live streaming.

// make sure your Daily.co domain has live streaming turned on and the token you're using has `is_owner` = true

room = { url: 'INSERT_ROOM_URL' };
token = 'INSERT_OWNER_TOKEN';
ownerLink = `${room.url}?t=${token}`

// this should be in the format rtmp://RTMP_ENDPOINT/STREAM_KEY
rtmpUrl = 'INSERT_RTMP_URL';

We're referencing the room and token you created above. Additionally, we have a new variable called rtmpUrl, which is the stream URL that YouTube provided you.

We've also added some live streaming specific event handlers:

callFrame.on('live streaming-started', (e) => {
  showEvent(e);
  buttonDisable('start-livestreaming');
  buttonEnable('stop-livestreaming');
});
callFrame.on('live streaming-stopped', (e) => {
  showEvent(e);
  buttonDisable('stop-livestreaming');
  buttonEnable('start-livestreaming');
});

callFrame.on('live streaming-error', showEvent);

These will manage the UI button state and display any messages in the console.

Finally, we've added those UI buttons to start and stop the stream.

<div>
    <button id="start-livestreaming" onclick="callFrame.startLiveStreaming({ rtmpUrl: rtmpUrl})">
      start livestream
    </button><button id="stop-livestreaming" onclick="callFrame.stopLiveStreaming()">
      stop livestream
    </button>
</div>
Streaming view of modular synth
Sample view of the stream from the meeting side. In this case we have two participants: one with camera and mic off and one with both enabled.

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.

The stream as viewed by viewers. Note that the second participant with camera and mic disabled is not present in the final stream.

Now what?

So what next? If you want to take this to the next level, we recommend using Mux to give you full control over the live streaming experience. We're working on a more in-depth set of posts about this, so stay tuned!