As plataformas de streaming sob demanda se tornaram comuns na casa contemporânea. Serviços poderosos como Netflix e Amazon Prime são apenas dois exemplos de plataformas de vídeo Over the Top (OTT) na indústria de tecnologia. Dado o rápido crescimento dos serviços de streaming, agora pode ser o momento certo para as empresas de mídia investirem na criação de seu próprio aplicativo da web de vídeo sob demanda.

Neste tutorial, damos uma olhada em como construir um aplicativo da web básico de vídeo sob demanda (VoD) usando Gatsby.js-uma estrutura construída sobre React-e Amazon Web Services (AWS). Em seguida, construiremos o back-end do aplicativo usando o AWS Amplify e testaremos o aplicativo enviando um vídeo de amostra por meio da interface da AWS e testando-o dentro do aplicativo.

Aqui está o que iremos cobrir:

• Compreendendo a AWS
• Usando AWS e Gatsby com GraphQL
• Primeiros passos com um aplicativo VOD
• Configurando um aplicativo Gatsby básico
• Crie o componente do player de vídeo
• Crie uma página para hospedar o jogador
• Crie uma lista comum de vídeos disponíveis
• Integração do AWS Amplify
• Instalando o plug-in VOD
• Configurando um recurso VOD
• Assistindo as coisas em ação
• Conectando o back-end e o front-end
• Conclusão

Compreendendo a AWS

Para construir nosso projeto de vídeo sob demanda, usaremos AWS e React como nossa pilha.

Amazon Web Services (AWS) é um conjunto de serviços baseados em nuvem oferecidos pela Amazon, que podem ser utilizados para construir aplicativos baseados em nuvem. Eles são super simples de configurar, têm documentação incrível (tanto do criador quanto da comunidade) e têm preços razoáveis ​​também. Para iniciantes, você recebe $ 100 de uso gratuito todos os anos, o que é mais do que suficiente para pessoas que estão apenas começando a aprender como funciona. A AWS oferece uma vasta variedade de serviços e tem uma predefinição para quase todos os casos de uso possíveis com um aplicativo da web genérico.

Neste tutorial, vamos usar o microsserviço Amplify da AWS , que inclui suporte para muitos outros microsserviços internamente como o S3, MediaConvert e Cognito. O Amplify oferece uma interface rápida para ajudá-lo a começar a usar aplicativos móveis e da web rapidamente.

Usando AWS e Gatsby com GraphQL

Embora a AWS seja o cérebro do nosso projeto, ainda precisamos de uma maneira de nos comunicar com o usuário. É aqui que entra o front-end. E, embora haja uma convenção normal para usar a renderização do lado do servidor para lidar com esses casos de uso, os aplicativos baseados em servidor geralmente sofrem um impacto no desempenho, bem como nos recursos off-line. Para dar conta disso, usaremos Gatsby e GraphQL com AWS.

Gatsby é uma estrutura de pré-renderização construída sobre React. Gatsby permite pré-renderizar seu código React e tira a carga de seus usuários clientes para renderizar seu aplicativo no dispositivo. O plugin offline em Gatsby também converte seu aplicativo em um PWA completo com apenas uma linha adicionada em o arquivo de configuração.

Importante para o nosso projeto, Gatsby também tem um suporte incrível para GraphQL, uma linguagem de código aberto usada para consulta e manipulação de dados. GraphQL é uma ótima alternativa para a estrutura REST convencional e permite um ótimo nível de customização sobre como os dados são transmitidos pela web. Gatsby usa GraphQL em seu nível de dados para aumentar o desempenho .

Agora que temos um conhecimento básico de nossa pilha de tecnologia, vamos começar com o tutorial.

Primeiros passos com um aplicativo VoD

A configuração do back-end da AWS requer um cliente disponível para teste; para nosso exemplo, usaremos Gatsby.

Configurando um projeto Gatsby básico

Os pré-requisitos para configurar um projeto Gatsby são simples: você precisa da última versão do nodejs instalada no seu sistema, junto com uma instalação global do gatsby-cli.

Siga estas etapas rápidas para configurar o ambiente:

• Instale nodejs de seu site. As instruções específicas dependem do seu sistema operacional.
• Assim que o nó estiver instalado, instale o cliente git em sua máquina. As instruções específicas, mais uma vez, dependerão do seu sistema operacional.
• Instale o gatsby CLI globalmente:

 npm install-g gatsby-cli 

• Verifique a instalação:

 gatsby--help 

