Comment ajouter du streaming à votre site Jamstack en quelques minutes

La semaine dernière, j'ai eu le plaisir d'être sur le flux en direct de mon pote Todd Sharp, Streaming on Streaming. Vous pouvez regarder l'enregistrement de cette session ici :

Todd est le principal défenseur des développeurs d'Amazon Interactive Video Service (IVS), ou, plus simplement, d'un moyen de prendre l' incroyable puissance de la plate-forme Twitch et de la mettre entre vos mains. IVS vous offre :

• La possibilité de créer des canaux pour votre contenu.

• Plusieurs façons de diffuser votre contenu, du Web à des outils plus puissants comme OBS.

• Plusieurs façons d'afficher votre contenu, y compris un SDK Web assez simple.

• Rapports super détaillés.

• Et des intégrations profondes dans le flux qui permettent des choses comme les transcriptions, la modération de chat basée sur Lambda, et plus encore.

  
  

Il s'agit d'un service commercial, mais comme à peu près tout dans AWS, il existe un niveau gratuit qui vous permet de tester les choses et de voir si cela a du sens pour vous.

Lors de la session que j'ai eue avec Todd, il voulait mettre sa propre documentation et sa propre console à travers une "première expérience de développeur". Donc, tout d'abord, penser et se soucier vraiment de l'expérience initiale du développeur avec votre produit est probablement l'une des choses les plus importantes que vous puissiez faire.

Je sais que dans ma propre carrière de défenseur des développeurs, il m'est presque impossible d'essayer quelque chose de nouveau sans constamment examiner et commenter l'intégration des développeurs. Todd mérite un respect fou pour avoir fait ça en direct sur son stream.

Je suis un peu connu pour casser des choses, faire des choses mal et être généralement votre pire cauchemar en matière de DX, donc c'était assez courageux de sa part.

