[PITCH] Anima Sticker - Conversor de video/gif em sticker para WhatsApp na WEB
Fala pessoal, tudo bem?
Desde muito tempo eu tenho uma dor gigantesca: TENHO POUCAS FIGURINHAS NO WHATSAPP! E junto isso, odeio as soluções atuais de criação de figurinhas, especificamente porque eu uso bastante o PC/WhatsApp Web e não quero ficar abrindo app no celular, baixando algum video pra gerar uma figurinha e assistir mil anuncios.
Eu queria uma ferramenta simples para que literalmente eu colasse qualquer link com conteúdo e ele fosse convertido pra figurinhas animadas. E foi exatamente isso o que eu fiz (ou quase).
Em 3 dias eu comecei o projeto e subi em prod (https://animasticker.com)
*O cursor cantou, 90% do código foi vibecodado com pouca supervisão
Pra mim, o projeto ficou sensacional, era algo que eu estava querendo muito e há muito tempo, já compartilhei com alguns amigos e a galera tá curtindo.
O mais divertido é você simplesmente pegar o link de um reels que se encaixaria bem numa figurinha, colar o link, processar e receber a figurinha.
Ele está rodando numa VPS da hostinger com 2 vCPU e 8GB RAM dentro de um container.
Backend: Node JS com express (por causa do whatsappweb.js)
Front: React em javascript iniciado com vite
E pra entregar isso, foi configurado um NGINX para os roteamentos api.animasticker e animasticker.com.
Não quero entrar em muitos detalhes de como foi feito, porém, quero deixar uma dica pra quem precisa fazer download de videos no instagram, eu já testei uma lib, mas ela falha muito em VPS não sei o motivo, então eu decidi escrever a minha lib do zero.
O processo é bem simples e rápido, a única limitação é que o video vem sem audio porque o instagram separa as tracks em diferentes URLs:
page = await browser.newPage(); //API do puppeteer
const videoUrlPromise = new Promise((resolve, reject) => {
const timeout = setTimeout(() => {
reject(new Error('Timeout: não foi possível encontrar o vídeo no tempo limite'));
}, timeoutMs);
page.on('request', (request) => {
const url = request.url();
if (url.includes('.mp4?_nc_cat')) { // pega a primeira url que tem isso na url
clearTimeout(timeout);
const directUrl = url.split('&bytestart')[0]; // o segredo pra pegar o video completo
resolve(directUrl);
}
});
});
await page.goto(instagramUrl, { waitUntil: 'domcontentloaded', timeout: 15000 });
await page.evaluate(() => window.scrollTo(0, 1));
await new Promise((r) => setTimeout(r, 1500));
const directUrl = await videoUrlPromise; //link direto pro MP4
Fonte: https://animasticker.com