Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Introduction

0:00

Prerequisites

0:50

Create App Directories

1:19

Run npm init

1:48

Install Dependencies

2:04

Create the Assets Directory

2:15

Download the Assets from Github

2:34

Add the First Video to Assets

2:44

Create app.js

2:58

Testing the App in Dev

5:48

Begin Work on the Frontend

6:17

Start the React App

8:27

What’s Next?

8:55

Implement Bootstrap

9:13

Install react-router-dom

9:30

Create the Home View

9:56

Running Through home.js

14:18

Create the Player View

15:28

Running Through player.js

18:21

Make Adjustments to app.js

19:00

Tie Frontend Requests to the Server

20:36

Tie Videos to the Frontend

22:21

Create Video Thumbnails

23:26

Dynamically Serve Videos in Chunks

25:11

Quick Recap

30:07

Install FFMPEG

31:49

Adding Captions

33:47

Create A Caption Endpoint

35:56

Style Our App

36:58

Create Header and Footer Components

40:25

Conclusion

43:03
Create Your Own Video Streaming Site by Creating a Custom React.js App
375Likes
31,784Views
2022Feb 16
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
 ...more
...more

Follow along using the transcript.

Akamai Developer

1.04M subscribers