(Et pour être clair, nous n'avons rien planifié à l'avance de ce flux. Je n'ai rien reçu à l'avance, et la seule véritable connaissance que j'avais était la lecture de ses articles de blog et sa conversation générale.)

Comme vous pouvez l'imaginer, quelque chose comme "lancer votre propre IVS" va être très complexe, mais au cours de notre session d'une heure, nous avons configuré ma chaîne, j'ai diffusé à partir d'OBS et d'un outil Web et j'ai pu créer un simple page Web pour afficher le flux.

J'ai pensé que je partagerais ici certains des points forts de cela, car l'idée de prendre en charge le streaming dans le Jamstack semble incroyablement convaincante. Ce sera un peu de haut niveau, mais les documents sont assez complets et vous donneront plus de détails sur les détails.

Vous voudrez également commencer avec le guide de démarrage .

Dans cet esprit, voici un aperçu de la simplicité de démarrage.

Première étape - Obtenez AWS

Je vais juste sauter ça. Je veux dire, je suppose que je ne suis pas comme je l'appelle, et vous ne devriez jamais rien supposer, mais comme un grand pourcentage de personnes utilisent déjà AWS, je suppose que vous avez déjà un compte.

J'ai fait et utilisé ma racine, mais si vous suivez le lien de démarrage que j'ai partagé ci-dessus, ils vous ont configuré un utilisateur avec un accès plus restreint, ce qui est la bonne chose à faire, et nous faisons toujours la bonne chose en technologie. Hum.

Deuxième étape - Créez votre chaîne

La prochaine chose que vous ferez est de définir un canal dans la partie IVS de la console AWS :

Pour rappel, la boîte de recherche sur tox d'IVS fait un très bon travail pour trouver des choses. AWS peut être un peu écrasant, mais leur recherche a rendu les choses beaucoup plus faciles ces derniers temps.

Je suppose que la plupart des gens connaissent le streaming et ont l'idée de base d'une chaîne, mais si je devais commencer à diffuser, je n'aurais probablement qu'une seule chaîne pour moi.

Si je voulais ajouter le streaming au site Web de mon entreprise, je pourrais imaginer avoir un canal pour des choses comme la formation, les événements externes, etc.

Au strict minimum, un canal est nécessaire. Lors de la création d'une nouvelle chaîne, le strict minimum est le nom :

Notez que l'une des options stocke automatiquement les flux sur S3. Je n'ai pas activé cela sur le stream avec Todd, mais c'est vraiment bien que ce soit aussi simple à activer. Évidemment, il y aura un coût pour stocker de gros fichiers vidéo, mais j'apprécie à quel point il est simple de l'activer.

Troisième étape - Déterminez votre diffuseur

Les documents de démarrage concernant la configuration de votre couverture de streaming à l'aide de leurs SDK, OBS Studio ou FFmpeg. J'ai utilisé OBS Studio dans le passé, donc pendant le stream avec Todd, je l'ai utilisé. Je préviens les gens cependant que si vous ne l'avez jamais utilisé auparavant, cela peut être assez écrasant.

C'était définitivement pour moi (diable, je sais encore à peine ce que je fais).

Au lieu de cela, permettez-moi de partager une autre option que Todd a partagée avec moi plus tard dans le flux, stream.ivs.rocks . Il s'agit d'une solution de streaming basée sur le Web que vous pouvez utiliser pour tester IVS.

Ouvrez la page dans votre navigateur (notez qu'il est indiqué qu'Edge n'est pas pris en charge, mais je n'ai eu aucun problème avec), et cliquez sur l'icône d'engrenage pour accéder à vos paramètres. Vous voudrez spécifier votre "point de terminaison d'ingestion" et votre "clé de flux", que vous pouvez trouver dans la console AWS dans les détails de votre canal.

Ne commettez pas la même erreur que moi - le "serveur d'ingestion" n'est PAS le même que le "point de terminaison d'ingestion", vous voudrez ouvrir et développer "Autres options d'ingestion" pour voir cela.

Une fois que vous avez fait cela, vous pouvez cliquer sur le bouton "Démarrer la diffusion" ci-dessous, et littéralement, c'est tout ! Bien que ce ne soit pas quelque chose que vous feriez pour un "vrai" flux, c'est beaucoup plus simple et plus rapide à configurer.

Une fois que vous diffusez, revenez à la console AWS, cliquez sur "Chaînes en direct", et vous pourrez voir votre flux en action :

Si vous accédez aux détails de la chaîne, elle y est également affichée :

Au fait, là-bas et à l'avenir, vous pouvez voir les flux passés et toutes sortes de mesures intéressantes sur le flux.

Une grande partie de cette terminologie utilisée ne m'est pas familière, c'est donc quelque chose à garder à l'esprit si vous êtes nouveau dans le streaming (et c'est quelque chose que j'ai partagé avec Todd en guise de retour), mais si vous aimez les statistiques, AWS vous couvre.

Quatrième étape - Le front-end

En fait, la visualisation du flux nécessite de déterminer où vous allez le faire. Étant donné que je suis un gars du Web, et que cet article concerne le fait de le faire sur le Jamstack, le guide Web sur leur documentation est l'endroit où vous voudriez aller ensuite. Encore une fois, la mise en œuvre initiale peut être très simple.

Voici une implémentation complète :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

Décomposons-le. Vous avez une balise de script en haut du chargement de leur SDK. Ensuite, j'ai mon HTML avec les éléments importants étant la balise <video> et mon CSS pour le dimensionner correctement.

Le JavaScript crée une instance de IVSPlayer et l'attache au DOM. La valeur pbURL provient de la configuration du canal AVS :

Et le voici en action !

Maintenant, avant de devenir trop excité, notez qu'il s'agit du code le plus simple que vous puissiez utiliser, mais qu'il n'est pas très à l'épreuve des balles, en fait, et vous le rencontrerez certainement lors des tests, si vous ne diffusez pas, vous obtenez une erreur en essayant pour charger le flux. Cela a tout à fait du sens, donc un meilleur code gérerait cela.

J'ai jeté un coup d'œil rapide à la référence Web et je vois la prise en charge des événements, vous devriez donc pouvoir l'écouter pour un début de flux; soit charger à ce stade, soit faire quelque chose dans le DOM pour informer la personne qui consulte la page Web qu'un flux a commencé.

C'est ça!

Ok, bien sûr, ce n'est pas très digne de la production, mais j'ai littéralement fait réaliser une solution de streaming en une heure. Maintenant, ce ne sera pas gratuit, donc c'est quelque chose à garder à l'esprit, mais je suis vraiment époustouflé par la rapidité avec laquelle vous pouvez démarrer, ainsi que par la puissance que vous obtenez hors de la boîte.

Et avec AWS qui gère tout, c'est un excellent choix pour le Jamstack. Il existe des API basées sur le serveur que vous pourriez également intégrer, et c'est là que j'utiliserais quelque chose comme Netlify Functions.

Donc encore une fois - consultez les docs . Il va y avoir beaucoup à digérer, mais il y a beaucoup plus là-bas que ce que j'ai abordé ici.

Ensuite, consultez les messages de Todd sur dev.to , où il a partagé un tas d'exemples. Plus récemment, il a fait la démonstration d'un chat vidéo multi-hôtes en temps réel dans le navigateur , puis a poursuivi avec un exemple d' hôtes multiples et de diffusion en direct, encore une fois le navigateur .

Ses messages impliquant le chat et le pouvoir que vous avez de modérer sont mes préférés, je pense. Je recommanderai également celui qu'il a écrit sur la création de votre propre station de radio "LoFi" comme étant particulièrement cool.