通过创建一个自定义的React.js应用程序来创建你自己的视频流网站
构建一个视频流媒体应用程序起初可能令人生畏,但本视频将详细介绍如何实现这一目标。具体而言,我们将演示如何用以下组件实现流媒体服务:
- 一个服务器端的Node.js 应用程序,它将处理获取和流媒体视频,为你的视频生成缩略图,并为视频提供标题和字幕。
- 一个在React中的客户端应用程序,将消费我们服务器上的视频。这个应用程序将有两个视图:一个是可用的视频列表,另一个是每个视频的播放器视图。
章节:
0:00介绍
0:50先决条件
1:19创建应用程序目录
1:48运行npm init
2:04安装依赖项
2:15创建资产目录
2:34从Github下载资产
2:44添加第一个视频到资产目录
2:58创建app.js
5:48在开发中测试应用程序
6:17开始前台的工作
8:27启动React应用程序
8:55接下来是什么?
9:13实现Bootstrap
9:30安装react-router-dom
9:56创建首页视图
14:18运行home.js
15:28创建播放器视图
18:21运行player.js
19:00对app.js进行调整
20:36将前台请求与服务器联系起来
22:21将视频与前台联系起来
23:26创建视频缩略图
25:11动态地将视频分块送达
30:07快速总结
31:49安装FFMPEG
33:47添加字幕
35:56创建一个字幕端点
36:58为我们的应用程序添加样式
40:25创建页眉和页脚组件
43:03结语
Linode 新手?从这里开始,获得 100 美元信用额度!
阅读文档,了解有关部署 React 视频流应用程序的更多信息。
了解有关 React 的更多信息。
在此下载 FFMPEG。
订阅以获得新节目的通知。
#Linode #React #Video #Streaming
产品:Linode,开源,React;Sam Hawley;