Construa sua própria plataforma de streaming de vídeo | É mais fácil do que você poderia pensar!
Neste vídeo, @CodeWithHarry nos ensina a criar um site de streaming de vídeo usando HTML, CSS e next.js. Ele também explica como usar o Linode Object Storage para armazenar vídeos e transmitir vídeos diretamente do Object Storage Bucket para o nosso navegador usando HTML, CSS e Javascript.
Capítulos:
0:00 O que faremos neste vídeo
0:30 Criar o projeto next.js
1:38 Adicionar CSS do Tailwind ao projeto next.js
5:08 Criar componente de barra de navegação
7:00 Use o chatGPT para codificar a barra de navegação
7:40 Construir a base da barra de navegação
10:00 Converter código do ChatGPT em código React
13:15 Remover o código do ChatGPT
13:36 Alterar o texto da barra de navegação
14:30 Criar watch.js
16:30 Criar módulo de upload de vídeo
20:00 Criar tag de upload de arquivo
22:30 Criar módulo de assistir vídeos
23:45 Criar Object Storage Bucket no Linode
25:00 Criar o React File Uploader
26:25 Criar API
28:15 Teste API
30:10 Instalar o Formidable e o S3-SDK
30:30 Compilar o upload.js
32:10 Desativar o bodyparser no next.js
32:50 Utilizar o Formidable para analisar formulários
36:20 Controle de qualidade do upload.js
39:20 Criar list.js
43:12 Conectar-se ao front-end
44:20 Preencher a página Watch com cartões de vídeo
49:10 Conectar a página de upload ao API
55:00 Corrigir o tamanho máximo do arquivo de upload
56:00 Exibir vídeos carregados na Watch Page
1:03:50 Criar player na página de exibição
1:10:50 Fazer upload e testar o player
1:14:40 Mudar o botão de download para um ícone
1:16:50 Conclusão
Novo na Linode? Comece aqui com um crédito de US$ 100!
Saiba mais sobre o streaming de vídeo na Linode.
Assista a outro tutorial de aplicativo de streaming de vídeo.
Inscreva-se para ser notificado sobre novos episódios assim que forem lançados.
#VideoStreaming #objectstorage #codewithharry
Produtos: Linode, Object Storage, streaming de vídeo; @CodeWithHarry
Você também pode gostar...
-
Maximize sua privacidade com o Searx | DIY Cloud
O Searx é um mecanismo de metasearch, agregando os resultados de outros mecanismos de busca e não armazenando informações sobre seus usuários. -
3 elementos-chave para sua estratégia de GitOps
Uma estratégia bem-sucedida de GitOps exige o gerenciamento de configuração declarativa, a otimização da implantação e a seleção das ferramentas certas. -
Construa um aplicativo que possa reconhecer seu rosto | Tech With Tim OpenCV Python App
@TechWithTim cobre como construir um programa de detecção e reconhecimento facial em Python usando um módulo conhecido como cv aberto e reconhecimento facial. -
Painel de Controle do Servidor Homer | Visualize seus contêineres e serviços de forma simples e fácil
Neste vídeo, vamos instalar o Homer em um servidor. O Homer é um simples painel de controle pessoal que você pode configurar para gerenciar facilmente seus serviços.