|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: "[PT-BR] kar4oke.com - Explorando formas de ampliar o catálogo" |
| 3 | +title: "[PT-BR] kar4oke.com - Injetando URLs do YouTube no player embutido" |
4 | 4 | date: 2025-07-20 |
5 | 5 | --- |
6 | 6 |
|
7 | | -Recentemente assinei o serviço do site kar4oke.com para usar em uma festa entre amigos. A proposta do site é excelente e funciona muito bem, mas notei que a seleção de músicas disponíveis é bastante limitada, o que pode restringir a experiência em alguns contextos. |
| 7 | +Recentemente assinei o serviço do site kar4oke.com para usar em uma festa, porém percebi que a seleção de músicas é extremamente limitada. |
8 | 8 |
|
9 | | -Curioso sobre como o sistema funcionava por trás dos panos, comecei a explorar com mais atenção a forma como os vídeos são carregados e reproduzidos na plataforma. Percebi que o serviço utiliza como base um player bem conhecido e consolidado do mercado, o que me levou a testar algumas formas de integração alternativa. |
| 9 | +Usando o site normalmente, é bem visível que o player deles não passa de um reprodutor do YouTube, inspecionando a página, percebi que existia uma tag iframe, sem pensar duas vezes, substitui a tag manualmente por uma com o src de outro vídeo, e incrivelmente funcionou. |
10 | 10 |
|
11 | | -No começo, minhas tentativas de inserir conteúdos externos pareciam funcionar visualmente, mas logo notei que várias funcionalidades importantes, como a geração de nota e a sequência automática de faixas, não se comportavam como o esperado. Isso indicava que o sistema interno da plataforma era bem mais sofisticado do que parecia à primeira vista. |
| 11 | +Ou assim eu pensei, pois assim que o vídeo terminou, não gerou a nota aleatória nem passou para o próximo vídeo. |
12 | 12 |
|
13 | | -Com um pouco mais de investigação e prototipagem, consegui desenvolver uma solução que mantém todas as funcionalidades essenciais da plataforma mesmo ao utilizar conteúdos externos — incluindo reprodução automática, avaliação e integração com a fila de músicas. Essa solução, que implementei como uma ferramenta experimental para uso pessoal, abre espaço para expandir a biblioteca disponível sem comprometer a lógica e a estrutura original do site. |
| 13 | +Após isso, fiz uma extensão [(disponível no meu GitHub)](https://github.com/housey2k/kar4oke.com-ForceYT) que automaticamente substitui o iframe, mesmo funcionando, o resultado foi o mesmo ao terminar o vídeo, sem nota nem autoplay. |
14 | 14 |
|
15 | | -Além disso, observando o comportamento do sistema de adição de músicas por QR Code, percebi que existe um processo estruturado de seleção e controle de conteúdo, o que me leva a crer que existe uma preocupação legítima com a curadoria e a estabilidade do serviço. Mesmo assim, acredito que existem formas técnicas seguras de oferecer uma experiência mais flexível ao usuário final, sem comprometer os pilares do sistema. |
| 15 | +Depois de olhar o código e fazer um pouco de engenharia reversa, descobri que por algum motivo existe um iframe com todo o código HTML, como se fosse uma página isolada, e dentro desse frame, um segundo frame com o player, descobri também que posso enviar comandos diretamente usando uma função chamada `player.loadVideoById(string)` |
16 | 16 |
|
17 | | -Essa experiência me mostrou como a combinação de curiosidade, respeito à arquitetura existente e criatividade pode resultar em soluções que agregam valor tanto para os usuários quanto para os desenvolvedores da plataforma. Caso a equipe do kar4oke.com tenha interesse, estou aberto para compartilhar ideias e colaborar com melhorias que tragam mais liberdade ao usuário, sem abrir mão da consistência e da qualidade da experiência oferecida. |
| 17 | +O código implementado na extensão está assim: |
| 18 | +```javascript |
| 19 | +function sendLoadVideoMessage(videoId) { |
| 20 | + const iframe = document.querySelector('iframe[id^="youtube-"]'); |
| 21 | + if (!iframe) { |
| 22 | + alert("Iframe do YouTube não encontrado."); |
| 23 | + return; |
| 24 | + } |
18 | 25 |
|
19 | | -Se você me conhece, sabe que não gosto de ocultar detalhes, mas por enquanto esse post vai ficar assim, sem sequer uma informação valiosa, e o repositório no GitHub com o código da extensão estará privado, estou fazendo isso pois estarei oferecendo essa função à empresa, e quero evitar cópias |
| 26 | + const message = JSON.stringify({ |
| 27 | + function: `player.loadVideoById("${videoId}")` |
| 28 | + }); |
| 29 | + |
| 30 | + iframe.contentWindow.postMessage(message, "*"); |
| 31 | +} |
| 32 | +``` |
| 33 | + |
| 34 | +Com esse novo código enviando instruções diretamente ao player existente ao invés de o substituir, os problemas de autoplay e geração de nota foram resolvidos |
| 35 | + |
| 36 | +Se você olhar na constante iframe, pode perceber que usei um queryselector para a ID começando com "youtube-", isso foi feito pois percebi que em alguns momentos o iframe principal tinha ID "youtube-0", e em outros momentos "youtube-1", não sei exatamente como funciona, mas provavelmente existem mais IDs. |
| 37 | +Após alguns ajustes e implementação de drag&drop, disponibilizo essa extensão de navegador extremamente simples que permite injetar qualquer vídeo do youtube no site kar4oke. |
| 38 | + |
| 39 | +Uma outra descoberta é que olhando o tráfego de rede da página de adcionar músicas por QR Code, percebi que ao pesquisar, a API retorna uma lista de músicas, no JSON vem a thumbnail, nome da música, artistas, e um ID numérico da música, e ao clicar para adcionar a música à fila, ele envia uma solicitação com uma instrução de adcionar e o ID da música. |
| 40 | + |
| 41 | +Talvez exista algum motivo técnico, talvez seja apenas para controlar o conteúdo disponível no site, mas ao invés de implementar um banco de dados de IDs numéricos e links do youtube, eu implementaria a busca diretamente pelo youtube (por mais que isso crie a possibilidade de encontrar vídeos que não são karaokê). |
| 42 | + |
| 43 | +Essa experiência mostra como um pouco de curiosidade e engenharia reversa podem revelar o funcionamento interno de plataformas web modernas. Embora o site kar4oke.com limite a seleção de músicas disponíveis, descobri que é possível contornar essas limitações interagindo diretamente com o player do YouTube embutido, preservando funcionalidades como autoplay e geração de notas. Com isso, usuários mais avançados ganham a liberdade de personalizar sua experiência, enquanto mantêm o sistema original funcional. Ainda assim, essa abordagem levanta questões sobre o equilíbrio entre controle de conteúdo, experiência do usuário e liberdade de uso — algo que toda plataforma fechada precisa considerar ao definir suas limitações técnicas. |
| 44 | + |
| 45 | +Entrei em contato com a empresa perguntando se eles tinham interesse em implementar essa função, e me ignoraram. A extensão tá no meu GitHub pra vocês usarem a vontade. |
20 | 46 |
|
21 | 47 | <video width="640" height="480" controls><source src="/post-vid/KAR4OKE.mp4" type="video/mp4">Your browser does not support the video tag.</video> |
0 commit comments