S’inspirer du gaming pour diffuser son contenu autrement

Alexis Czornomaz
Five by Five
Published in
8 min readApr 2, 2020
Prince Abid — Unsplash

Ces derniers jours j’ai vu passer de nombreuses publications sur Linkedin de personnes à la recherche de solutions en ligne pour diffuser du contenu vidéo. J’imagine que vous avez déjà tous validés votre capacité à effectuer des réunions à distance. Je ne parlerai donc pas de l’action de Zoom qui augmente ou des meilleurs services de visioconférence.

Depuis le début du confinement, je suis un spectateur assidu des lives proposés par mon coach de sport qui, pour nous occuper, prolonge ses cours en ligne. Très bon coach, mais streamer moyen, ma moitié m’a fait remarquer qu’il mériterait un coup de main pour professionnaliser sa diffusion.

Instant confession : Il se trouve que je rêve depuis longtemps d’animer une émission en ligne sur l’univers du design, j’ai décidé de profiter de cette période pour m’intéresser de plus près au “comment diffuser”. Une bonne manière je l’espère de me lancer pour de vrai.

Si je suis capable avec ma configuration actuelle (cad. un ordinateur portable et une bonne connexion Internet) de diffuser du contenu en direct, n’importe qui peut le faire et c’est sans doute le meilleur moment pour me jeter à l’eau #jaidutemps.

Fan de jeux vidéos et grand consommateur de vidéos sur Twitch (plateforme essentiellement connue pour ses streams de jeux vidéos), c’est par ce bout que j’ai décidé d’explorer le sujet !

Le streaming dans le gaming

Je ne sais pas quand le streaming de jeux vidéo est apparu, mais la pratique est réellement devenue populaire au milieu de la dernière décennie. En 2014, le trafic sur Twitch était déjà supérieur à celui de l’ensemble des contenus proposés par la chaîne américaine HBO (qui diffuse Game of Thrones!!). Depuis, les GAFAM tentent eux aussi de s’emparer du sujet avec la création en 2015 de Youtube Gaming et plus récemment de Mixer, la plateforme de Microsoft qui s’est faite connaître par son mercato agressif pour recruter les streamers stars de Twitch.

Il faut comprendre que lorsque l’on parle de streaming on est bien loin d’une simple retransmission d’un jeu vidéo, l’activité s’est grandement professionnalisée, génère des revenus et n’est pas streamer qui veut. Les streamers portent un effort particulier sur la qualité de la réalisation. Les techniques de production n’ont plus grand chose à envier à ce qui existe en télé. Et du point vue technique, les logiciels se sont améliorés grâce au travail de la profession de streamer (oui, “streamer” est une profession) et cela a grandement facilité leur démocratisation aujourd’hui.

Il existe plusieurs logiciels tels que Xsplit, Open Broadcaster Software (plus connu sous le nom d’OBS) ou Streamlabs pour ne citer qu’eux.Mes besoins sont simples et peuvent être couverts par la plupart de ces solutions :

  • Mettre en page ma diffusion
  • Intégrer différentes sources (écran, webcam, application, micro… )
  • Faire des transitions
  • Diffuser en direct
  • Enregistrer une vidéo en même temps que sa diffusion

Mon choix s’est ainsi dirigé sur OBS car 1) je suis sur Mac et 2) il est gratuit.

NB : Pas besoin de ces outils si vous ne cherchez qu’à créer du contenu “hors ligne”, d’autres logiciels plus simples existent tel que Screenflow sur Mac.

Mise à jour : Mardi 31 Mars, Logitech a annoncé la sortie en beta de Streamlabs sur Mac. Pour la petite histoire, Streamlabs est un produit conçu sur les fondations d’OBS (disponible en open source) et donc partage avec ce dernier un langage commun. À l’usage, Streamlabs offre moins de possibilité et de flexibilité que son grand frère OBS mais c’est une bonne solution si vous souhaitez :

  • Diffuser simplement sur Youtube, Mixer ou Twitch
  • Disposer d’une bibliothèque avec des thèmes graphiques pré-fabriqués
  • Bénéficier d’une solution plug & play (aucune configuration requise)

Quoi qu’il en soit, vous n’aurez aucun mal à l’utiliser si vous poursuivez cet article.

Les fondamentaux d’OBS

À sa première ouverture, OBS lance un assistant pour configurer automatiquement les réglages de base de l’outil en fonction de votre future utilisation. Une fois cette première étape terminée, l’interface principale s’affiche…composée de différents éléments :

1 — Scenes : Chaque scène correspond à une mise en page que vous souhaitez afficher (Bienvenue, Présentation, Webcam, Fin…)

2 — Sources : La liste des différents éléments que vous souhaitez capturer dans vos scènes (Caméra, écran, application, fichier vidéo…)

3 — Canvas : Affichage de la scène sélectionnée pour mettre en page vos différentes sources

4 — Scene transitions : Pour configurer la transition par défaut entre vos différentes scènes

5 — Controls : Les principaux contrôles d’OBS (sachant qu’il existe aussi des raccourcis très pratiques)

  • Start Streaming : Démarrer / Stopper une diffusion
  • Start Recording : Démarrer / Stopper un enregistrement vidéo
  • Studio Mode : Un affichage alternatif de votre Canvas pour éditer les scènes tout en ayant un retour sur ce qui est diffusé
  • Settings : Pour gérer les différents paramètres d’OBS dont ceux réglés par l’assistant au 1er démarrage

