Dans ce tutoriel je vous propose de découvrir comment contrôler OBS Studio depuis une page en utilisant JavaScript et les WebSockets
Le principe de base
Pour commencer, on va installer OBS WebSocket qui permet de lancer automatiquement un serveur de WebSocket lorsque le logiciel sera lancé. Il sera ensuite possible de se connecter à ce serveur afin d'être informé des événements qui ont lieu sur le logiciel ou d'envoyer des messages pour effectuer certaines actions.
Un exemple : sélecteur de scène
Pour simplifier la communication avec le serveur de WebSocket nous allons utiliser la librairie OBS WebSocket JS qui propose une API qui simplifie grandement la communication.
Pour commencer, on se connecte au serveur de WebSocket.
const obs = new OBSWebsocket();
await obs.connect({ address: "192.168.0.35:4444", password: "obscontrol" });Une fois connecté, on peut envoyer un message au serveur pour demander la liste des scènes. Le serveur répondra alors avec un message qui contient la liste de nos scènes et les sources associées. La librairie se charge de cet aller-retour via une promesse.
const data = await obs.send("GetSceneList");On peut ensuite boucler sur l'ensemble des scènes pour générer un bouton par scène. On émettra ensuite un message pour demander un changement de scène lors du clic sur ce bouton
for (const scene of data.scenes) {
const button = document.createElement("button");
button.innerText = scene.name;
button.addEventListener("click", () => {
obs.send("SetCurrentScene", { "scene-name": scene });
});
document.body.appendChild(button);
}Et voilà ! Vous pouvez maintenant changer de scène à distance.
Pour aller plus loin
L'exemple donné ici est plutôt simple mais il est possible de faire des choses bien plus complexes.
- La liste de tous les évènements d'OBS WebSocket.
- Le plugin OBS Move Transition pour créer des transitions animées. Si besoin ce tutoriel par Valentin Braem (en français) vous aidera à comprendre les bases.
