>_ DevTrendsfr

Langue

Accueil

Langages

Sections

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarqué Sécurité
C-plus-plus

Comment afficher clairement les entrées clavier et manette sur votre stream OBS Studio

logo

Lorsque j'enregistrais mes premiers screencasts détaillant les raccourcis clavier dans mon éditeur de code, je ne cessais de penser : les spectateurs n'ont aucune idée de ce que j'appuie réellement. Je devais soit énoncer chaque combinaison comme Ctrl+Shift+P à voix haute, soit dessiner manuellement des indices pendant le montage. Pas idéal, surtout quand la vidéo dure une demi-heure.

Les joueurs et les speedrunners rencontrent ce problème encore plus souvent. Afficher le timing des appuis sur une manette ou les mécaniques de bunny-hop dans un shooter sans overlay visuel est pratiquement impossible.

D'habitude, ces tâches sont résolues avec des bidouilles : lancer un utilitaire tiers dans une fenêtre séparée et le capturer via OBS avec Window Capture et un fond coloré. Cela consomme des ressources CPU supplémentaires et donne un rendu sale. Le plugin input-overlay du développeur univrsal résout cela différemment. Il s'intègre directement dans OBS Studio en tant que source native.

Ce que ce plugin peut faire

Le projet est écrit en C++ et fonctionne sur les versions 64 bits de Windows et Linux. Sa tâche est simple : intercepter les entrées des périphériques et les dessiner sur la scène en temps réel avec une latence minimale.

Les périphériques pris en charge incluent :

  • Claviers standards (avec support de toutes les dispositions et modificateurs)
  • Souris (suivi des boutons, roulette et mouvement du curseur)
  • Manettes et contrôleurs (Xbox, PlayStation, DirectInput/XInput universels)

Au lieu d'un simple journal textuel, le plugin utilise des textures et des sprites personnalisés. Vous prenez une image d'une manette ou d'un clavier, vous la découpez en états (bouton relâché / bouton pressé) et vous liez les graphiques aux événements système.

Ce qu'il y a dedans : architecture et dépendances

La base de code du projet contient plusieurs solutions intéressantes. Pour ne pas réinventer la roue pour chaque type de périphérique, l'auteur a intégré des bibliothèques bas niveau éprouvées.

Pour l'interception globale du clavier et de la souris, il utilise libuiohook. Cette bibliothèque fonctionne au niveau des hooks système de l'OS, ce qui permet d'écouter les entrées même lorsque la fenêtre OBS elle-même est en arrière-plan ou qu'un jeu tourne en plein écran.

Les manettes sont gérées par SDL2. Cela garantit une excellente compatibilité avec les contrôleurs de différentes générations sans se compliquer avec les descripteurs de périphériques bruts.

L'intégration de mongoose mérite une attention particulière — un serveur web embarqué léger. Pourquoi un plugin de capture de touches en aurait-il besoin ? Si vous streamez depuis deux ordinateurs (un pour le jeu, l'autre comme encodeur de streaming), vous pouvez envoyer les événements d'entrée sur le réseau local depuis le PC de jeu directement vers l'instance OBS sur la machine de streaming. Une fonctionnalité très astucieuse qui élimine l'encombrement des câbles.

Comment créer votre propre overlay

La configuration du plugin se compose de deux fichiers : une texture graphique PNG et un fichier de disposition JSON.

Auparavant, le projet utilisait le format .ini, mais a fini par passer à JSON. Pour ne pas avoir à calculer les coordonnées en pixels des boutons dans un bloc-notes, l'auteur a publié un éditeur web visuel appelé Config Creation Tool (CCT).

Vous téléchargez votre sprite sheet dans le navigateur, vous place des rectangles de sélection sur les boutons, vous les liez aux codes des touches, et vous exportez la configuration terminée :

Après cela, vous ajoutez simplement une nouvelle source « Input Overlay » dans OBS Studio, vous pointez vers le JSON et le PNG, et le widget est prêt. Le plugin rend les textures via le pipeline graphique d'OBS, donc la surcharge de rendu est practically nulle.

Où cela peut être utile pour les développeurs

Cela pourrait sembler être un outil strictement pour streamers. Mais pour le contenu technique, c'est tout aussi utile :

  1. Enregistrement de screencasts éducatifs. Démontrer les raccourcis dans Vim, Emacs, Blender ou VS Code aide les spectateurs à reproduire les actions en temps réel sans être distraits par les pauses.
  2. Test des manettes et du lag d'entrée. Si vous développez un jeu indie ou un émulateur, l'overlay vous permet de vérifier visuellement les appuis sur le contrôleur avec les réactions du personnage à l'écran.
  3. Présentations et démos d'équipe. Lors de scénarios d'interface complexes ou de démonstrations d'utilitaires en ligne de commande, les spectateurs voient immédiatement les modificateurs et les touches de fonction.

Nuances et limitations

La documentation dans le dépôt est concise, donc les débutants devront passer une demi-heure à comprendre la structure des sprites. Créer un skin soigné from scratch nécessite des compétences de base dans un éditeur graphique.

Gardez aussi la vie privée à l'esprit. Comme les hooks interceptent les entrées globalement, pendant un stream ou un enregistrement vidéo, l'overlay affichera fidèlement toute frappe si vous commencez à taper des mots de passe ou des données privées. Pour ces cas, il vaut mieux configurer à l'avance une touche de raccourci pour masquer la source dans OBS.

Le plugin est également axé sur Windows et Linux x64 — les builds macOS ne sont pas officiellement prises en charge.

Cela vaut-il le coup d'essayer

Si vous avez besoin d'un moyen propre et performant pour afficher les entrées des périphériques dans OBS sans bidouilles de navigateur ni chutes de fps, input-overlay est l'une des options les plus fiables.

Le projet est actif depuis 2017, a recueilli plus de 4 000 étoiles, et aborde une tâche spécifique sans alourdir la base de code. Les binaires précompilés sont disponibles dans l'onglet Releases sur GitHub, et des préréglages prêts à l'emploi pour les manettes et les claviers se trouvent sur les forums du projet OBS.

Projets similaires