js-streaming-netflix-bandersnatch

Acesse https://bandersnatch.myreli.vercel.app/.

Implementação JavaScript de uma ferramenta de streaming baseada no filme interativo Black Mirror: Bandersnatch da Netflix:

• Streaming se adapta a diferentes velocidades de conexão
• Streaming interativo a partir de escolhas do usuário
• Download de vídeo em fragmentos (chunks)

Desenvolvimento

Se estiver o Docker na sua máquina, basta utilizar o container de desenvolvimento. Para isso, basta abrir o projeto no VSCode, instalar as extensões recomendadas e iniciar o projeto. (Recomendado)

Se não, é necessário configurar o ambiente.

Iniciar

# gerar os arquivos nas resoluções necessárias
sh script.sh

# iniciar os servidores de desenvolvimento
npm run dev

Acesse http://localhost:8080.

Configurar o ambiente

Se não for utilizar o container de desenvolvimento, é necessário fazer a configuração local de acordo com o seu sistema operacional:

Mac ou Linux

# instalar as dependencias de renderização de vídeo
apt-get install --no-install-recommends ffmpeg gpac

# instalar as dependencias
npm install

# gerar os arquivos nas resoluções necessárias
sh script.sh

Windows

O melhor é usar WSL, mas também é possível instalar de forma nativa:

# instalar as dependencias de renderização de vídeo
choco install ffmpeg gpac

# instalar as dependencias
npm install

# execute no git bash ou outro terminal com comandos unix
./script.sh

Deploy

Por padrão, o deploy é feito no Vercel, através dos comandos: npm run deploy para subir a aplicação e npm run deploy:assets para subir as mídias na CDN.

Ao executar pela primeira vez, será solicitado o login no vercel, então é necessário criar uma conta.

Páginas

Lista de Títulos

Vídeo

TODO

• Refatorar para tentar usar DASH

Créditos

• Esse projeto foi construído durante o evento Semana JS Expert com Erick Wendel
• Layout da lista foi baseada no codepen do Carlos Avila
• Layout do video foi baseado no codepen do Benjamin Pott