Depois de fazer essas coisas, você pode prosseguir para a criação de um novo projeto para trabalhar. Embora haja um grande número de iniciadores disponíveis no Gatsby , para nossos propósitos, será mais fácil usar uma instalação nova. Execute o seguinte comando para inicializar um novo projeto em Gatsby:

 gatsby novo vod-app 

Neste ponto, teremos um aplicativo barebones Gatsby que está pronto para ser personalizado para incluir recursos de vídeo sob demanda. Para permitir que os usuários possam transmitir conteúdo de vídeo usando o aplicativo, vamos adicionar uma página no aplicativo que pode transmitir um vídeo usando o identificador fornecido no URL.

Criação do componente reprodutor de vídeo

Primeiro, crie um novo arquivo na pasta de suas páginas no local src/components/player.js . Este arquivo abrigará um player criado com base em Video.js , uma biblioteca que oferece suporte a streaming e reprodução de vídeo em ambientes JavaScript.

O streaming usando o suporte VoD da AWS é facilitado usando arquivos m3u8. Esses arquivos ajudam a dividir seu vídeo em pedaços menores e podem ser reproduzidos sequencialmente usando qualquer player de vídeo habilitado para HLS (HTTP live streaming). Todos os players construídos com video-js são compatíveis com HLS, por isso escolhemos esta biblioteca para nosso aplicativo de streaming de vídeo.

Certifique-se de instalar o pacote video-js executando:

 npm install video.js 

Aqui está o código para um exemplo de componente de player de vídeo baseado na biblioteca video-js.

Para estilizar o vídeo adequadamente, você precisará de uma folha de estilo CSS padrão. Coloque o código encontrado aqui em src/components/videojs.css .

Você pode procurar outras folhas de estilo em Video.js se estiver procurando por um tema diferente para o seu player de vídeo. Para iniciantes, no entanto, a planilha acima é testada e aprovada.

Criação de uma página para hospedar o jogador

Com o componente reprodutor de vídeo pronto para uso, agora podemos criar uma página para usá-lo para transmitir vídeos dinamicamente. Vamos começar com um componente Barebones React em src/pages/video.js .

 import React from"react" const VideoPage=({videoId})=> { return 
 
} exportar VideoPage padrão 

Observe o argumento videoId que é esperado dentro dos adereços passados ​​para o componente. Ele conterá o identificador do vídeo que deve ser reproduzido. Você precisa modificar seu arquivo gatsby-node para instruí-lo a passar o valor de videoId sempre que uma solicitação relevante for feita.

