Na Conferência Fullstack London 2019, Forbes Lindesay, o desenvolvedor de software da Threads Styling, compartilhou sua experiência na criação do Video Renderer, um editor de vídeo de alto desempenho criado para ser um aplicativo web mobile.
Para editar um vídeo dentro do navegador, usamos a API do Canvas. Embora o Canvas seja utilizado para editar imagens estáticas, é surpreendentemente simples renderizar quadros de vídeo e até mesmo vídeos inteiros dentro de uma tela.
A seguir um exemplo retirado do video + canvas = magic
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
A função aceita um elemento de vídeo HTML, um elemento Canvas e a largura/altura do quadro e usa o drawImage para copiar o quadro atual no vídeo no elemento Canvas. Usar um setTimeout com 20ms suaviza o vídeo de 50fps.
Depois de copiar a imagem para o Canvas, podemos ler e editar os quadros individualmente. Nesse ponto, podemos tratar cada quadro como uma imagem estática e aproveitar as bibliotecas de manipulação de fotos disponíveis no Github for Canvas.
O próximo recurso que desejamos adicionar ao nosso editor é a criação de camadas. Embora seja muito simples empilhar um vídeo em cima do outro, é bastante desafiador adicionar desenhos e gifs animados, pois geralmente incluem transparência, e isso não funciona muito bem.
A maneira mais simples de lidar com isso requer uma etapa extra no servidor. Depois que o usuário faz o upload da imagem, criamos uma cópia em preto e branco da imagem, em que o branco representa partes visíveis da imagem e o preto representa as áreas transparentes. Em seguida, usamos o 'guia' de transparência para determinar quais seções da imagem devem ser desenhadas e quais devem ser renderizadas no vídeo em segundo plano ao restante.
A criação da guia 'transparência' no servidor nos permite criar filtros gráficos usando o método Filter Complex da biblioteca FFmpeg.
Há uma limitação que precisa ser discutida antes que comecemos a editar um vídeo no navegador. Embora a edição de vídeo funcione muito bem, a compactação do documento, especialmente em telefones celulares, não é recomendada. Para suprir isso, replicamos a edição do vídeo no servidor e usamos o FFmpeg para gerar e compactar. Isso é feito enviando ao servidor o vídeo original, com um conjunto de instruções que reproduzem a edição feita pelo usuário.
Esta é uma solução temporária. No futuro, poderíamos usar o WebAssembly para compilar e executar o FFmpeg no navegador onde já existem experimentos no Github, mas não estão prontos para a produção.
Esses métodos foram usados para criar o editor Threads Styling mobile, disponível no Github sob a licença MIT.