An introduction to live streaming with Daily.co

How to use the Daily.co API to live stream a video call

#Overview

As more of our everyday offline activities shift online in 2020, we at [Daily.co](http://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](https://www.notion.so/dailyco/Live-streaming-beta-56d4334078c649638fed7ad4e62fb776). 

# 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](http://daily.co/).
* **
RTMP**: [_Real-Time Messaging Protocol_](https://en.wikipedia.org/wiki/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](https://www.youtube.com/create_channel?next=%2Flive_dashboard&upsell=live).
* **HLS**: [HTTP Live Streaming](https://en.wikipedia.org/wiki/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](http://docs.daily.co/reference) makes it to add to your app. We'll be using a special [live-streaming-demo](https://github.com/daily-co/daily-demos/tree/live-streaming-demo) branch of our [basic-example](https://github.com/daily-co/daily-demos/blob/live-streaming-demo/static-demos/basics-demo/basics.html). 

To get started you’ll need to be a [Scale Plan](https://www.daily.co/pricing) user, and you'll need live streaming turned on for your domain. Please [contact us](https://www.daily.co/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](https://www.daily.co/blog/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](https://support.google.com/youtube/answer/2907883) 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](https://github.com/daily-co/daily-demos/blob/live-streaming-demo/static-demos/basics-demo/basics.html) you’ll notice a few things specific to live streaming.

    -- CODE language-js --
    // 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:

    -- CODE language-js --
    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.

    -- CODE language-markup --
    <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.

<div class="video-container">
<iframe src="https://www.youtube.com/embed/qB48aWZD3vY" class="video-embed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

_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](https://mux.com/) 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!

Recent posts