Create Your Own Video Streaming Site by Creating a Custom React.js App

Building a video streaming application might seem daunting at first, but this video will breakdown how this can be achieved. Specifically, we’ll demonstrate how to implement a streaming service with the following components:

– A server-side Node.js application that will handle fetching and streaming videos, generating thumbnails for your videos, and serving captions and subtitles for videos.

– A client application in React that will consume the videos on our server. This application will have two views: a listing of videos that are available, and a player view for each video.

Chapters:
0:00 Introduction
0:50 Prerequisites
1:19 Create App Directories
1:48 Run npm init
2:04 Install Dependencies
2:15 Create the Assets Directory
2:34 Download the Assets from Github
2:44 Add the First Video to Assets
2:58 Create app.js
5:48 Testing the App in Dev
6:17 Begin Work on the Frontend
8:27 Start the React App
8:55 What’s Next?
9:13 Implement Bootstrap
9:30 Install react-router-dom
9:56 Create the Home View
14:18 Running Through home.js
15:28 Create the Player View
18:21 Running Through player.js
19:00 Make Adjustments to app.js
20:36 Tie Frontend Requests to the Server
22:21 Tie Videos to the Frontend
23:26 Create Video Thumbnails
25:11 Dynamically Serve Videos in Chunks
30:07 Quick Recap
31:49 Install FFMPEG
33:47 Adding Captions
35:56 Create A Caption Endpoint
36:58 Style Our App
40:25 Create Header and Footer Components
43:03 Conclusion

New to Linode? Get started here with a $100 credit!
Read the doc for more information on Deploying a React Video Streaming App.
Learn more about React.
Download FFMPEG here.
Subscribe to get notified of new episodes as they come out.

#Linode #React #Video #Streaming
Product: Linode, Open Source, React; Sam Hawley;

Developer Tools