Ferramentas VidGrid-HTML - Grades de miniaturas de vídeo personalizáveis no navegador

N

NessaCRT4

Lurker
Entrou
13 Ago 2023
Postagens
471
Pontuação de reações
0
Olá!
Estou de saco cheio de ver tanto post só com link de vídeo, sem preview, sem título... então decidi me esforçar um pouco (e gastar uns tokens de LLM) pra criar uma ferramenta nova que facilite pra todo mundo fazer previews de imagem bonitas.
Essa ferramenta é 100% no navegador; você não precisa baixar nem instalar nenhum software/app. Dá pra usar no celular (Android/iOS) também, graças ao design responsivo.


VidGrid-HTML
Grades de miniaturas de vídeo personalizáveis no navegador
Teste aqui: https://vidgrid-html-87fe95.gitlab.io/
Principais recursos
  • Gera contact sheets em JPG ou WebP animado dos vídeos direto no navegador
  • Funciona localmente, sem precisar fazer upload
  • Pega frames em intervalos de tempo uniformes ao longo do vídeo ou com base em timestamps personalizados que você mesmo define!
  • Grade configurável (colunas/linhas), espaçamento, largura de saída, timecode sobreposto, cores, cabeçalho de metadados opcional
  • Crie seus próprios presets com as opções que você prefere (salvos localmente no seu navegador)
  • Processamento em lote, downloads em ZIP e suporte a upload/cópia de link (limitado a galerias Chevereto com upload via API ativado; infelizmente ainda não funciona com JPGFish/JPG6)
  • Suporte básico a corte de vídeos VR (SBS e TB)
  • Privacidade em primeiro lugar: todo o processamento acontece no seu dispositivo.
Exemplos de saída estática/congelada com várias opções:




Exemplos de saída animada com várias opções:



Limitações conhecidas
Essa ferramenta usa a extração de frames nativa do navegador, então, como regra geral, se o vídeo toca no seu navegador, ele deve ser compatível (dica: alguns navegadores como o Chrome suportam mais codecs de vídeo e, portanto, mais arquivos). Implementei um plano B com FFmpeg WASM, mas é bem mais lento e tem limite de memória. No pior caso, vai gerar frames em branco/falhos ou pular o arquivo se ele realmente não der pra usar. Não estranhem se formatos antigos e codecs de vídeo/áudio velhos não forem processados direito... os navegadores fazem muito mais coisa hoje em dia, mas não tudo!
Valeu por conferir!
E valeu a Utopic por me dar um motivo pra voltar nesse projeto que eu tinha abandonado e por testar primeiro.
Ah, e deixei o VidGrid-HTML open-source (licença MIT), caso alguém tenha interesse no código-fonte: https://gitlab.com/aknott001/vidgrid-html
Qualquer relato de bug, sugestão ou feedback é bem-vindo neste tópico.
 
Ferramenta fantástica, que bom que estão desenvolvendo. Espero que o pessoal ache útil.
 
Finalmente, faz dias que eu procuro e só aparece vídeo velho do YouTube e explicação confusa sobre "Contact sheets"
valeu pela ajuda!
 
Atualização grande, a v.2.0.0 saiu e já está no ar na mesma URL de cima.
As miniaturas animadas chegaram! e algumas correções.
Novas opções de "Saída animada (WebP)" (também dá pra salvar como presets):

Exemplo de saída:


 
Você é um monstro de verdade, que merda que você lançou isso justo quando eu fiz um post :KEKWlaugh:
 
Valeu, sempre tem um próximo post... espero :KEKW:
Uma dica que esqueci sobre o tamanho do arquivo das miniaturas animadas: dependendo da largura, FPS, qualidade e compressão WebP, dá pra chegar rápido no limite de 15MB do JPG6. As opções padrão são bem generosas em qualidade; dá pra baixar pra qualidade 75-80 e talvez uma largura menor pra ficar quase sempre abaixo do limite.
 
Trabalho foda! Sei que você começou só pra fazer algo básico, mas virou um projetão que vale a pena usar. Mandou bem!
Tem alguma funcionalidade futura planejada?
Recomendo adicionar também um botão de VR, se for possível!
 
O que isso envolveria? Eu não mexo muito com formato VR, se você tiver vídeos de exemplo e o que esperaria que isso fizesse, talvez eu dê uma olhada.
 
