10 Comments
Update du 23/03/16 : ce tuto commence à dater, je vais donc l’updater prochainement pour vous donner plus de features et d’exemples car le Twitch API v3 est sorti depuis pas mal de temps et j’ai beaucoup travaillé dessus, notamment sur un side-project que j’aimerais vous présenter, il s’agit de Audio Twitch, un service qui récupère le flux audio des Streams Twitch et qui vous permet donc de lire les flux en mode « audio-only » (utile pour écouter vos Talk shows favoris sans avoir la vidéo qui tourne ;)). Pour le découvrir, c’est par ici.

Introduction

Force est de constater que la plateforme de live streaming Twitch est en pleine forme aujourd’hui notamment grâce au – non surprenant – rachat de la firme Amazon pour la bagatelle de 1 milliard de dollars.
L’intérêt pour ce type de service étant de plus en plus grand, je m’y suis intéressé en profondeur et j’ai pas mal fouillé la Doc du Twitch API v2 et j’en ai créé un Script, qui deviendra ce Tutoriel après finitions.

Bref, je vais tenter ici de vous donner les clés pour comprendre le fonctionnement de cet API, assez simple mais complet, et surtout très accessible de part sa structure, le minimalisme étant de mise. On récupère les données en JSON, ce qui donne le moyen de récupérer pas mal d’informations utiles, comme les « Featured streams » (les streams en vedette consultables sur la homepage de Twitch.tv), une liste des Teams, des Chaînes, une recherche d’Utilisateurs, etc…

Présentation

Il y a en tout 8 liens intéressants retournant des datas au format JSON, mais j’ai choisi de ne pas inclure ceux nécessitant un jeton d’autorisation, car on peut déjà faire énormément de choses avec les six que voici :

  1. https://api.twitch.tv/kraken/teams : Affichage des teams, ou recherche d’une team par nom.
  2. https://api.twitch.tv/kraken/channels : Affichage de tout un tas de données concernant une chaîne spécifique (nom, ID, bio, vues, followers…).
  3. https://api.twitch.tv/kraken/games : Le top des jeux par vues, maximum 100.
  4. https://api.twitch.tv/kraken/users : Données concernant un utilisateur en particulier (nom, ID, bio, type…).
  5. https://api.twitch.tv/kraken/streams : Obtenir la liste des Streams et de nombreuses informations à leur propos, on reviendra dessus en profondeur car c’est le lien le plus important.
  6. https://api.twitch.tv/kraken/search : Obtenir la liste des Streams et de nombreuses informations à leur propos, on reviendra dessus en profondeur car c’est le lien le plus important.

On peut directement acquérir la liste de ces liens au format JSON en accédant à l’URL https://api.twitch.tv/kraken.

Création du code

On va commencer par créer une Class nommée « Twitch_API » qu’on l’utilisera pour toutes nos requêtes :

Ensuite, on va déclarer nos liens dans un Array pour les récupérer plus tard, via notre fonction « getAPI_URI » :

Cette fonction nous retournera donc un des liens proposés via la commande : $this->getAPI_URI(« type_de_lien« ) . C’est très simple, si je souhaite rechercher une Team, j’écris $this->getAPI_URI(« teams« ) et ça me retourne ceci :

https://api.twitch.tv/kraken/teams/

L’intérêt ? Si l’URL de l’API change, on aura uniquement besoin de changer le contenu de la variable $API_Base_URI.


Fonction pour récupérer la liste des Streams

On va commencer avec une fonction très simple qui va nous permettre de lister une dizaine de Streams, que l’on va nommer « getAPI_FeaturedStreams« . A l’intérieur de notre classe, on créé notre Fonction et on y ajoute un « file_get_contents » pour récupérer l’URL, puis un json_decode afin de décoder la chaîne JSON :

Ensuite on va créer un tableau qui va stocker les items récupérés, pour chaque boucle foreach on va les « pusher » dans ce dernier, envoyer le résultat avec « return $tableauItems » et finalement fermer la fonction :


Reçevoir et traiter les données

Maintenant que l’on a notre belle fonction getAPI_FeaturedStreams, il ne reste plus qu’à la lancer et traiter le résultat. On démarre en créant une nouvelle instance pour notre Classe « Twitch_API(); » avec l’opérateur « new » :

Dernier point : la réception des données sous la forme d’un tableau en spécifiant les objets souhaités.

On sonde donc cette adresse : https://api.twitch.tv/kraken/streams/featured?limit=2&offset=0

Ici je veux afficher 2 Streams (via le paramètre $limit), en commençant par le 1er de la liste (via le paramètre $offset) avec le nom (name), le nom affiché (display_name), la date de création (created_at), la date de la dernière mise à jour (updated_at), le logo (logo), le total des vues (views), le nombre de personnes qui regardent le stream (stream_viewers) etc… :

 

NB : Il y a bien plus d’objets à afficher dans mon script (25 au total) mais j’ai délibérément choisi de ne pas tous les afficher ici pour simplifier l’explication et éviter un code trop long.

La liste des Featured Streams va s’afficher de cette manière, explicitement très brut et donc facilement exploitable :

Liste Streams

Stream n°1

