Building A Live Streaming Movie App & Live TV Website Part 2 — Live Video

Welcome to the 2nd part of Building a Live Movie App & Live TV Website. In this part of the tutorial, we will implement the actual live streaming of films so that you, your friends, and attendees can all watch a movie simultaneously. Please see Part 1 here if you need to go back for steps that you might have missed.

Technical Overview

Required Developer Skills

We recommend that the developers ready this tutorial have the following skills:

• HTML/CSS
• Basic Javascript
• Basic React

Topics Covered:

• Uploading Video Content
• Uploading Images
• RTMP & HLS Streaming

Code Repository: Download and run the completed code at https://github.com/BingeWave/Build-A-Livestreaming-App-For-Virtual-Movie-Premieres

Estimated Timed To Complete: 30 Minutes

Difficulty Level: Easy to Intermediate

The Tutorial

Step 1: Creating Video Content

Continuing from part 1, we have the basics for our React Application setup; we can now tackle the first part of uploading videos. Let us start by making an upload page:

touch src/pages/UploadVideoPage.jsx

And inside that file , setup your basic react component:

import React from 'react';
import API from '../util/Api';
import Errors from '../components/errors';
class UploadVideoPage extends React.Component {
   render() {
     return (<h1>Upload Page</h1>);
   }
}
export default UploadVideoPage;

Import the component inside our App.js. In the top of the page include:

import UploadVideoPage from ‘./pages/UploadVideoPage’;

Copy and paste the code inside your <Switch> statement:

<Route path=”/upload” exact={true}>
      <UploadVideoPage />
</Route>

Let’s test it out. If your application is not running, use npm start to start it.

npm start

In your web browser, go to http://localhost:3400/upload, and your upload page will now display! Let’s start building out the upload page with the constructor inside src/pages/UploadVideoPage.jsx:

To review the setup, the super will pass any props to the parent, we are going to bind the submitForm action we will implement later, and we are setting the default values of the state. Next, we are going to add a function for submitting the form.

In this function, we will take the state that contains the form values and pass it to our API function createVideo we defined in the previous tutorial. If successful, our success callback, which the first function passed as a parameter into createVideo function, which will return a video object and attempt to call the uploadVideo function.

The failure callback function takes and errors and assigns them to the state. Now let’s get into the final part of our upload page, the render function.

Quite a lot to break apart here. Let’s start from the top and work our way down:

1. ErrorTag: The error tag changes depending on the state. If the state.errors is not empty, it populates using the <ErrorTag />, which we defined in the previous tutorial. Otherwise, it’s just an empty string.
2. setState: Each form element uses the this.setState() in the form to assign the value to the state.
3. submitForm: And the final function in the form is called when the submitForm button is clicked. And according to the previous code, this will submit set the state with all of its updated values to the API.

Step 2: Implement Videos Page And Test Uploading Files

We need a page to view all of the content that is created. Start by creating a ListVideoPage.jsx page:

touch src/pages/ListVideosPage.jsx

Setup the basics inside the component:

In the state, we are setting the videos to an empty array. Now let’s implement a life cycle function componentDidMount, which executes when the React Component has finished loading:

componentDidMount() {
    let that = this;
    API.listVideos(function (data) {
        that.setState({ videos: data });
      }, function (errors) {
     });
}

When the component mounts, we are going to call our API and get the videos that have been created. Then we assign with the success callback’s data object to the videos in the state. According to the videos list documentation, this will be an array.

https://developers.bingewave.com/docs/videos#list

And finally, we can add our render function:

We are iterating through the videos array via a map function and using the <VideoListing> tag we defined in the previous tutorial.

Head back over to the App.js file and import the page:

import ListVideosPage from './pages/ListVideosPage';

Again, inside the <Switch> component add the above page to the /upload route.

<Route path="/upload" exact={true}>
      <UploadVideoPage />
</Route>

And the fun part begins; let’s test it out! We’ve provided some small publicly available sample videos you can download:

• Bunny Video
• Earth Spinning

