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.

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 article 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 + Add 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
   • Content - Dynamic content

   

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

   

   ⚠️

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

2. 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 assets → drop-down menu > Add live stream.

   

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

   

   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.

   

   ⚠️

   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.

3. 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.

   

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

4. Publish your content item. To make your content available in a web application, click the Publish and close button. For more details, see Publishing content items.

   

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:

• OBS (opens in a new tab) (free and open source, macOS/Windows/Linux)
• Wirecast (opens in a new tab) (commercial, macOS/Windows)
• Larix Broadcaster (opens in a new tab) (free, iOS)
• Wirecast Go (opens in a new tab) (commercial, iOS)

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 (opens in a new tab) for more tips.

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.

Because Mux delivers your videos in the HTTP Live Streaming (HLS) format, we recommend using a player that supports HLS. Here are some popular players you may want to use:

• Mux Player (opens in a new tab) is a native player developed by Mux.
• HLS.js (opens in a new tab) 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 (opens in a new tab) is a fully agnostic, cloud-based player solution for web, iOS, and Android.
• JWPlayer (opens in a new tab) 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 (opens in a new tab).

<script src="https://cdn.jsdelivr.net/npm/@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>

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 using a video Playback ID.

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 setup. For more information, see the GraphQL API reference.

query {
  Blog (id: "b6109df8-eb55-415a-944b-375dbee5034e") {
    media {
      _id
      playback_id
      url
    }
  }
}

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

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.

You can also see the Live label in the 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.

2. Then, stop streaming in your broadcast software.

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.

Want to learn more?

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

• Images
• Video & Audio
• Files