[status] => #TeamDianite / Mianite Livestream! – The Syndicate Project’s Official Twitch!
[display_name] => Syndicate
[name] => syndicate
[game] => Minecraft
[created_at] => 2010-10-17T23:19:43Z
[updated_at] => 2014-08-12T19:13:59Z
[logo] => http://static-cdn.jtvnw.net/jtv_user_pictures/syndicate-profile_image-85aae3735f907b7c-300×300.png
[url] => http://www.twitch.tv/syndicate
[views] => 18284905
[followers] => 881052
[preview_medium] => http://static-cdn.jtvnw.net/previews-ttv/live_user_syndicate-320×200.jpg
[stream_game] => Minecraft
[stream_viewers] => 59423

Stream n°2

[status] => Teaching the Game | EUW Solo Queue | S4/S3 NA Challenger | Q&A During Queue Times | Jungle Main |
[display_name] => Nightblue3
[name] => nightblue3
[game] => League of Legends
[created_at] => 2011-12-21T18:18:40Z
[updated_at] => 2014-08-12T16:40:36Z
[logo] => http://static-cdn.jtvnw.net/jtv_user_pictures/nightblue3-profile_image-84392d503a6dfdc6-300×300.png
[url] => http://www.twitch.tv/nightblue3
[views] => 58919015
[followers] => 471693
[preview_medium] => http://static-cdn.jtvnw.net/previews-ttv/live_user_nightblue3-320×200.jpg
[stream_game] => League of Legends
[stream_viewers] => 25909

 


Exemples

Vous pouvez maintenant utiliser ce script pour toutes sortes de projets, comme ce bout de Template WordPress de ma création :

Template WordPress Twitch API (live demo à venir)

Je vous propose maintenant une petite démonstration avec un plugin jQuery nommé Isotope avec sa gestion de photos et la création de filtres. Cliquez sur le bouton ci-dessous pour la consulter.

Démonstration

Et voilà ! Vous savez maintenant comment fonctionne le Twitch API. Il vous suffit désormais de reproduire le même schéma (à peu de choses près) pour les autres sections.

Rendez-vous sur mon GitHub pour récupérer le script, ou téléchargez l’archive zip directement ici.

Pour aller plus loin…

Lire la Documentation officielle : https://github.com/justintv/twitch-api  

Si vous êtes intéressés par la fonction Twitch Connect et d’autres features sympathiques, vous pouvez consulter le Twitch Javascript SDK, avec documentation et exemples à télécharger ici : https://github.com/justintv/twitch-js-sdk

Besoin de ressources graphiques pour illustrer votre projet ? Voici le pack d’assets officiel de Twitch :
https://www.dropbox.com/s/jg5143frhedakmb/Twitch_AllAssets.zip

Si vous avez questions à me poser ou des remarques à faire concernant ce petit tuto, n’hésitez pas à commenter ci-dessous.

Télécharger les fichiers

Voir sur Github

A propos de l'Auteur

Hadrien

Webdesigner & Développeur Freelance. Sound Designer, grand technophile et Gamer averti.

http://hadrien.co

  • Archaons92i

    Super TUTO ! merci 🙂

    • MrHadrien

      Merci à toi 🙂

  • thomas

    salut, moi je n’y comprend rien 🙁 j’aurai aimer savoir si vous pouviez me faire un exemple de bouton simple pour que les gens follow ma chaine via mon site et un widget pour afficher mon nombre de follower? si vous auriez des tutos dans se genre ou autre. j’étudie votre méthode mais je n’y arrive pas.. :/

    • MrHadrien

      Là tout de suite ça va être compliqué de vous créer un bouton de Follow car je n’ai pas trop le temps, navré.

      Regardez sur ce thread il y a la marche à suivre c’est plutôt simple : https://discuss.dev.twitch.tv/t/how-do-i-embed-a-follow-button/592/8

      Par contre attention, un bouton « Follow » comme sur Twitch implique que l’user soit authentifié à l’avance donc c’est un peu compliqué à mettre en place sur votre site car vous devriez demander à l’user de se logger via OAuth avant de cliquer sur « Follow » ce qui peut donc être très lourd et il y a un grand risque que l’utilisateur lâche l’affaire avant de cliquer sur votre bouton.

      Bonne chance,
      Hadrien

      • thomas

        entre temp j’ai su faire énormément de chose par contre donc merci de votre tuto 🙂 , pas de souci je vais lire votre post. merci beaucoup 🙂

        • MrHadrien

          Ok super, content d’avoir pu t’aider. Happy coding ! 🙂

  • Eric G

    Hello Hadrien c’est eric de l époque dcg, ce fut un grand plaisir de voir cet article bien référencé ! Félicitation pour la rédaction de l’article. J’ai cliquer par curiosité t’ayant reconnu du coup je n’ai même plus l’envie de passer faire un tour sur le board offi !

    • MrHadrien

      Hello Eric, tiens marrant de te voir passer par là ! Ah oui effectivement on tombe vite dessus sur Google 🙂 Je devrais le mettre à jour d’ailleurs car j’ai pas mal appris de trucs en créant http://audiotwitch.tv (c’est fait pour écouter les streams en audio-only), cet API est top il y a des tonnes d’infos à récupérer et à triturer.
      Amuses-toi bien !

  • Anthonyos33

    Bonjour, Juste pour corriger une petite erreur dans le sujet ! Twitch n’a jamais été racheté par Google mais par Amazon 😉 En effet Google a fait une proposition que Twitch a refusé 🙂 C’est pour cela que Google à lancé avec YouTube, YouTube Gaming pour concurrencer Twitch.

    • MrHadrien

      Ah effectivement, mea culpa, à l’époque j’avais effectivement la proposition de Google en tête…! Merci pour le retour, c’est corrigé 🙂