Download the files, make sure your React application is started, and head to the upload page. Try to upload a few files and notice the processing state of each video and how it changes (if you successfully uploaded a video file). Remember, the processing state is in our types definitions:

https://developers.bingewave.com/types#video_processing_states

Time to complete the rest of the application.

Step 3: Build Out The Other Pages Challenge(Wash, Rinse, Repeat)

From here on, there is nothing new but washing, rinsing, and repeating. Meaning we are going to take the same concepts and apply them to the others page. We ARE NOT going to cover how to build each page, but you can implement the following pages on your own; the associated code is in each link below:

• CreateEventPage Code — Documentation — Query Builder
• ListEventsPage Code — Documentation — Query Builder
• UpdateEventPage Code — Documentation — Query Builder
• UpdateVideoPage Code — Documentation — Query Builder

Copy those pages directly into your app. Study the code, how they utilize the API, compare it the documentation, and test it in the query builder.

Some key take way when implementing the other pages:

1. Adding Pages to App.js: Each page must be imported and added to <Switch> statement in the App.js file.
2. Refer To The Docs: Compare the data being returned to the code in the documentation and query builder. Does everything match up?
3. EventsCreatePage: In the EventsCreatePage, the type is either a FEATURE or MULTIPLE. This matches our event types at https://developers.bingewave.com/types#event_types . Test both when you run your app.

Step 4 : View Events Page

The page that has to be reviewed is the ViewEventPage.js because it has the most unique with essential elements to make your application work. The full code of the page is below, and we will break it apart.

In the constructor, we are going to bind the handleStartStream and handleStopStream method.

this.handleStartStream = this.handleStartStream.bind(this);    this.handleStopStream = this.handleStopStream.bind(this);

Below we’ve completed those two functions as such:

The functions are calling the API functions we defined in part 1, which will call the start and stop stream API routes shown in the docs:

https://developers.bingewave.com/docs/eventcommands#startstream

https://developers.bingewave.com/docs/eventcommands#stopstream

This will cause the video(s) associated with the live event to start and stop. If the event has multiple videos, you can specify the video_id of which one you want to start.

Moving on, let’s look at the componentDidMount function.

To succinctly review some of these elements:

1. The appendScript and removeScript will add and remove BingeWave’s connect script. We do not need the connect script on every page, and this will ensure it is only loaded when needed.
2. We have the set script checked and called for inside a timeout. Javascript may take a few seconds to load, and the timeout gives a few seconds if the script hasn’t completely downloaded.
3. When the init() function is called, is will parse all the embed tags on the page and display relevant content.

We will skip over the rest of the code and head to around line 131, with the usage embed_livestream .

<div dangerouslySetInnerHTML={{ __html: this.state.event.embed_livestream }} />

What is the embed_livestream? If you head over to the documents of when a response is returned for a live event:

https://developers.bingewave.com/docs/events#view

This tag implements a fully functional player onto the website in which the content will play through. Remember to check for embed in the Response tab in the query builder:

https://developers.bingewave.com/queries/events#create

The difference between the Livestream embed and other embeds like the Video Chat Embed used in other tutorials is that the Video Chat creates a room where multiple people can join using the computers or phone camera. The Live Stream embed only shows pre-recorded content.

With the remainder of the pages implemented, a version of your application is complete! You still have to do the following:

1. Make sure the video files finish processing, which is viewable in ListVideosPage
2. Create an event using the CreateEventPage
3. Use the Play buttons at the top of the ViewEventPage

Try playing some of your videos with you a few friends who will all watch the same video simultaneously.

Bonus Challenge

Here are two challenge assignments for you to accomplish on this tutorial:

Chat & Online Users Widget: Can you implement the chat and online users widget for each screen?

Scheduled TV App Challenge: According to our documentation, we are creating two kinds of events:

1. Scheduled Event At A Set Date/Time
2. A Scheduled Event With Plays Multiple Pieces Of Content

Can these be used to create a Scheduled TV Application that continuously plays content?

Part 3 — Live TV

For Part 3 of this tutorial, we are going to delve into how to add a Live TV section to your site.

If you want to review our other tutorials, please checkout our tutorials here!