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 Cloud Computing? Get started here with a $100 credit → https://www.linode.com/lp/youtube-vie...
Read the doc for more information on Deploying a React Video Streaming App → https://www.linode.com/docs/guides/bu...
Learn more about React→ https://www.linode.com/products/
Download FFMPEG → https://ffmpeg.org/download.html
Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_co...

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