Veja como configurar isso em seu arquivo gatsby-node.js :

 exports.onCreatePage=async ({page, actions})=> { const {createPage}=ações page.matchPath=page.path if (page.path.match (/^/video//)) { aguarde o createPage ({ caminho:'/video', matchPath:'/video/: videoId', componente: page.component, }) } } 

Depois de fazer isso, atualize seu arquivo video.js com o seguinte código:

 import React from"react"
importe VideoPlayerJS de'./../components/player'; const VideoPage=({videoId})=> { return 
 
  
 
} exportar VideoPage padrão 

Isso passa o ID do vídeo proveniente do URL da página para o componente do reprodutor de vídeo, que então buscará o vídeo do AWS CDN e o transmitirá para visualização.

Criação de uma lista comum de vídeos disponíveis

Um recurso adicional que você pode adicionar ao seu projeto é poder visualizar os vídeos que são enviados para o seu intervalo (como na página inicial do YouTube ou Netflix).

Para configurar esta lista, adicione o seguinte código em seu arquivo src/pages/index.js :

 import React, {useState, useEffect} de"react" const Home=()=> { const [videos, setVideos]=useState ([]) useEffect (()=> { //Deixe em branco por enquanto. Buscaremos a lista de vídeos aqui após configurar o back-end. }) Retorna ( 
 
 Conteúdo disponível: 
 
 {videos.map (video=> ( 
  {video.id}  
 ))} 
 
 )
} exportar Página inicial padrão 

Isso prepara nossa página de índice, que completaremos com uma chamada de API dentro do gancho useEffect assim que configurarmos nosso back-end AWS.

Agora que configuramos nosso front-end, é hora de dar uma olhada em como construir o back-end para nosso aplicativo usando o AWS Amplify. Também continuaremos testando o aplicativo, enviando um vídeo de amostra por meio da interface da AWS e testando-o dentro de nosso aplicativo.

Integração do AWS Amplify

Se você não tiver o AWS Amplify CLI instalado globalmente em seu sistema, execute o seguinte comando para instalá-lo:

 npm install-g @ aws-amplify/cli 

Isso requer que o NodeJS e o npm estejam instalados em seu sistema previamente, o que já deve ter sido feito quando você configurou o frontend.

Em seguida, faça logon no site da AWS e crie uma conta para você. Todas as contas da AWS vêm com um nível gratuito que é suficiente para ajudá-lo a configurar um projeto completamente. Quando você estiver satisfeito com sua configuração e quiser expandir, a AWS oferece preços acessíveis para expansão.

Depois de configurar sua conta AWS, você precisará inicializar um projeto Amplify dentro de seu projeto Gatsby. Para fazer isso, execute o seguinte comando no diretório raiz do seu projeto:

 amplificar init 

Isso irá disparar uma série de prompts de linha de comando que irão guiá-lo através do processo de configuração de seu novo projeto Amplify. Um conjunto típico de valores padrão ficaria assim:

 $ amplificar init Nota: Recomenda-se executar este comando a partir da raiz do diretório do seu aplicativo
? Digite um nome para o vodapp do projeto
? Insira um nome para o ambiente dev
? Escolha seu editor padrão: Nenhum
? Escolha o tipo de aplicativo que você está construindo javascript
Por favor, conte-nos sobre seu projeto
? Qual framework de javascript você está usando, reaja
? Caminho do diretório de origem: src
? Caminho do diretório de distribuição: público
? Comando de compilação: npm.cmd run-script build
? Comando de inicialização: npm.cmd run-script start
Usando o provedor padrão awscloudformation Para obter mais informações sobre perfis AWS, consulte:
 
  Perfis nomeados  
 
 Um perfil nomeado é uma coleção de configurações e credenciais às quais você pode aplicar um comando AWS CLI. Quando você especifica um perfil para executar um comando, as configurações e credenciais são usadas para executar esse comando. Você pode especificar um perfil que é o"padrão"e é usado quando nenhum perfil é explicitamente referenciado. 
 
  ? Você deseja usar um perfil AWS? sim
? Escolha o perfil que deseja usar como padrão 

Observe que pode ser necessário configurar um perfil AWS se estiver usando a CLI pela primeira vez. Você pode encontrar informações detalhadas sobre como configurar perfis no blog oficial da AWS aqui .

Instalando o plug-in VOD

Assim que seu novo projeto do Amplify estiver pronto, você precisa instalar o plugin VOD para o Amplify para poder adicioná-lo ao seu projeto. O plug-in VOD é um pacote npm de código aberto que permite que você crie uma configuração de vídeo sob demanda no AWS rapidamente. Veja como você pode instalá-lo:

 npm i amplify-category-video-g 

Isso adiciona uma categoria às opções disponíveis de recursos que podem ser provisionados por meio da CLI do Amplify. Sem isso, você teria que provisionar vários recursos na plataforma AWS manualmente.

Configurar um recurso VOD

Depois de ter o plug-in da categoria de vídeo disponível em seu sistema, a próxima etapa seria adicionar uma instância da categoria vod em seu projeto, para provisionar os recursos necessários na nuvem. Para fazer isso, execute o seguinte comando:

 amplificar adicionar vídeo 

Isso acionará outra série de prompts de linha de comando para ajudá-lo a configurar um recurso de vídeo em seu projeto. Um fluxo típico seria assim:

 $ amplify adicionar vídeo
? Selecione um dos serviços abaixo mencionados: Video-On-Demand
? Forneça um nome amigável para seu recurso a ser usado como um rótulo para esta categoria no projeto: vodapp
? Selecione um modelo de codificação fornecido pelo sistema e especifique um nome de modelo já criado: Taxa de bits adaptável HLS padrão
? Este é um ambiente de produção? Não
? Você quer que o Amplify crie uma nova API GraphQL para gerenciar seus vídeos? (Beta) Sim
Video On Demand suporta apenas GraphQL no momento.
Se você deseja usar apenas a API para CMS, escolha o ToDo padrão e não edite até mais tarde. 

Funcionalidades adicionais da AWS

As duas últimas perguntas são importantes e envolvem a configuração de recursos adicionais em seu projeto AWS, o que significa diretamente gastar mais dinheiro. No entanto, eles trazem algumas funcionalidades muito importantes.

Se você escolher “Sim” para a questão do ambiente de produção, será levado a outra série de prompts para ajudá-lo a configurar um Cloudfront recurso. Cloudfront é um serviço CDN oferecido pela AWS e pode ajudá-lo a fornecer seus vídeos a um público global com mais rapidez. O processo é simples e a depuração eficiente, se necessária, pode ser feita por meio do portal AWS.

A última pergunta pergunta se você deseja configurar uma API GraphQL para gerenciar seus vídeos. Embora possa parecer um pouco estranho, a API está conectada a um recurso do DynamoDB e equivale a um monte de tabelas que você pode usar no banco de dados do DynamoDB para ajudar a armazenar os dados relacionados aos vídeos. Como você está tentando construir uma página inicial que exiba todos os vídeos juntos em um só lugar, precisará de uma tabela comum para buscar esses dados. Escolher sim para essa pergunta o ajudará a configurar esse recurso facilmente.

Esta é a aparência do processo a partir deste ponto:

? Selecione um dos serviços abaixo mencionados: GraphQL
? Forneça o nome da API: vodapp
? Escolha o tipo de autorização padrão para a chave API API
? Insira uma descrição para a chave API: mykey
? Depois de quantos dias a partir de agora a chave API deve expirar (1-365): 7
? Deseja definir as configurações avançadas para a API GraphQL Não, terminei.
? Você tem um esquema GraphQL anotado? Não
? Escolha um modelo de esquema: objeto único com campos (por exemplo,"Todo"com ID, nome, descrição)
? Você deseja editar o esquema agora? Não
? Defina seu esquema de permissão (pressione * espaço * para selecionar, * a * para alternar tudo, * i * para inverter a seleção) Os administradores só podem enviar vídeos
? Você quer editar seu modelo recém-criado? Não
Esquema GraphQL compilado com sucesso. 

Edite seu esquema em vod-app/amplify/backend/api/vod-app/schema.graphql ou coloque os arquivos .graphql em um diretório em vod-app/amplify/backend/api/vod-app/schema

Se você enfrentar qualquer problema com a compilação GraphQL neste ponto, provavelmente é porque você não tem um recurso Cognito em seu projeto. Você pode corrigir isso editando seu esquema GraphQL para corresponder exatamente ao próximo trecho de código fornecido abaixo:

 tipo vodAsset @model (assinaturas: {nível: público})
{ eu fiz! título: String! descrição: String! #NÃO EDITE video: videoObject @connection
} #NÃO EDITE
digite videoObject @model
{ eu fiz!
} 

Isso conclui a configuração local do seu projeto Amplify. Para verificar se tudo está correto, tente executar o seguinte comando:

 amplificar status 

Executá-lo deve apresentar uma lista de recursos disponíveis em seu projeto. Se os itens mostrados abaixo não estiverem presentes na lista do seu projeto, pode ser necessário verificar novamente se você seguiu todas as etapas mencionadas acima:

 Ambiente atual: dev | Categoria | Nome do recurso | Operação | Plug-in do provedor |
|--------|-------------|---------|-----------------|
| Api | vodapp | Criar | awscloudformation |
| Vídeo | vodapp | Criar | awscloudformation | 

Se tudo estiver certo, você pode começar a provisionar os recursos na nuvem executando o seguinte comando:

 amplifique o impulso 

Você pode precisar responder a algumas perguntas sobre a configuração do GraphQL, que incluem principalmente se você deseja gerar suas consultas/mutações mais uma vez ou não, quão profundo é o aninhamento necessário dentro de seus recursos, etc.

Depois de responder a essas perguntas, o processo de upload começará e levará alguns minutos para configurar completamente a infraestrutura na nuvem. Depois de fazer isso, você pode começar a testar seu back-end com uploads de vídeos de amostra.

Assistindo as coisas em ação

Você pode experimentar a conversão de mídia enviando um arquivo para o intervalo de entrada do seu projeto. Para fazer isso, siga as etapas abaixo:

• Vá para https://s3.console.aws.amazon.com/s3/home
• Procure um intervalo que tenha as palavras dev-input no nome

  

• Faça upload de um arquivo de vídeo para o intervalo

Isso deve ser o suficiente para acionar um trabalho MediaConvert.

Para descobrir, você pode visite o portal de serviço do Media Convert e procure seu trabalho em execução

O trabalho levará algum tempo para ser concluído. Assim que estiver feito, você poderá encontrar o vídeo processado, pronto para streaming em seu intervalo dev-output S3. Abra-o para ver o resultado:

O vídeo processado tem um pasta para si. Se você abri-lo, verá que ele foi dividido em vários pequenos pedaços de arquivos m3u8 e ts. Esses arquivos ajudam a transmitir o vídeo para o player em pequenas partes e se adaptam aos requisitos de qualidade e tamanho do cliente.

Se você procurar o nome do arquivo test-video.m3u8, encontrará um URL associado a ele para acesso público:

Você pode tentar colar esse URL em um player de vídeo habilitado para HLS como o VLC ou o Amplify Video Player online para experimentar o streaming experiência. Isso conclui nossa configuração de back-end.

Conectando o back-end e o front-end

Agora você precisa conectar a página de vídeo front-end que foi criada com um player para poder transmitir este vídeo. Para fazer isso, você precisa fazer uma pequena alteração em seu arquivo src/components/player.js .

Lembra da função generateVideoLink que estava na parte superior do arquivo? Ele foi usado para construir o URL completo do vídeo usando o id passado para o URL da página. Veja como está agora:

 const generateVideoLink=id=> `https://unicornflix-dev-ow6z2qfpy.s3.amazonaws.com/output/$ {id}.m3u8` 

Você precisa atualizar isso para apontar para o seu balde S3 de saída. Veja como deve ficar depois de fazer a mudança:

 import awsvideoconfig de"../aws-video-exports" const generateVideoLink=id=> `https://$ {awsvideoconfig.awsOutputVideo}/$ {id}/$ {id}.m3u8` 

Com essa pequena mudança em vigor, seu aplicativo agora pode transmitir o vídeo que você acabou de processar em seu intervalo de saída.

Tente acessar o URL e verifique se o seu navegador pode transmitir o vídeo ou não. Caso contrário, provavelmente você perdeu algumas etapas e precisa verificá-las novamente.

Preparando a página inicial para buscar a lista de vídeos disponíveis

Agora, a última etapa que falta para você chamar seu projeto de cliente completo de vídeo on demand para consumo de conteúdo é poder visualizar a lista de vídeos disponíveis no aplicativo. Para fazer isso, você pode usar a API GraphQL que foi criada anteriormente com o recurso VoD.

Siga as etapas abaixo para adicionar a funcionalidade da lista de vídeos ao seu aplicativo:

Primeiro de tudo, preencha o banco de dados com alguns dados fictícios, para que você possa visualizá-los durante o teste. Para fazer isso, acesse este link e procure a tabela vodAssets na lista.

Abra a tabela e clique na guia de itens. Em seguida, clique em Criar item e use o seguinte despejo JSON para criar dois objetos rapidamente:

 { "createdAt":"2020-01-30T11: 45: 28.028Z", "descrição":"Algumas descrições para o vídeo aqui", "id":"test-video", "title":"O primeiro vídeo de teste", "updatedAt":"2020-01-30T11: 45: 28.028Z"
} 

Observe que todos os campos são obrigatórios e a API pode lançar erros se algum deles não estiver presente. É assim que a tabela ficará depois de adicionar duas entradas:

Now that you have some dummy data to display, install the aws-amplify dependency in your gatsby project by running the following line:

npm install aws-amplify

Once installed, look for a graphql folder inside your src folder. This is where Amplify stores all generated queries, mutations, and subscriptions. If it is not present in your project, run the following command, and choose all default options to generate the folder with the relevant queries:

amplify codegen

Now, create a file at src/components/fetchVideos.js and paste the following piece of code in it:

//import the libraries
import { API, graphqlOperation } from"aws-amplify"
import awsExports from"../aws-exports"
import * as queries from"../graphql/queries" //initialise the API client
API.configure(awsExports) //define a function that allows you to fetch for all vodAssets in your database
const fetchVideos=async ()=> API.graphql(graphqlOperation(queries.listVodAssets)) export default fetchVideos

Once this is done, update your src/pages/index.js with the following code in the useEffect call:

useEffect(()=> { //fetch the videos and set them to the state object fetchVideos().then(r=> { const data=r?.data?.listVodAssets?.items setVideos(data) }) }, [])

That’s it! Now if you try to hit http://localhost:8000, you will receive a similar list:

When you click on a link that has a video uploaded for the given id, you will be redirected to the video player:

To allow users to upload videos, you may want to build a simple application that uses the S3 API to facilitate upload and create a database entry for new videos. You can further explore styling the app according to your requirements, and even add additional features like reactions, live viewer count, commenting, and the like.

Wrapping up

As multiple AWS services like MediaConvert, S3, and incognito have been mentioned throughout the tutorial, it is important to understand their fundamental roles in the process. The official blog from AWS explains the services involved in the video plugin at length and can be a great asset when you are trying to understand what goes behind the scenes when you run a command as simple as adding a video resource.

Looking back at the tutorial, we covered a great amount of technical content to help set up our video-on-demand application. We started with a simple frontend client, and further added the AWS and Amplify integrations to help communicate with the backend services in no time. This serves as a great example of how simple modern cloud services have become, and how you can quickly scaffold out any business idea that you have in mind with minimal costs and efforts.

The post Building a video on demand application using Gatsby and AWS appeared first on LogRocket Blog.

Source link