Live video stream

Follow this guide to learn how to add a live video stream to your web application using Prepr.

This video was created using AI avatars and voices to ensure a consistent look and feel. The use of AI matches our culture of using innovative technologies.

Introduction

Imagine you are about to hold a corporate event. In this case, you may want to create a web page to announce and broadcast your virtual event. Also, recording your online event might be essential, especially if you attract attendees located in another time zone or want to send out the replay to all registrants.

Prepr makes all this incredibly simple with the Live streaming feature powered by Mux's advanced video services.

Prepr works as a centralized interface you can use for the following purposes:

  • Create and manage a live video stream.
  • Integrate a live video stream in a web application using the API and a video player.
  • Save and store your live stream as an on-demand video recording.

This article will guide you through the steps needed to build and launch your online event with Prepr:

  1. Set up a live stream in Prepr.
  2. Configure your broadcast software.
  3. Add a web player to your front end.
  4. Integrate your live stream with the web player.
  5. Play your live stream.

Let’s dive in.

Note

Starting from June 22nd, 2022, the Mux integration is available to all new Prepr customers by default. If you’ve joined Prepr before this date, you can request a migration from the deprecated AWS integration to the Mux integration anytime. Please contact us at prepr.io/support.

Note

This guide assumes you have already set up a content model. If not, we recommend starting with the following steps:

If you’re unsure about how to structure your content, check out our Example models for inspiration.

Step 1: Set up a live stream in Prepr

To set up a live stream in Prepr, you need to complete the following actions:

  1. Create a model with the Assets field. Let’s create a sample blog page you can use to broadcast your live video stream in a web application. To do it, complete the following actions:

a. Click the Schema tab to open the Schema Editor. Then, click the + Create model button. Follow the interface tips to tailor your model.

b. Click or drag fields from the Field types list into your model. Use the following field names and types:

  • Heading - Text
  • Live stream - Assets
  • Body - Dynamic content

Add Assets field

c. Fill in the field settings, then click Save to confirm. For more information, check out all available Field types.

Fill in Assets field settingd

Note

Make sure to select the Video asset type in the General tab to allow adding video files to this field.

  1. Create a livestream asset. Now you need to create a live stream asset in Prepr. See the details below.

a. Go to the Media tab and click Upload asset > drop-down menu > Create live stream.

Create a live stream

b. In the pop-up dialog window, give your live stream asset a name and click Create to confirm and generate a unique stream key for your broadcast.

Confirm a live stream creation

c. The next screen gives you the Server URL and Stream key that you need to connect to the broadcast software:

  • Server URL is the URL of the Mux RTMP server used to connect your broadcast software to Mux’s entry point for live streams.
  • Stream key is your secret key used to authenticate your live stream with the Mux RTMP server in your broadcast software.

Live stream details

Important

The stream key is shown only once. Make sure you save it securely.

Once done, you can add the live stream asset to a content item.

  1. Add a live stream asset to a content item. Now that you have created the live stream asset, you can add it to your content item as follows:

a. Navigate to the Content tab. You can either create a new content item or use an existing one.

b. On the Content item page, go to the Live stream field and click the icon.

Add live stream asset

c. Select the live stream asset you created in the previous step from the Media Library and click Add 1 item to confirm.

Select asset

  1. Publish your content item. To make your content available in a web application, you must save and publish this content item. For more details, see Publishing content items.

Publish content item

Once done, proceed to the next step.

Step 2: Configure your broadcast software

Now that you’ve set up the live stream in Prepr, you can move forward.

In this step, you need to configure your broadcast software using the Stream key you copied from the previous step and the Server URL.

Broadcast software uses video encoding technology to convert your video feed into a digital format suitable for live streaming across various devices and platforms. Here’s the list of broadcast solutions you may want to consider:

Let’s go with OBS as an example.

Configure a Custom streaming server by filling in the Server URL and entering your Stream key. Check out the OBS documentation for more tips.

Configure your broadcast software

Once done, navigate to the next step.

Step 3: Add a web player to your front end

Now that you’ve prepared a live stream asset and configured your broadcast software, you can choose which web player to use in your web application.

Here are some popular players you may want to use:

  • Mux Player is a native player developed by Mux.
  • HLS.js is free and open source. HLS.js will be a good choice if you want to use the HTML5 video element's default controls or build your own UI elements.
  • Agnoplay is a fully agnostic, cloud-based player solution for web, iOS, and Android.
  • JWPlayer is a commercial player that supports HLS by default and uses HLS.js as an underlying HLS engine.

