Build: um controle remoto personalizado com IA

O PLAYDECK já vem com dois controles remotos confortáveis: Bitfocus Companion Se você tiver um Deck Stream ou um ATEM, e o recurso integrado Controle Remoto pela Web se você quiser apenas um navegador conectado à mesma rede Wi-Fi.

O “Controle Remoto Personalizado” é a terceira opção. Você cola um arquivo HTML, o PLAYDECK o exibe neste PC, e seu celular o abre por meio de um código QR. O ChatGPT, o Gemini ou o Claude apenas reescrevem esse arquivo. O PLAYDECK nunca se comunica com a IA, e você nunca instala um chatbot dentro do equipamento de exibição.

Isso serve para as funções para as quais o Web Remote não foi projetado: um gerente de estúdio que precisa apenas de três botões enormes, um produtor que quer um contador de tempo do tamanho de um caminhão, um programa que precisa de um comando a mais que a interface padrão não exibe. Você descreve a função em linguagem simples. A IA retorna o código HTML. Você o cola de volta.

Não edite os arquivos dentro da pasta do programa PLAYDECK. As atualizações os sobrescrevem. O Custom Remote é o fork que sobrevive à atualização.

Neste artigo:
O que você recebe
Use o exemplo (comece por aqui)
Deixemos que a IA mude isso
Comandos e status em tempo real
Usando o Web Remote como base
Se algo não funcionar


O que você recebe

Configurações → Controle remoto → Controle remoto personalizado.

O PLAYDECK armazena seu código HTML e o disponibiliza em um endereço estável:

http://YOUR-PC:11411/custom

A URL não muda quando você cola um novo layout. O código QR ao lado da caixa contém esse mesmo endereço. O celular e o PC com o PLAYDECK devem estar conectados à mesma rede Wi-Fi. Se a página permanecer em branco, permita a porta TCP 11411 no firewall (a mesma porta que o Companion e o Web Remote já utilizam).

Há sempre apenas um Controle remoto personalizado. Uma caixa, um arquivo, um QR. Isso é proposital. Você não está criando um serviço de hospedagem de sites. Você está criando o controle remoto para esse programa.

O Web Remote integrado permanece em / (a raiz da porta 11411). O Companion continua sendo o Companion. O Overlays e o Director View continuam sendo seus próprios modelos. O Custom Remote não os substitui.


Use o exemplo (comece por aqui)

Se você nunca fez isso, não comece de uma página em branco e não comece pelo Web Remote. Comece pelo Exemplo. Trata-se de um painel de botões voltado para o celular: dois canais, teclas de transporte grandes, próximo clipe/próximo bloco nos mesmos modos que o Companion usa (Cue, Play, Cue+Play, Fade). Ele exibe o nome do clipe, transcorrido, restante, e bloco restante. Clipes e blocos infinitos exibem ∞ (às vezes  mais o tempo de repetição). Esse é o mesmo texto que o PLAYDECK exibe na barra de progresso. Não criamos uma contagem regressiva falsa.

  1. Configurações → Controle remoto → Controle remoto personalizado.
  2. Clique Carregar amostra.
  3. Clique Salvar e abrir controle remoto personalizado.
  4. Escaneie o QR com a câmera do seu celular ou abra o endereço no navegador do celular.

Você deve conseguir avançar para um ponto específico, reproduzir, pausar, parar, voltar ao início da lista de reprodução e avançar clipe por clipe ou bloco por bloco — sem precisar ler uma lista de comandos primeiro.

Esse “Sample” é também o arquivo que você entrega à IA. Ele já contém o único contrato técnico que importa: uma tag de script e os comandos do PLAYDECK escritos nos botões.


Deixemos que a IA mude isso

Copie todo o conteúdo da caixa de HTML. Cole no ChatGPT (ou no Gemini / Claude). Explique para que serve o controle remoto, e não qual biblioteca JavaScript usar.

Lembre-se disso em todas as instruções:

Mantenha a linha <script src="/playdeck-remote.js"></script>. Não abra seu próprio WebSocket. Não modifique o arquivo playdeck-remote.js. data-cmd é um comando do PLAYDECK presente na Lista de Comandos. data-bind mostra o status em tempo real.

Em seguida, adicione a tarefa, por exemplo:

Gerente de piso, apenas Canal 1

Configure este iPad para ser usado pelo gerente de pista. Apenas o Canal 1. Tempo restante em destaque. Três botões: REPRODUZIR, PAUSA, REPRODUZIR PRÓXIMO CLIPE. Fundo escuro, sem bordas douradas, áreas de toque amplas.

Reestruture, mas mantenha os botões

Mantenha todos os botões e comandos existentes. Altere apenas as cores, o espaçamento e o tipo de fonte para que pareça um painel de transmissão. O canal em exibição deve continuar sendo facilmente identificável.

