PLAYDECK vous propose d'ores et déjà deux télécommandes pratiques : Bitfocus Companion Si vous disposez d'un Deck Stream ou d'un ATEM, et que la fonction intégrée Télécommande Web si vous souhaitez simplement utiliser un navigateur connecté au même réseau Wi-Fi.
« Custom Remote » est la troisième option. Vous collez un fichier HTML, PLAYDECK le diffuse sur cet ordinateur, et votre téléphone l'ouvre à l'aide d'un code QR. ChatGPT, Gemini ou Claude se contentent de réécrire ce fichier. PLAYDECK ne communique jamais avec l'IA, et vous n'installez jamais de chatbot au sein du système de diffusion.
C'est destiné aux tâches pour lesquelles Web Remote n'est pas conçu : un régisseur qui n'a besoin que de trois gros boutons, un producteur qui veut un compteur de temps aussi grand qu'un camion, une émission qui a besoin d'une commande supplémentaire que l'interface utilisateur par défaut n'affiche pas. Vous décrivez la tâche en langage clair. L'IA vous renvoie du code HTML. Vous le collez à l'écran.
Ne modifiez pas les fichiers situés dans le dossier du programme PLAYDECK. Les mises à jour les écrasent. « Custom Remote » est la version dérivée qui résiste aux mises à jour.
Dans cet article :
→ Ce que vous obtenez
→ Utilisez l'exemple (commencez ici)
→ Laissons l'IA changer cela
→ Commandes et état en temps réel
→ En utilisant Web Remote comme base
→ Si quelque chose ne fonctionne pas
Ce que vous obtenez
Paramètres → Télécommande → Télécommande personnalisée.
PLAYDECK stocke votre code HTML et le met à disposition à une adresse fixe :
http://YOUR-PC:11411/custom
L'URL ne change pas lorsque vous collez une nouvelle mise en page. Le code QR situé à côté de la case contient cette même adresse. Le téléphone et le PC PLAYDECK doivent être connectés au même réseau Wi-Fi. Si la page reste vide, autorisez le port TCP 11411 dans le pare-feu (le même port que celui déjà utilisé par Companion et Web Remote).
Il n'y a toujours qu'un seul un Télécommande personnalisée. Une boîte, un fichier, un code QR. C'est voulu. Vous ne créez pas un hébergeur de sites web. Vous créez la télécommande pour ce spectacle.
La télécommande Web intégrée reste à / (la racine du port 11411). Companion reste Companion. Les modèles « Overlays » et « Director View » conservent leurs propres modèles. « Custom Remote » ne les remplace pas.
Utilisez l'exemple (commencez ici)
Si vous n'avez jamais fait cela auparavant, ne commencez pas à partir d'une page vierge et ne commencez pas à partir de Web Remote. Commencez par l'exemple. Il s'agit d'un clavier de commande conçu avant tout pour les téléphones : deux canaux, de grosses touches de transport, « clip suivant » / « bloc suivant » dans les mêmes modes que ceux utilisés par Companion (Cue, Play, Cue+Play, Fade). Il affiche le nom du clip, écoulé, restant, et bloc restant. Les clips et les blocs « infini » sont représentés par le symbole ∞ (parfois ∞ plus la durée de la boucle). C'est exactement le même texte que PLAYDECK affiche dans la barre de progression. Nous n'inventons pas de faux compte à rebours.
- Paramètres → Télécommande → Télécommande personnalisée.
- Cliquez Charger un échantillon.
- Cliquez Enregistrer et ouvrir une télécommande personnalisée.
- Scannez le code QR avec l'appareil photo de votre téléphone, ou ouvrez l'adresse dans le navigateur de votre téléphone.
Vous devriez pouvoir lancer la lecture, mettre en pause, arrêter, revenir au début de la liste de lecture et parcourir clip par clip / bloc par bloc — sans avoir à consulter au préalable une liste de commandes.
Cet exemple correspond également au fichier que vous transmettez à l'IA. Il contient déjà le seul contrat technique qui compte : une balise de script et les commandes PLAYDECK associées aux boutons.
Laissons l'IA changer cela
Copiez tout le contenu de la zone HTML. Collez-le dans ChatGPT (ou Gemini / Claude). Précisez à quoi sert la télécommande, et non quelle bibliothèque JavaScript utiliser.
N'oubliez pas d'inclure ceci dans chaque instruction :
Restez en ligne <script src="/playdeck-remote.js"></script>. N'ouvrez pas votre propre WebSocket. Ne modifiez pas le fichier playdeck-remote.js. data-cmd Il s'agit d'une commande PLAYDECK figurant dans la liste des commandes. data-bind affiche l'état en temps réel.
Ajoutez ensuite la tâche, par exemple :
Responsable de salle, chaîne 1 uniquement
Configurez cet iPad pour qu'il serve d'outil de gestion de salle. Canal 1 uniquement. Temps restant : très long. Trois boutons : LECTURE, PAUSE, LECTURE DU CLIP SUIVANT. Fond sombre, pas de bordures dorées, grandes zones tactiles.
Refonte, en conservant les boutons
Conservez tous les boutons et commandes existants. Ne modifiez que les couleurs, l'espacement et la police afin que l'interface ressemble à un panneau de diffusion. La chaîne en cours de diffusion doit rester clairement identifiable.
Ajouter une action supplémentaire
Laissez l'échantillon tel quel. Ajoutez un bouton sous le canal 1 qui envoie startoverlay|1|1. Nommez-le « OVERLAY 1 ».
Collez le code HTML généré par l'IA dans le champ ci-dessous → Enregistrer et ouvrir → Redémarrez le téléphone. Si l'IA a supprimé la balise script, PLAYDECK la réintègre lorsque vous enregistrez. Si l'IA a inventé des noms de boutons tels que depuis le haut ou suivant Au lieu d'exécuter de véritables commandes, ces touches ne feront rien — réactivez la commande « Liste des commandes » data-cmd.
Vous pouvez coller du contenu dans le champ à l'aide de la combinaison Ctrl+V. Il n'y a pas de bouton « Coller » distinct. Les options « Charger un exemple » et « Charger une commande à distance Web » remplacent le champ ; enregistrez ensuite les modifications. Si vous saisissez du texte dans le champ sans cliquer sur « Enregistrer » ou « Ouvrir », le téléphone ne sera pas mis à jour.
Commandes et état en temps réel
Le script d'aide /playdeck-remote.js Il ne prend en charge que le protocole WebSocket. Vous ne devez pas copier ce fichier sur l'IA. Vous ne devez pas le modifier. Le fichier HTML est le seul fichier de la conversation.
Un bouton correspond à une commande PLAYDECK, issue de la même famille que celle utilisée par la commande personnalisée de Companion :
Le texte en direct est data-bind et aussi canal de données:
<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>
« Temps écoulé » et « Temps restant » correspondent à la durée du clip. « Bloc restant » correspond au bloc. « Infini » s'affiche sous la forme ∞.
La liste complète des commandes se trouve dans PLAYDECK : Menu principal → Documentation. Si vous pouvez l'envoyer depuis Companion en tant que commande personnalisée, vous pouvez l'ajouter à data-cmd.
Si une page nécessite une logique que les attributs ne permettent pas de mettre en œuvre (un compteur de vues, un tableau récapitulatif), ce code JavaScript supplémentaire doit être placé dans le même fichier HTML. Utiliser PlaydeckRemote.send('play|1') et PlaydeckRemote.onStatus(...). Toujours un seul fichier, toujours pas de deuxième WebSocket.
En utilisant Web Remote comme base
L'exemple illustre l'approche qui fonctionne bien avec l'IA : peu de boutons, peu de code.
Parfois, on a vraiment envie de La télécommande Web de Nick — la liste des extraits, les barres de progression, les onglets des chaînes — mais en orange au lieu de gris, ou une horloge plus grande, ou encore des onglets masqués. Ensuite :
- Télécommande personnalisée → Charger Web Remote → Enregistrer et ouvrir.
- Vous disposez désormais d'une copie de la télécommande Web intégrée dans le répertoire
/personnalisé. La télécommande Web Remote d'origine disponible à l'adresse/reste inchangé. - Copiez ce code HTML dans l'IA en respectant une règle stricte :
Cette page correspond à PLAYDECK Web Remote. Modifiez uniquement le CSS et les libellés. Ne modifiez pas le code JavaScript qui gère la liste de lecture, les barres de progression ou les onglets des chaînes. Conservez <script src="/playdeck-remote.js"></script>.
Si l'IA “ simplifie ” ce code JavaScript, la liste des extraits cesse généralement de fonctionner. Rechargez Web Remote et réessayez avec une requête plus simple (couleurs uniquement).
Ne dites jamais aux gens de modifier quelque chose webremote.html sur le disque dur et conserver une sauvegarde en vue d'une prochaine réinstallation. C'est justement à cela que sert Custom Remote.
Si quelque chose ne fonctionne pas
Page vierge du répertoire téléphonique. Est-ce le même réseau Wi-Fi que celui du PC PLAYDECK ? Le port TCP 11411 est-il ouvert ? Essayez d'abord d'enregistrer et d'ouvrir le fichier sur le PC. L'adresse est http://IP:11411/custom — ni https, ni un autre port.
Les boutons ne font rien. La balise script doit rester. data-cmd doit être une commande valide (lire|1, et non jouer). Actualisez la page après avoir enregistré et ouvert le fichier.
Temps bloqués ou liste obsolète. Actualisez la page. Pour une copie via Web Remote, patientez quelques secondes : cette page actualise les données de la liste de lecture à intervalles réguliers.
∞ à la place d'une horloge. Le clip ou le bloc a une durée illimitée (en direct, en boucle, au rythme de l'horloge). PLAYDECK affiche la même chose.
Je voulais modifier la télécommande Web standard. Vous avez : « Charger la commande à distance Web » correspond à cette page, qui fait office de commande à distance personnalisée. Laissez / pour tous ceux qui préfèrent conserver l'interface utilisateur d'origine.
Companion / Plateforme Stream. Continuez à utiliser Companion pour le matériel. Custom Remote est une application HTML accessible depuis un téléphone ou une tablette ; elle ne remplace pas le module.