Os vídeos VR hoje em dia são quase todos Side by Side, ou seja, duas imagens divididas na tela, uma pra cada olho.
Usar um gerador de miniaturas (no caso o seu) captura um frame (side by side) do jeito que está, porque ele sabe que é um vídeo. Mas isso bagunça o conteúdo se você quiser mostrar screencaps completos.
Usando o SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
Ele tem um botão de VR, então descarta um dos olhos e fica com o outro, o resultado é mais grids de conteúdo na tela e um arquivo com resolução menor
Assim você também pode acabar com uma belezinha como essa pra usar de preview pequeno em torrents/bbs etc.
 
nattieivanova
Entendi, valeu pelas explicações, acho que consigo fazer alguma coisa pros formatos SBS, mas sem correção de fisheye... deve funcionar até pra grids animados.
Acabei de mexer um pouco com os filtros do FFMPEG WASM pra corrigir o efeito fisheye e outros formatos, tem opção pra caramba: https://ffmpeg.org/ffmpeg-filters.html#v360
Mas a triste realidade do processamento no navegador é que a gente é limitado tanto em memória quanto em threads de CPU. Sem entrar muito em detalhes, internamente ele precisa carregar o arquivo na memória do navegador primeiro, e qualquer coisa acima de algumas centenas de MB ele sofre (nem quero pensar em fazer isso no celular)... e arquivos VR geralmente têm no mínimo alguns GB... mas acho que um "modo VR" simples com opção de escolher o olho esquerdo/direito já seria uma boa adição, então vou trabalhar nisso logo. Valeu pela sugestão!
 
Que ferramenta, super prática e dá pra usar no Android! Valeu aknott! Simplesmente incrível e impressionante. O SimpCity tem limite de tamanho pra webp? Tipo os gifs, talvez? Acho que só dá pra postar como visualização direta, ou bbcode full, linkado, o webp? Eu tento manter meus gifs abaixo de 3MB.
 
Você tem que subir o arquivo .jpg / .gif / .webp que a ferramenta gerar no jpg6 e depois importar no seu post como uma imagem normal.
Melhor não fazer gifs pesados pra ajudar na performance do fórum. Além disso, o jpg6 tem limite de tamanho de arquivo de qualquer jeito, então se o gif for pesado demais ele não deixa subir.
 
De nada, que bom que está sendo útil! :pepoLove:
Espero que um dia ele possa ser mais integrado ao fórum, perguntei pra equipe do JPGFish se eles poderiam liberar uploads por API pra isso, aí os usuários poderiam hospedar as miniaturas fácil e só copiar os códigos na mensagem... poderia até ser um botão/popup como o "Upload images", mas por enquanto não tive resposta (imagino que seja difícil, um monte de bot ia querer abusar dos uploads por API):
O limite de tamanho do JPGFish é 15MB, eu uso "BBCode Medium" mesmo que a miniatura não seja animada no SimpCity... imagino que quem quer ver um preview vai topar um clique e levar a surpresa de que ela é animada :KEKW:
A miniatura animada pequena (se você usar "BBCode Full") não é grande o bastante pra ver muita coisa mesmo... então, além de ser mais clickbait, acho que não compensa a desvantagem de carregar até 15MB por miniatura pra cada usuário que abre o tópico (10 dessas e você fez o povo baixar 150MB 😓).
Por fim, acho que a staff/moderadores preferem "BBCode Medium" porque traz usuários pro JPGFish e permite exibir anúncios, o que ajuda a bancar os servidores.
 
nattieivanova
Adicionei o dropdown "VR Video" com opções pra cortar os formatos mais comuns. Como esperado, o processamento com FFMPEG WASM não rola, os recursos do navegador são limitados demais.

Também reorganizei/redesenhei um pouco os campos de entrada e adicionei fieldsets recolhíveis, o que deve ajudar um pouco com a rolagem no celular. E acho que melhorei um pouco a performance, eu tinha um redesenho inútil do header que não causava nenhum problema visível, então passou batido.
Enfim, aqui está a v.2.1.0, mesma URL.
 
Já aconteceu de você gerar thumbnails e os timestamps automáticos escolhidos pela ferramenta errarem totalmente as partes boas que você queria mostrar?
Pois acabou! O VidGrid-HTML v.2.2.0 traz um jeito de sobrescrever os timestamps "auto" de cada item de saída, com um "Editor de timestamps" que deixa você definir cada célula da sua thumbnail como quiser. Ele mescla automaticamente com os timestamps automáticos se você não especificar marcadores suficientes, e ignora os últimos se você definir demais.

