コンテンツスーパーユーザーReact.jsのカスタムアプリを作って、自分だけの動画配信サイトを作ろう

カスタムReact.jsアプリを作成して独自のビデオストリーミングサイトを作成する

ビデオストリーミングアプリケーションの構築は、最初は、難しいと思われるかもしれません。特に、このビデオでは、どのようにして実現するかを説明します。具体的には、以下のコンポーネントを使ってストリーミングサービスを実装する方法を紹介します。

- サーバーサイドのNode.js アプリケーションで、ビデオの取得とストリーミング、ビデオのサムネイルの生成、ビデオのキャプションとサブタイトルの提供などを行います。

- Reactを使ったクライアントアプリケーションで、サーバー上のビデオを消費します。このアプリケーションは、利用可能なビデオのリストと、各ビデオのプレーヤービューの2つのビューを持ちます。

チャプター
0:00はじめに
0:50前提条件
1:19アプリ用ディレクトリの作成
1:48npm initの実行
2:04依存関係のインストール
2:15アセットディレクトリの作成
2:34Githubからアセットをダウンロードする
2:44 最初のビデオをAssetsに追加する
2:58app.jsの作成
5:48開発環境でのアプリのテスト
6:17 フロントエンドの作業開始
8:27 Reactアプリケーションの開始
8:55 次は何をする？
9:13Bootstrapの導入
9:30react-router-domのインストール
9:56ホームビューの作成
14:18 home.jsの実行
15:28 プレーヤービューの作成
18:21 player.jsの実行
19:00app.jsの調整
20:36フロントエンドのリクエストをサーバーに結びつける
22:21 動画をフロントエンドに結びつける
23:26動画のサムネイルの作成
25:11動画を動的に分割して配信する
30:07クイックリキャップ
31:49FFMPEGのインストール
33:47キャプションの追加
35:56キャプション・エンドポイントの作成
36:58アプリのスタイル
40:25ヘッダー＆フッターコンポーネントの作成
43:03 まとめ