Streamez comme des pros

[et_pb_section admin_label= »section » transparent_background= »off » allow_player_pause= »off » inner_shadow= »off » parallax= »off » parallax_method= »on » custom_padding= »0px||1em| » padding_mobile= »off » make_fullwidth= »off » use_custom_width= »off » width_unit= »off » make_equal= »off » use_custom_gutter= »off » fullwidth= »off » specialty= »off » disabled= »off »][et_pb_row admin_label= »row » make_fullwidth= »off » use_custom_width= »off » width_unit= »off » use_custom_gutter= »off » padding_mobile= »off » allow_player_pause= »off » parallax= »off » parallax_method= »on » make_equal= »off » column_padding_mobile= »on » parallax_1= »off » parallax_method_1= »on » parallax_2= »off » parallax_method_2= »on » parallax_3= »off » parallax_method_3= »on » parallax_4= »off » parallax_method_4= »on » disabled= »off » custom_padding= »0px||| »][et_pb_column type= »4_4″][et_pb_text admin_label= »Intoduction » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

Ma curiosité m’a amené récemment à m’intéresser à la diffusion en direct. N’ayant jamais été très à l’aise avec la vidéo (coupes, mixs, montages…) et ses caractéristiques (encodage, encapsulage…) je me suis surpris à découvrir des techniques simples et qui requièrent peu de matériel, mais aussi tout un univers en développement.

Je me suis souvenu en premier lieu avoir un compte Twitch, créé à l’occasion de la sortie du jeu Wildstar pour regarder les directs organisés par les développeurs. J’avais bien compris que n’importe qui pouvait diffuser, sans jamais essayer de comprendre comment. En me connectant donc à nouveau, j’ai été perturbé de ne trouver nulle part un gros bouton pour commencer à streamer.
Figurez-vous que Twitch n’est qu’une plateforme de diffusion. Elle ne fournit pas d’outils, de logiciels pour capturer votre écran et l’envoyer à sa plateforme de diffusion, elle propose seulement de diffuser la vidéo en direct et quelques fonctionnalités comme un chat, un système de statuts, un lecteur HTML5, un compteur de vues…

Une petite recherche me mène à une liste de logiciels gratuits et payants. Je m’intéresse au seul qui soit gratuit et open source : OBS. En plus, il semble parfait pour débuter. Je l’installe, je clique un peu partout et en quelques minutes je diffuse Guild Wars 2, en direct depuis mon ordinateur vers Twitch.
Ma première diffusion est un peu bancale, il y a quelques ratés et je trouve que c’est assez lent sur Twitch, que ma vidéo est coupée régulièrement, ce n’est pas fluide (je suis branché à la fibre tout de même !).
Du coup, je me dis que le mastodonte qu’est YouTube doit bien proposer de faire du direct lui aussi ! Eh oui ! L’avantage, en plus de la fluidité, c’est que YouTube enregistre votre direct dans vos vidéos, ce qui permet de la visionner autant de fois que souhaité, même après que le direct est terminé.

Ensuite, je me dis que j’aimerais bien superposer des images, ajouter du texte, intégrer ma webcam… comme le font tous ces autres gamers. Je cherche des tutos vidéo sur YouTube. Je comprends qu’il est possible d’intégrer des sources (images, textes, vidéos) différentes pour les superposer, mais aussi qu’il est possible d’enregistrer la vidéo dans un fichier (avec la possibilité de ne pas du tout la diffuser en direct) et de le partager ensuite.

Une idée germe : je travaille sur un site et j’aimerais montrer son avancement, mais c’est toujours un peu compliqué de présenter un site par téléphone « sans avoir la main ». Souvent, notre interlocuteur clique partout et a du mal à suivre, car il est excité de découvrir son site.
Alors je me lance ! Comme c’est une première, je pars sur une vidéo simple : capture de ce qu’il se passe sur mon navigateur, accompagné de commentaires audio. J’ai donc fait ma vidéo en une seule prise, coupé les quelques passages trop longs ou ratés, j’ai envoyé ma vidéo sur YouTube en « non répertorié » et j’ai envoyé le lien à ma cliente.

Si le direct avait été programmé, j’aurais pu donner rendez-vous à mon/mes interlocuteur/rice(s) en leur envoyant un lien vers la page qui diffuse le direct, prévoir des temps-morts pour répondre aux questions écrites, etc. Cela ouvre un champ de possibilités incroyable : en ajoutant de multiples sources vidéos, cela permettrait de diffuser une interview en direct, ou une conférence, avec l’ajout d’un chat pour afficher des questions, des commentaires des spectateurs, des tweets avec un hashtag particulier… !

Après avoir relaté mon expérience personnelle, voici quelques conseils et astuces pour vous aider à vous lancer. N’hésitez pas, à la suite de cet article, à partager vos propres expériences et à me suivre sur Twitch ou YouTube !

[/et_pb_text][et_pb_text admin_label= »Plateformes de diffusion + clés de stream » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

Plateformes de diffusion

Avant de vous lancer dans l’installation et l’utilisation d’OBS Studio, il vous faut un compte sur la ou les plateformes que vous allez utiliser.

Clés de stream

Quand vous aurez votre compte, vous pourrez récupérer votre clé de stream, utilisée pour vous identifier sur ces plateformes. Voici comment les récupérer sur Twitch, YouTube et Restream.io.

Twitch

Lorsque vous êtes connecté(e), cliquez sur votre pseudo puis « Tableau de bord », ensuite sur l’onglet « Clé de flux », puis le bouton « Afficher la clé ». Cliquez sur « Je comprends » et vous verrez s’afficher la clé à utiliser pour OBS.

YouTube

Quand vous êtes connecté(e), cliquez sur votre avatar en haut à droite puis sur « Creator studio ». Dans le menu de gauche, cliquez sur « Diffusion en direct ». Au bas de cette page, dans la rubrique « Configuration de l’encodeur », cliquez sur le bouton « Afficher » en face du champ « Nom ou clé du flux ».

Restream.io

Toujours alors que vous êtes connecté(e), à gauche sur la page d’accueil sélectionnez le même serveur que celui que vous avez indiqué dans OBS (ou que vous indiquerez à OBS) et cliquez sur la case « Stream Key » pour afficher la clé en clair.

[/et_pb_text][et_pb_text admin_label= »OBS » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

Open Broadcaster Software

Téléchargez Open Broadcaster Software Studio pour Windows, Mac et Linux à cette adresse : obsproject.com.

Avant de vous lancer, voici quelques notions à comprendre.

[/et_pb_text][et_pb_image admin_label= »Image : OBS » src= »https://anthony-destenay.fr/wp-content/uploads/Capture-décran-2016-10-20-16.16.37.png » alt= »Interface d’OBS Studio » show_in_lightbox= »on » url_new_window= »off » use_overlay= »off » animation= »off » sticky= »off » align= »left » force_fullwidth= »off » always_center_on_mobile= »on » use_border_color= »off » border_color= »#ffffff » border_width= »1px » border_style= »solid » disabled= »off »] [/et_pb_image][et_pb_text admin_label= »OBS : fonctionnalités » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » inline_fonts= »Coming Soon » border_color= »#ffffff »]

1. Profil

Avant de commencer à modifier les paramètres, je vous invite à créer ou dupliquer un profil à partir du menu du haut. Ce profil conservera l’ensemble de votre configuration de « Fichier > Paramètres ».

Moi, par exemple, j’ai créé un premier profil pour Twich, un second pour YouTube et un troisième pour restream.io (j’y reviens plus bas). Vous pouvez ainsi choisir votre plateforme et indiquer votre clé de stream et définir des paramètres de vidéo et de son, différents en fonction de la plateforme que vous choisissez (ou si vous enregistrez directement sur votre disque dur).

2. Collection de scènes

Ces collections vous seront utiles si vous comptez faire différentes utilisations du logiciel ou si vous souhaitez diffuser différents jeux.

3. Scènes

Une scène est un ensemble de sources. Sur un plateau, chaque scène pourrait correspondre à une caméra.
Ces scènes vous demanderont un peu de travail et de réflexion avant de les créer : « qu’elles seront les types de configurations je souhaite utiliser ? ».

Pour ma part, j’ai créé 4 scènes pour mes sessions GW2 : « Intro », « Jeu », « Pause » et « Fin ». « Intro » est composé de textes qui expliquent en quelques mots l’objet du direct, d’un fond d’écran en rapport avec le jeu et de la source « masquée » de la fenêtre du jeu afin de conserver une musique d’ambiance. « Jeu » superpose mon avatar ainsi qu’un rappel de l’objet de la vidéo sur la fenêtre du jeu. Ces deux éléments me sont utiles aussi pour masquer en grande partie la fenêtre de chat du jeu. « Pause » n’est composé que d’une image (un quaggan [une sorte de gros crapaud bleu] dans un hamac) et d’une phrase. Et « Fin » est simplement une image et un texte de remerciement.

4. Sources

Elles sont multiples et diverses :

• BrowserSource : affiche la page d’un site via son URL (ça peut être une fenêtre de chat, une page web, une petite application web que vous avez développée en local pour afficher des tweets, etc.) ;
• Capture d’écran : capture l’ensemble de ce qui est affiché à l’écran ;
• Capture de jeu /de fenêtre ;
• Capture de l’audio entrant / sortant ;
• Diaporama (d’images) ;
• Image ;
• Périphérique de capture vidéo : utile pour incruster votre webcam, mais j’imagine aussi que la ou les caméras branchées sur votre ordinateur seraient aussi disponibles ici ;
• Scène : si par exemple vous créez une scène avec plusieurs sources que vous souhaitez utiliser dans différentes autres scènes ;
• Source média ;
• Source vidéo VLC ;
• Texte.

Notez que vous pouvez utiliser une même source dans plusieurs scènes, mais que cela ne créera pas des copies. C’est-à-dire que si vous modifiez une source qui se trouve dans deux scènes différentes, les modifications dans l’une des scènes seront répercutées dans l’autre scène.

5. Transition de scènes

Si vous n’activez pas le « Mode Studio » (dans la liste des boutons en bas à droite), lorsque vous cliquerez sur une scène différente de celle affichée, elle changera sur le direct avec l’effet de transition paramétré.

Si vous êtes en « Mode Studio », ce qui est affiché à gauche est ce qui sera affiché en direct (à droite) une fois que vous aurez cliqué sur la transition souhaitée.

[/et_pb_text][et_pb_divider admin_label= »Séparateur » color= »#ffffff » height= »20″ divider_style= »solid » divider_position= »top » divider_weight= »1px » hide_on_mobile= »on » disabled= »off »] [/et_pb_divider][et_pb_image admin_label= »Image : SteamPro » src= »https://anthony-destenay.fr/wp-content/uploads/Capture-décran-2016-10-20-16.31.16.png » alt= »Page d’accueil de streampro.io » show_in_lightbox= »on » url_new_window= »off » use_overlay= »off » animation= »off » sticky= »off » align= »left » force_fullwidth= »off » always_center_on_mobile= »on » use_border_color= »off » border_color= »#ffffff » border_width= »1px » border_style= »solid » disabled= »off »] [/et_pb_image][et_pb_text admin_label= »SteamPro » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

StreamPro

Ce site génère des pages web que vous utiliserez en les superposant à vos vidéos grâce à une source « BrowserSource ». Ces pages (« overlays » sur le site) sont composées d’images et de widgets (PayPal, Twitch…) que vous positionnez et personnalisez comme bon vous semble.

Voici une petite vidéo qui montre en quelques minutes comment fonctionne SteamPro :

[/et_pb_text][et_pb_text admin_label= »SteamPro : vidéo » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

[/et_pb_text][et_pb_button admin_label= »Bouton : Steam Pro » button_url= »https://streampro.io » url_new_window= »on » button_text= »StreamPro.io » button_alignment= »left » background_layout= »light » custom_button= »on » button_text_size= »16px » button_letter_spacing= »0″ button_use_icon= »default » button_icon_placement= »right » button_on_hover= »on » button_letter_spacing_hover= »0″ disabled= »off »] [/et_pb_button][et_pb_divider admin_label= »Séparateur » color= »#ffffff » height= »20″ divider_style= »solid » divider_position= »top » divider_weight= »1px » hide_on_mobile= »on » disabled= »off »] [/et_pb_divider][et_pb_image admin_label= »Image : Restream » src= »https://anthony-destenay.fr/wp-content/uploads/Capture-décran-2016-10-20-17.00.11.png » alt= »Page d’accueil de restream.io » show_in_lightbox= »on » url_new_window= »off » use_overlay= »off » animation= »off » sticky= »off » align= »left » force_fullwidth= »off » always_center_on_mobile= »on » use_border_color= »off » border_color= »#ffffff » border_style= »solid » disabled= »off »] [/et_pb_image][et_pb_text admin_label= »Restream.io » background_layout= »light » text_orientation= »left » use_border_color= »off » border_style= »solid » disabled= »off » border_color= »#ffffff »]

Restream.io

Rapidement, je me suis demandé comment il était possible de diffuser en direct sur plusieurs plateformes. En effet, dans les paramètres d’OBS Studio il est possible d’indiquer une clé de stream pour seulement une seule plateforme uniquement (même si vous créez plusieurs profils). Après quelques recherches, j’ai trouvé ce site, qui propose de rediffuser (d’où le nom, restream) sur plusieurs plateformes. Dans le principe, vous diffusez vers Restream.io et il s’occupe du reste. Bien sûr, il faut au préalable vous inscrire et renseigner les clés de stream de chaque plateforme que vous utiliserez.

Ce service est gratuit dans la limite d’un canal par plateforme et si vous n’utilisez pas de canal personnalisé (ou une plateforme qui ne serait pas dans la liste).

Restream.io propose aussi d’autres fonctionnalités intéressantes comme de pouvoir changer les titres de ses streams en un clic, de publier un message personnalisé sur Facebook et Twitter à chaque nouvelle diffusion ou encore un chat connecté aux différentes plateformes disponibles.

[/et_pb_text][et_pb_button admin_label= »Bouton : Reastream » button_url= »https://restream.io » url_new_window= »on » button_text= »Restream.io » button_alignment= »left » background_layout= »light » custom_button= »on » button_text_size= »16px » button_letter_spacing= »0″ button_use_icon= »default » button_icon_placement= »right » button_on_hover= »on » button_letter_spacing_hover= »0″ disabled= »off »] [/et_pb_button][et_pb_divider admin_label= »Séparateur » color= »#ffffff » height= »20″ divider_style= »solid » divider_position= »top » divider_weight= »1px » hide_on_mobile= »on » disabled= »off »] [/et_pb_divider][et_pb_text admin_label= »Photo copyright » background_layout= »light » text_orientation= »left » text_text_color= »#bdc3c7″ use_border_color= »off » border_color= »#ffffff » border_style= »solid »] Photo : Broadcast 2007, Juan Jiménez Martínez | flic.kr/p/3X1VEQ | Licence CC BY-NC-SA 2.0 [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]