Skip to content

Reproduzindo as tecnologias utilizada pela Netflix em Black Mirror: Bandersnatch.

Notifications You must be signed in to change notification settings

lucasbecker/bandersnatch

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BANDERSNATCH

Neste projeto foi reproduzida as tecnologias utilizadas pela Netflix no filme interativo Black Mirror: Bandersnatch, do desenvolvimento de um player de vídeo moderno e customizado usando video.js com base no layout da Netflix até como ler pedaços de vídeo sob demanda de acordo com a escolha do usuário, desenvolvendo assim a lógica para criar uma experiência de vídeo interativo similar ao da Netflix.

Overview

Para realizar o pré-processamento dos arquivos de vídeo utilizados foi desenvolvido um script para automatizar o processo de renderização de vídeos em múltiplas resoluções, analisar os metadados e codecs utilizando FFmpeg e FFprobe. Após os arquivos serem pré-processados, foi trabalhado no player de vídeo para reproduzir os vídeo, concatenando buffers com a API do browser para manipulação de vídeo Media Source, além de toda a lógica por trás do download dos arquivos sob demanda. E por último, foi desenvolvida a lógica para criar uma experiência de vídeo interativo similar ao da Netflix.

preview

Basic Control Loop

  1. Download dos arquivos do servidor
  2. Fornecer os arquivos ao navegador
  3. Calcular throughput/duração dos arquivos
  4. Entregar as informações sobre demanda conforme escolhas do usuário

Setup

Primeiramente faça o download ou clonagem deste repositório e com o NodeJS instalado execute o comando npm install no diretório. Após isto, realize o download dos binários de FFmpeg e FFprobe e os coloque no diretório bin para então executar o script.sh. Por fim, após o script ser executado em sua totalidade, basta utilizar os comando npm run dev e npm run assets para executar a aplicação.

Créditos

About

Reproduzindo as tecnologias utilizada pela Netflix em Black Mirror: Bandersnatch.

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 93.6%
  • CSS 5.8%
  • Other 0.6%