Check out other options in the Mux documentation.

See the example Mux Player implementation below:

<script src="https://unpkg.com/@mux/mux-player"></script>

<mux-player
 stream-type="on-demand"
 playback-id="{PLAYBACK_ID}"
 metadata-video-title="Test video title"
 metadata-viewer-user-id="user-id-007"
></mux-player>
import MuxPlayer from '@mux/mux-player-react';

export default function VideoPlayer() {
 return (
   <MuxPlayer
     streamType="on-demand"
     playbackId="{PLAYBACK_ID}"
     metadata={{
       video_id: "video-id-54321",
       video_title: "Test video title",
       viewer_user_id: "user-id-007",
     }}/>
 );
}

Step 4: Integrate your live stream with the web player

Once you’ve completed the previous steps, you can integrate your live stream with the web player.

To integrate your live stream with a 3rd party player, you need to use the playback_id along with stream.mux.com in a format: https://stream.mux.com/{PLAYBACK_ID}.m3u8.

For Mux Player, including the playback_id is sufficient.

Use the following snippets as a starting point to retrieve your live stream via the API. You may want to add or remove arguments according to your desired set-up. For more information, see the GraphQL API reference.

query {
Blog (id: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX") {
 media {
   _id
   playback_id
   url
  }
 }
}
curl --location --request POST 'https://graphql.prepr.io/XXXXXXXXXXXX' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"{Blog (id: \"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\") { media { _id playback_id url}}}","variables":{}}''
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var graphql = JSON.stringify({
query: "{Blog (id: \"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\") { media { _id playback_id url}}}",
variables: {}
})
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow'
};

fetch("https://graphql.prepr.io/XXXXXXXXXXXX", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
query: "{Blog (id: \"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\") { media { _id playback_id url}}}",
variables: {}
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
  console.log(this.responseText);
}
});

xhr.open("POST", "https://graphql.prepr.io/XXXXXXXXXXXX");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);
<?php
$client = new Client();
$headers = [
'Content-Type' => 'application/json'
];
$body = '{"query":"{Blog (id: \\"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\\") { media { _id playback_id url}}}","variables":{}}';
$request = new Request('POST', 'https://graphql.prepr.io/XXXXXXXXXXXX', $headers, $body);
$res = $client->sendAsync($request)->wait();
echo $res->getBody();
{
 "data": {
     "Blog": {
         "media": [
             {
                 "_id": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
                 "playback_id": "XXXXXXXXXXXXXXXX",
                 "url": "https://stream.mux.com/XXXXXXXX.m3u8"
      }
    ]
  }
 }
}

Tip

Once done, copy and paste the live stream details returned in the API response to your web player.

Note

Before your live video stream starts, the playback URL will be inactive, therefore, no content will be available in a web player. In that case, we recommend setting up an intro layout, for example, the countdown timer or image cover, etc., to give your live stream a professional look and to grab the audience's attention. Refer to your web player documentation for more details.

Step 5. Play your live stream

Follow your broadcast software instructions to learn how to play a live stream. Some general recommendations are listed below.

Start a live stream

Once the live stream begins, it becomes available in your web application instantly. At the same time, the software starts pushing live video to the video host server.

Start streaming

You can also see the Live label in the live stream asset in Prepr:

Live stream asset in Prepr

Stop a live stream

Refer to your broadcast software documentation on how to stop a live stream.

Please note there may be a slight delay between when you stop streaming in the broadcast software and when the recording stops in Prepr. To stop recording immediately, we recommend that you follow this sequence of actions:

  1. First, stop recording your live stream in Prepr. For that, go to the Media tab and open the live stream asset. On the Live stream asset page, click Finish live stream.

Stop streaming

  1. Then, stop streaming in your broadcast software.

Important

Make sure to stop streaming within the 60s timeframe after you stop recording in Prepr. If not, your broadcast software may re-establish the connection, resulting in a new recorded asset.

Once done, the live stream will be replaced with the video recording in your web application automatically. Alternatively, you can access and play this video recording in the Media Library.

Because Prepr keeps your Stream key active, the live stream asset also remains available in the Media Library. So you can start a new live stream using the same credentials anytime. In this case, you’ll get several video recordings of your live stream in the Media Library, and your web page will show the latest recording every time.

Live strem recording in Media Library

Want to learn more?

Check out the following guides to learn how to add other asset types to your web application: