O blog da AWS

Criando uma aplicação de vídeo sob demanda com o AWS Amplify Video

Bruno Almeida, Arquiteto de Soluções Especialista em Networking e Osmar Bento, Arquiteto de Soluções Especialista em Mídia e Entretenimento

 

Neste blog post, vamos explorar alguns recursos da AWS que você pode utilizar para criar uma aplicação de vídeo sob demanda de maneira simples, incluindo autenticação de usuários, criação de recursos para transcodificação com AWS Elemental MediaConvert e uma rede de distribuição de conteúdo (CDN) com Amazon CloudFront, que otimiza o desempenho da execução de vídeos, utilizando o AWS Amplify.

O AWS Amplify é um grupo de ferramentas e serviços que permite que desenvolvedores de front-end da web e de dispositivos móveis criem aplicações seguras e escaláveis, full-stack, com tecnologia desenvolvida pela AWS. Com o AWS Amplify, você pode configurar back-ends de aplicativos e conectá-los em minutos, implantar aplicativos da web estáticos com poucos cliques e gerenciar facilmente o conteúdo de aplicativos fora do console AWS.

Para criação dos recursos de streaming e transcodificação de vídeo, vamos utilizar o plugin open source AWS Amplify Video, que facilita a incorporação de streaming ao vivo e sob demanda em sua aplicação web e mobile.

 

Arquitetura da Solução

 

 

Passo a Passo da Implementação

Neste blog vamos implementar os recursos de autenticação e streaming de vídeo sob demanda, em uma aplicação existente em react. O AWS Amplify é compatível com diversos frameworks, tais como JavaScript, React, Angular, Vue, Next.js e plataformas móveis, incluindo Android, iOS, React Native, Ionic, Flutter.  Para mais detalhes consulte o guia de inicialização do AWS Amplify.

Adicionalmente, exemplos de aplicação com o AWS Amplify Video em react podem ser encontrados no repositório GitHub do UnicornFlix. Esse é um projeto que oferece um guia e aplicação como exemplo, para apoiar na criação de seu catálogo de vídeos sob demanda, utilizando o AWS Amplify Video.

1- Pre-requisitos para instalação do AWS Amplify

O AWS Amplify Command Line Interface (CLI) é um conjunto de ferramentas unificado para criação de serviços na nuvem AWS para seu aplicativo. Para essa instalação é preciso garantir os seguintes requisitos:

  • Ter o Node.js e o NPM instalados em seu computador. Caso não tenha, pode-se utilizar esses procedimentos: jsNPM.
  • Assegurar que a versão do Node.js é superior a 10.x e do NPM superior a 6.x. Para verificar, use os comandos node -ve npm -v no terminal ou console.

2- Instale o AWS Amplify CLI

Para instalação do AWS Amplify CLI use o comando:

npm install -g @aws-amplify/cli

3- Instale o AWS Amplify Video

Para instalação do plugin, para facilitar a criação de toda a infraestrutura para a aplicação de vídeo sob demanda, use o comando:

npm install amplify-category-video -g

4- Configure as credenciais AWS e inicie o projeto no AWS Amplify

Você pode configurar as credenciais de acesso com o seguinte comando:

amplify configure

amplify init

Este comando irá criar os recursos de acesso a CLI AWS e cria o projeto no AWS Amplify. Neste exemplo, vamos utilizar a criação do projeto para react. Para mais detalhes consulte a documentação do AWS Amplify para react.

Adicione a os elementos de UI para importação em sua aplicação.

npm install aws-amplify @aws-amplify/ui-react

5- Adicionando recursos de autenticação na sua aplicação

O Amplify CLI suporta a criação de diferentes métodos de autenticação e workflows de autorização. A forma mais simplificada  é utilizar a configuração padrão, que criará os recursos na nuvem AWS para controle de acesso à aplicação com sign-in, sign-up.

amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration 
? How do you want users to be able to sign in? Username 
? Do you want to configure advanced settings? No, I am done.

a- Importando o componente na sua aplicação react.

import { withAuthenticator } from '@aws-amplify/ui-react'

 b- Mude o bloco de export para incluir o  withAuthenticator

export default withAuthenticator(App)

c- Agora para criar os recursos remotos de autenticação, utilizamos o comando amplify push para publicar as configurações anteriores no Amazon Cognito.

amplify push

d- Após finalização dos passos anteriores, podemos iniciar seu aplicativo com o comando npm start. Na sequência, deve ser apresentada a página de autenticação, permitindo a criação de usuário.

 

 

Clicando em Create Account, você poderá registrar seu primeiro usuário e obter acesso ao aplicativo.

 

6- Utilizando o AWS Amplify Video para criar os recursos de streaming de vídeo sob demanda

Agora que o nosso aplicativo já possui autenticação e o projeto AWS Amplify está inicializado na AWS, podemos criar os recursos de transcoding e streaming de vídeo.

amplify add video
Na sequência, o CLI apoia com o processo de configuração, oferecendo questionamentos para a criação do recurso.
? Please select from one of the below mentioned services: Video-On-Demand
? Provide a friendly name for your resource to be used as a label for this category in the project: myvodapp

Em seguida, o CLI apresenta opções para selecionar um template para encoding da media, neste caso, vamos utilizar o default.
? Select a system-provided encoding template, specify an already-created
template name:  Default HLS Adaptive Bitrate

Agora neste passo, vamos selecionar se o ambiente será configurado como de produção ou testes. Quando selecionamos produção, o AWS Amplify CLI cria automaticamente a distribuição de CDN conectada ao recurso de armazenamento Amazon Simple Storage Service (Amazon S3). É possível ainda selecionar a opção de assinatura de URL, criando um token de autenticação para executar os vídeos privados.

? Is this a production enviroment? Yes

Em seguida, o CLI oferece a opção para criação de API’s para o gerenciamento do catálogo de vídeo sob demanda e podemos utilizar o AWS Amplify para fazer a implementação dos recursos remotos com o seguinte comando:

amplify push

A saída deste comando deve informar o nome dos buckets S3 de input e output recém criados. O bucket de input é utilizado para armazenar os vídeos de origem antes de serem transcodificados pelo AWS Elemental MediaConvert e o bucket de output armazenará os arquivos transcodificados prontos para serem executados pelo seu player na aplicação.

 

Abaixo um exemplo deste workflow:

Bucket de input:

 

 

Ao adicionarmos um novo arquivo de vídeo no bucket, isso ativará a execução da função lambda, responsável pela criação do JOB no AWS Elemental MediaConvert.

Para acompanhar o processamento e status do job, você pode acessar o AWS MediaConvert através do console da AWS, na opção Job.

 

 

 

Quando finalizado, o job deverá ter o status COMPLETE.

Os arquivos convertidos pelo AWS MediaConvert foram salvos em um bucket diferente do S3:

 

 

No arquivo convertido você encontrará a URL para o acesso público, em Object URL. Caso tenha selecionado a opção de produção, será necessário substituir o domínio S3 pelo domínio do Amazon CloudFront. Exemplo:

https://xyzwxk.cloudfront.net/HLS/vanlife/withad/sdr_uncage_vanlife_admarker_60sec.m3u8

O amplify video oferece também um player para testar os vídeos transcodificados:

Conclusão:

Nesse blog vimos como o AWS Amplify CLI e o plugin AWS Amplify Video podem ser utilizados para simplificar a criação de um aplicação para vídeo sob demanda, contando com recursos de API, autenticação de usuários e streaming de vídeo.

Para mais informações:

Blog em ingles para introduzindo o AWS Amplify Video On Demand

Blog de lançamento do AWS Amplify Video

Documentação do AWS Amplify Video

Documentação do AWS Amplify

Documentação do AWS Cognito

Documentação do AWS Elemental MediaConvert

Documentação do AWS Personalize

Documentação do AWS CloudFront

Documentação para realizar upload de objetos via API no Amazon S3

 

 

 


Sobre os autores:

Bruno Almeida é um Arquiteto de Soluções Especialista em Networking, ele ajuda os clientes da AWS a criar soluções de nuvem escaláveis, altamente disponíveis e bem projetadas com ótimos resultados.

 

 

 

 

Osmar Bento é um Arquiteto de Soluções especialista em Mídia e entretenimento. ele ajuda os clientes da AWS a construir soluções inovadoras usando a plataforma AWS.

 

 

 

 

Revisores

Fabio Leandro é um Arquiteto de Soluções especialista em Migrações, ele ajuda os clientes da AWS na obtenção de valor em suas jornadas de migração para a nuvem.

 

 

 

 

Thiago Paulino é um Arquiteto de Soluções da AWS, com mais de 15 anos de experiência e especialização em Big Data & Analytics. Atualmente seu foco está no suporte a clientes o segmento enterprise.