Crie seu próprio site de streaming de vídeo criando um aplicativo personalizado de Reação.js
A construção de uma aplicação de streaming de vídeo pode parecer assustadora no início, mas este vídeo vai quebrar como isto pode ser conseguido. Especificamente, vamos demonstrar como implementar um serviço de streaming com os seguintes componentes:
- Um aplicativo do lado do servidor Node.js que tratará de buscar e transmitir vídeos, gerando miniaturas para seus vídeos, e servindo legendas e legendas para vídeos.
- Uma aplicação do cliente em Reagir que consumirá os vídeos em nosso servidor. Esta aplicação terá duas visualizações: uma lista de vídeos que estão disponíveis e uma visualização de player para cada vídeo.
Capítulos:
0:00 Introdução
0:50 Pré-requisitos
1:19 Criar Diretórios de Aplicações
1:48 Correr npm init
2:04 Instalar Dependências
2:15 Criar o Diretório de Ativos
2:34 Baixar os Ativos de Github
2:44 Adicionar o primeiro vídeo ao patrimônio
2:58 Criar app.js
5:48 Testar o aplicativo no Dev
6:17 Começar os trabalhos na Frente
8:27 Iniciar a aplicação da reação
8:55 Qual é o próximo passo?
9:13 Implementar o Bootstrap
9:30 Instalar o reator-router-dom
9:56 Criar a vista de casa
14:18 Passando por casa.js
15:28 Criar a Vista do Jogador
18:21 Running Through player.js
19:00 Fazer Ajustes no app.js
20:36 Solicitações de Frente de Empate para o Servidor
22:21 Vídeos de Gravata para a Frente
23:26 Criar miniaturas de vídeo
25:11 Servir dinamicamente vídeos em pedaços
30:07 Recapitulação rápida
31:49 Instalar FFMPEG
33:47 Adição de legendas
35:56 Criar um ponto final em forma de legenda
36:58 Estilo Nosso aplicativo
40:25 Criar Cabeçalho e Componentes de Rodapé
43:03 Conclusão
Novo na Linode? Comece aqui com um crédito de US$ 100!
Leia o documento para obter mais informações sobre a implantação de um aplicativo de streaming de vídeo React.
Saiba mais sobre o React.
Faça o download do FFMPEG aqui.
Inscreva-se para ser notificado sobre novos episódios assim que forem lançados.
#Linode #Reagir #Video #Fluxo
Produto: Linode, Open Source, React; Sam Hawley;