Adicione uma ação a mais

Mantenha a amostra como está. Adicione um botão abaixo do Canal 1 que envie startoverlay|1|1. Nomeie-a como OVERLAY 1.

Cole o código HTML gerado pela IA na caixa → Salvar e Abrir → atualize a página do celular. Se a IA tiver removido a tag do script, o PLAYDECK a recoloca quando você salva. Se a IA tiver inventado nomes de botões como do topo ou próximo em vez de comandos reais, essas teclas não terão efeito algum — reative o comando “Lista de Comandos” data-cmd.

Você pode colar na caixa usando Ctrl+V. Não há um botão separado para “Colar”. As opções “Carregar amostra” e “Carregar remoto da Web” substituem a caixa; em seguida, salve. Digitar na caixa sem clicar em “Salvar” ou “Abrir” não atualiza o celular.


Comandos e status em tempo real

O script auxiliar /playdeck-remote.js funciona apenas com WebSocket. Você não deve copiar esse arquivo para a IA. Você não deve reescrevê-lo. O arquivo HTML é o único arquivo envolvido na conversa.

Um botão é um comando do PLAYDECK, da mesma família que o Comando Personalizado do Companion utiliza:





O texto ao vivo é data-bind além disso canal de dados:

<div data-bind="channelName" data-channel="1"></div>
<div data-bind="clipName" data-channel="1"></div>
<div data-bind="elapsed" data-channel="1"></div>
<div data-bind="remain" data-channel="1"></div>
<div data-bind="blockRemain" data-channel="1"></div>
<div data-bind="blockName" data-channel="1"></div>


“Transcorrido” e “restante” referem-se à duração do clipe. “Restante do bloco” refere-se ao bloco. “Infinito” é representado por ∞.

A lista completa de comandos está no PLAYDECK: Menu Principal → Documentação. Se você puder enviá-lo pelo Companion como um comando personalizado, poderá colocá-lo em data-cmd.

Se uma página precisar de uma lógica que os atributos não possam fornecer (um contador de visualizações, uma tabela de resumo), esse JavaScript adicional deve ser incluído no mesmo arquivo HTML. Usar PlaydeckRemote.send('play|1') e PlaydeckRemote.onStatus(...). Continua sendo um único arquivo, ainda não há um segundo WebSocket.


Usando o Web Remote como base

O Sample é a abordagem que funciona bem com IA: poucos botões, pouco código.

Às vezes a gente realmente quer Controle Remoto da Web do Nick — a lista de clipes, as barras de progresso, as abas dos canais — mas na cor laranja em vez de cinza, ou um relógio maior, ou abas ocultas. Em seguida:

  1. Controle remoto personalizado → Carregar Web Remote → Salvar e Abrir.
  2. Agora você tem uma cópia do Web Remote integrado em /personalizado. O Web Remote original em / permanece inalterado.
  3. Copie esse código HTML para a IA seguindo uma regra rígida:

Esta página é o PLAYDECK Web Remote. Altere apenas o CSS e os rótulos. Não reescreva o JavaScript responsável pela criação da lista de reprodução, das barras de progresso ou das abas de canais. Mantenha <script src="/playdeck-remote.js"></script>.

Se a IA “simplificar” esse JavaScript, a lista de clipes geralmente deixa de funcionar. Carregue o Web Remote novamente e tente mais uma vez com uma solicitação menor (apenas cores).

Nunca diga às pessoas para editarem webremote.html no disco e manter um backup para a próxima reinstalação. É para isso que serve o Custom Remote.


Se algo não funcionar

Página em branco do telefone. É a mesma rede Wi-Fi do PC do PLAYDECK? A porta TCP 11411 está habilitada? Tente primeiro clicar em “Salvar” e “Abrir” no PC. O endereço é http://IP:11411/custom — nem https, nem outra porta.

Os botões não funcionam. A tag script deve permanecer. data-cmd deve ser um comando válido (play|1, não reproduzir). Atualize a página após salvar e abrir.

Tempos travados ou lista desatualizada. Atualize a página no celular. No caso de uma cópia via Web Remote, aguarde alguns segundos — essa página atualiza os dados da lista de reprodução em intervalos curtos.

∞ em vez de um relógio. O clipe ou bloco tem duração infinita (ao vivo, em loop, por tempo). O PLAYDECK exibe o mesmo.

Eu queria alterar o Web Remote padrão. Você fez o seguinte: o “Carregar Web Remote” é essa página, apresentada como “Custom Remote”. Saia / para todos que ainda preferem a interface de usuário padrão.

Companion / Deck Stream. Continue usando o Companion para o hardware. O Custom Remote é um aplicativo em HTML para celular ou tablet, e não substitui o módulo.