A prévia do vídeo no editor é limitada aos vídeos que você consegue abrir e assistir no navegador; para vídeos não suportados o editor continua funcionando, só que sem prévia.
Caso de uso maneiro: se você faz uma thumbnail de 1x1 célula, antes desse recurso o timestamp ficava automaticamente no meio do vídeo, agora você pode escolher exatamente onde quer... tanto para thumbnails animadas quanto estáticas!
 
Acabei de lançar uma nova versão:
VidGird-HTML v.2.3.0
  • Gerenciamento de tarefas em vez de lotes de arquivos: adicionar arquivos, remover, reenfileirar, reenfileirar tudo.
  • Editor de timestamps melhorado para celular e atalhos.
  • Resolução de timestamps melhorada quando não há marcadores personalizados suficientes; agora dá pra mudar o tamanho da grade sem resetar os timestamps personalizados.
  • O estado recolhido/expandido das seções de opções é salvo por preset.
 
Grande atualização de versão, mesma URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NOVO - Editor de templates de grade: agora você pode criar templates personalizados de grades irregulares, além de colunas*linhas.
    • Funciona com grades estáticas e animadas e também junto com o Editor de timestamps, escolha a imagem perfeita para suas células em tamanho cheio!




    • Aqui vão alguns exemplos:




  • NOVO - Configurações: 4 temas para mudar a aparência do app. "Mostrar prévias" virou um parâmetro global. "Destinos de upload" foi movido para este modal.








  • NOVO- Barra compacta, no celular e no desktop: quando você adiciona muitos arquivos, pode ser chato rolar a página para iniciar/ver o progresso do processamento. Para ajudar, uma nova barra aparece automaticamente no topo quando o painel de Processamento lá em cima não está visível. Você pode expandir para a experiência completa (até para adicionar mais arquivos, mesmo durante o processamento), ou usar recolhida como atalho... chega de rolar de volta pro topo.




  • NOVO- Personalização de estilo
    • Família e tamanhos de fonte para o timecode e o cabeçalho:




    • Seletor de cor melhorado para a cor de fundo/texto




  • NOVO - 12 presets padrão com várias configurações, templates/tamanhos de grade. Você pode editar/apagar à vontade... se você já tinha configurações, vai precisar apagar/limpar o localStorage do app/site no navegador (pesquisa no Google).


  • CORREÇÕES - Desempenho geral melhor, tratamento das instâncias do FFMPEG um pouco melhorado, suporte a celular melhor, principalmente no Editor de timestamps.
Como sempre, se achar bugs ou tiver sugestões, fique à vontade pra perguntar aqui!
 
Atualização de versão menor, mesma URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • NOVO - Modo Sequência animada
    • Substitui a grade e mostra segmentos curtos um após o outro (em sequência), respeitando a largura de saída que você escolheu (escala o vídeo), permite os overlays "Mostrar metadados do cabeçalho" e "Timecode" porque cada frame é composto.


    • Suporte a codificação em MP4 para TODAS as sequências animadas
    • Aqui vão alguns exemplos:

      WEBP "Estático (manter frame)"

      WEBP "Vídeo (reproduzir segmento)"





      MP4 "Vídeo (reproduzir segmento)"

  • NOVO- Sequência animada "Vídeo com áudio"
    • No mesmo grupo de opções, se você selecionar "Vídeo com áudio" em "Modo de renderização", o FFMPEG vai ser usado pra cortar segmentos do vídeo direto com áudio e recodificar com codecs compatíveis com navegador. A largura de saída é respeitada, mas não tem overlay (metadados/timecode). Esse modo só permite saída em MP4 (porque é o único formato que suporta áudio).

      MP4 "Vídeo com áudio"

  • NOVO- Configurações de destino do upload "Extensões permitidas" e "Tamanho máx. do arquivo", que são checadas antes de tentar subir um arquivo gerado.


  • NOVO - Bitrate de áudio e quantidade de faixas adicionados aos metadados do cabeçalho
  • NOVO - 4 presets padrão adicionados pro modo Sequência.
  • CORREÇÕES - Corrigido um pequeno vazamento de memória no fallback do FFMPEG e nos atalhos de teclado do Editor de Timestamps.
Como antes, se você achar bugs ou tiver sugestões de novas funções, fique à vontade pra perguntar aqui!
 
Você precisa entrar ou se cadastrar para responder aqui.
Voltar
Topo