Dans ma future émission je souhaite démystifier certains outils utilisés par les designers, présenter des techniques / tips pour simplifier notre quotidien (e.g. “Réaliser des tests utilisateurs à distance”) et pourquoi pas demain faire intervenir des contributeurs externes. Pour bien commencer, j’ai au minimum besoin de deux scènes :

Scène #1 — Pour affichage en plein écran ma webcam avec un léger habillage graphique (logo) :

  • J’ajoute une source Video Capture Device à l’aide du bouton “+” du panneau Sources
  • La caméra s’affiche sur mon canvas, j’utilise les poignées rouges pour déplacer / redimensionner la caméra dans ma scène
  • J’ajoute une source Image à l’aide du bouton “+”
  • Une fois sélectionnée sur mon ordinateur, l’image apparaît. Là encore je peux utiliser les poignées rouges pour déplacer / redimensionner l’image dans ma scène

Scène #2 — Pour partager mon écran avec un léger habillage graphique

  • Pour gagner je peux dupliquer ma première scène en choisissant l’action “duplicate” accessible en faisant un clic droit sur ma première scène.
  • Je redimensionne ma caméra pour l’afficher dans coin de l’écran
  • J’ajoute une source Display Capture à l’aide du bouton “+” et je sélectionne
  • Dans la liste des sources, je déplace la nouvelle source créée sous ma caméra et l’habillage graphique car une source qui figure au-dessus d’une autre source dans la liste sera au-dessus à l’écran et pourrait cacher ce qui se trouve en-dessous. Là encore, j’utilise les poignées rouges pour déplacer / redimensionner la caméra dans ma scène.

Je dispose à présent de deux scènes disponibles et je peux changer les réglages par défaut de mes transitions dans le panneau “Scene Transition”. Le résultat est automatiquement visible lorsque je sélectionne une scène dans le panneau “Scenes”. Dans mon cas j’ai choisi de faire un fondu sur 500ms. Voici ce vous devriez obtenir :

Pour plus d’informations sur l’interface d’OBS, les commandes avancées et les raccourcis : https://obsproject.com/wiki/OBS-Studio-Overview

Lancer son premier stream avec OBS

OBS intègre de nombreux réglages pré-définis pour diffuser du contenu en ligne (âmes sensibles s’abstenir puisqu’OBS est aussi une solution particulièrement appréciée des plateformes de streaming pour adulte…). Les réglages de diffusion sont accessibles dans l’onglet settings. Dans mon cas je vais m’intéresser à la diffusion sur Youtube pour lequel une seule information est nécessaire pour diffuser : Stream Key (ou “clé du flux” en Français).

Pour youtube, cette fameuse clé est disponible à l’URL suivante https://www.youtube.com/live_dashboard en bas de la page dans l’onglet “paramètres de l’encodeur”

Une fois cette information saisie dans OBS, je n’ai plus qu’à sauvegarder les réglages et à cliquer sur le bouton “Start Streaming” dans l’interface principale. Si tout s’est bien passé pour vous (c’est le cas pour moi), le stream devrait s’afficher au bout de quelques secondes sur Youtube. Pour réaliser vos premiers tests, je vous invite à changer la confidentialité de votre diffusion sur youtube ;-).

Youtube propose aussi de gérer un outil pour programmer vos prochaines diffusions. Ainsi, il est possible de créer un calendrier, de pré-configurer les prochaines émissions et de prendre rendez-vous avec sa communauté.

Pro tips — Pour aller plus loin, voici quelques ressources intéressantes que j’ai pu trouver :

  • Puisqu’aucun réglage natif n’existe pour diffuser en direct sur Instagram, Internet a une solution et il est possible de lancer un live sur Instagram en quelques minutes.
  • Pour ceux et celles qui utilisent un PC, en installant ce plugin vous pouvez utiliser OBS avec votre logiciel de visio conférence préféré.
  • Faire intervenir d’autres participants connectés à Skype dans votre live
  • Snap Camera pour appliquer les fameux filtres de Snapchat sur votre webcam
  • Des logiciels tiers sur ordinateur, tablette ou téléphone existent pour piloter à distance vos scènes dans OBS (exemple)
  • Des services tiers tels que Restream ou Switchboard peuvent être intégrés à OBS et vous permettent de diffuser sur plusieurs plateformes en même temps.

En cette période de confinement, on apprend tous à travailler d’une nouvelle manière, à distance. S’il y a bien une industrie qui souffre moins que les autres, c’est celle de jeu vidéo (on se demande pourquoi ;-) ). Particulièrement dans le monde du streaming, les processus de production sont depuis très longtemps pensés pour être flexibles et pouvoir s’adapter. C’est sans doute pour cette raison que la quasi totalité des streamers ont pu troquer leur studio d’enregistrement officiel pour une version “homemade” et poursuivre leurs activités sans interruptions.

J’espère que cet article vous aura prouvé qu’aller plus loin que l’organisation d’un simple webinar sur Zoom & co est un objectif tout à fait atteignable et qu’il ne tient qu’à nous d’imaginer de nouvelles façons de faire passer nos messages. Et surtout envoyez-moi un message si vous avez besoin d’un coup de main pour configurer votre streaming.

Il est temps pour moi de vous laisser, il faut que j’affine encore ma ligne éditoriale. D’ailleurs si des designers veulent participer à “Dessine moi un bouton”, n’hésitez pas.

--

--

Alexis Czornomaz
Five by Five

VP Product @fivebyfive by day, dreamer and product enthusiast by night !