Afficher un Live Twitch sur WordPress

 

Pour résumer : ne touchez pas aux extensions WordPress qui proposent d’afficher un live Twitch. En tout cas à ce jour (fin août 2018), aucun n’est fiable : nombreux sont ceux qui ne fonctionnent tout simplement pas, et le seul qui fonctionne occasionne une surcharge du serveur en faisant des appels continus auprès de l’API twitch pour connaître l’état des streams.

Reste donc la solution maison !

L’intégration à WP passe par du html et du javascript. Si vous voulez intégrer le stream à une barre de widget, vous aurez besoin d’un widget de html basique. Sinon ça peut-être imaginé sur un article ou une page.

Ensuite, le code à intégrer.

Pour quelque chose de très basique qui se contente d’afficher le stream quelque soit son état (connecté ou non), on peut se contenter de ça :

<div id="twitch-embed"></div>
<script src="https://embed.twitch.tv/embed/v1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" </script> <script> new Twitch.Embed("twitch-embed", { width: 250, height: 140, channel: "nofrag_official", layout: "video" }); </script>

Avec ça, vous affichez le stream de Nofrag, sans la zone de chat, dans une zone de 250 par 140. Ça conviendra parfaitement si vous n’avez aucun soucis avec le fait d’afficher le stream même s’il est déconnecté.

Chez Nofrag on a voulu aller un peu plus loin en affichant autre chose que le stream lorsqu’il n’est pas connecté.

Pour cela vous avez besoin d’un jeton d’accès à l’API twitch, que vous pourrez créer à partir de https://dev.twitch.tv/ puis en créant une « App ». Vous aurez alors un identifiant client, qui servira par la suite.
Le code à insérer :

<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="twitch-embed"></div>
<script>
$.getJSON('https://api.twitch.tv/kraken/streams/nofrag_official?client_id=<IDENTIFIANT_CLIENT>', function(channel) {
if (channel["stream"] == null) {
/* le channel est déconnecté, je définis ce que je vais
 afficher dans le div "twitch-embed". Ici, on appelle
 une iframe avec un petit widget qui indique l'état du stream Nofrag,
 mais on pourrait afficher une image, tout simplement.*/
$('#twitch-embed').html('<iframe src="https://svinkle.github.io/twitch-tv-widget/?username=nofrag_official" width="100%" height="64" frameborder="0" allowtransparency="true"> </iframe>');
} else {
// le channel est connecté, j'affiche le stream de Nofrag
new Twitch.Embed("twitch-embed", {
width: 250,
height: 140,
channel: "nofrag_official",
layout: "video"
});
}
});
</script>

Cette solution permet de ne pas faire reposer l’appel à Twitch sur le serveur mais sur le navigateur de l’utilisateur. On pourrait aller plus loin en interrogeant régulièrement l’API twitch par javascript sans avoir à rafraîchir la page, mais en ce qui nous concerne, nous n’en avons pas ressenti le besoin.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.