Prototype

Passerelle entre WebSocket et OSC

15 décembre 2024
10 min de lecture
#Websocket#OSC

L'idée initale

Imaginez pouvoir contrôler les visuels d'une projection rien qu'en scannant un QR code avec son smartphone, sans jamais avoir besoin d'installer une appli. C'est exactement ce que je cherche à mettre en place : une interface web accessible à tous pour interagir avec des contenus visuels en temps réel. Au début, l'idée semblait presque trop simple, mais comme souvent, c'est dans la simplicité que se cachent les plus grands défis techniques. Mon premier réflexe a été de me tourner vers le protocole OSC (Open Sound Control). Ce protocole est très populaire dans le domaine de la création visuelle, et on le retrouve dans des outils comme TouchDesigner ou Resolume. Mais, en y regardant de plus près, j'ai découvert que l'OSC fonctionne via TCP. Ce qui, pour une application web, représente un véritable obstacle, car il n'est pas trivial de convertir directement des données web en TCP.

Là, le projet prenait une tournure inattendue et m'obligeait à repenser complètement l'architecture.

La solution: une application Electron

Après pas mal de recherches et de réflexions, j'ai décidé de créer une application en Electron. Ce choix m'a permis de tirer partiant d'une exécution en local sur l'ordinateur. L'application agit comme une passerelle : elle convertit les données reçues via WebSocket en OSC, puis les envoie vers le chemin et le port définis par l'utilisateur. Ce système, bien qu'il demande un peu plus de travail initial, ouvre la porte à une flexibilité incroyable pour relier le web et des logiciels spécialisés.

Démonstration de l'application

Un outil polyvalent et réutilisable

J'ai voulu que cette application soit réutilisable, adaptable à divers projets et logiciels. L'idée est de pouvoir la lancer sur n'importe quel ordinateur et de la connecter aisément à un site web ainsi qu'à des logiciels de traitement visuel. Tout cela via une interface simplifiée, accessible même à ceux qui ne sont pas des experts techniques. C'est une aventure qui commence avec une question simple et qui se déploie en un outil potentiellement utile dans de nombreux contextes créatifs.

Un outil polyvalent et réutilisable

J'ai voulu que cette application soit réutilisable, adaptable à divers projets et logiciels. L'idée est de pouvoir la lancer sur n'importe quel ordinateur et de la connecter aisément à un site web ainsi qu'à des logiciels de traitement visuel. Tout cela via une interface simplifiée, accessible même à ceux qui ne sont pas des experts techniques. C'est une aventure qui commence avec une question simple et qui se déploie en un outil potentiellement utile dans de nombreux contextes créatifs.

La prochaine étape

Pour accélérer le développement, j'ai intégré Ably en tant que service de WebSocket. Cet ajout m'a permis d'insérer une clé d'API directement dans l'application, simplifiant ainsi la communication. Cependant, l'objectif ne s'arrête pas là : j'imagine une application capable de générer son propre serveur WebSocket ouvert sur le web, éliminant ainsi une couche de complexité et rendant le tout encore plus accessible.

La prochaine étape

Pour accélérer le développement, j'ai intégré Ably en tant que service de WebSocket. Cet ajout m'a permis d'insérer une clé d'API directement dans l'application, simplifiant ainsi la communication. Cependant, l'objectif ne s'arrête pas là : j'imagine une application capable de générer son propre serveur WebSocket ouvert sur le web, éliminant ainsi une couche de complexité et rendant le tout encore plus accessible.

Bref

Ce projet est bien plus qu'une simple solution technique. C'est une invitation à repenser comment nous interagissons avec le visuel en temps réel. Chaque obstacle rencontré m'a poussé à explorer de nouvelles pistes et à remettre en question mes connaissances techniques. J'espère que ce petit partage vous aura permis de jeter un regard différent sur les défis du développement et sur les multiples façons dont la technologie peut nous surprendre et nous inspirer.