Construire une chaîne interactive avec AWS

Cet article a été co-écrit par Emmanuel Joubard Directeur des opérations, Guillaume Lemaire Technical Leader chez 42c en collaboration avec Roland Duboue Solutions Architect Media & Entertainment et Hana Attia Solutions Architect dans les équipes Partner Solutions Architect d’AWS France.

Fin 2022, 42c et la société de production Tagada Agency diffusaient une chaine de télévision éphémère pour affirmer et démontrer que chaque marque peut créer son propre média, en utilisant les émissions en direct combiné à de l’interactivité, augmentant ainsi la participation et l’immersion des spectateurs à cet événement.

La chaine proposait huit heures de direct, traitant de thématiques diverses comme une émission de talkshow dont le sujet était : Pourquoi créer son propre média quand on est une marque ? L’alternance avec des fictions et des jeux ont permis de promouvoir les marques présentes lors de cette journée.

Au-delà du flux de streaming, les spectateurs avaient accès depuis leur interface web à des contenus complémentaires en lien avec les thèmes évoqués durant les talkshows et la possibilité au travers d’un QR Code d’accéder à une plateforme e-commerce pour acheter un produit présenté.

Les interactions offertes

Le chat

Une des interactions mise en place pour que les spectateurs puissent réagir en direct fut le chat, celle-ci a permis au public de poser des questions, de donner des remarques et leurs ressentis en direct. La modération de ce chat a été réalisé par un assistant d’édition qui a utilisé l’interface de modération mise en place par 42c.

Le jeu interactif

Pour animer cette journée, un jeu nommé le quiz des marques a été mis en place. La mécanique du jeu tournait autour d’un quiz où les candidats étaient questionnés sur la connaissance des marques et leurs particularités. Grâce à l’interface web et à l’ajout de bouton de réponse, le public a pu jouer en même temps que les candidats.

A la fin de la journée, le meilleur joueur internet fut mentionné à l’antenne.

Les sondages

Durant les directs, des sondages en lien avec les sujets traités ont été soumis aux spectateurs qui, par leurs réponses, ont pu étayer les débats. Le résultat des sondages a été diffusé sous forme de graphique.

L’accès au e-commerce

Un QR code était présent en bas à gauche de l’interface web. Il permettait aux spectateurs d’acheter en ligne le produit présenté lors de l’émission.

Ce QR code changeait en fonction du produit à valoriser.

Les informations complémentaires

En complément des interactions, sur l’interface web était affiché le nombre de spectateur regardant le direct, les logos des partenaires de la journée, des publicités en boucle, le programme à venir et un bouton permettant d’afficher dans une nouvelle fenêtre la liste des programmes de la journée.

Le carrousel d’information web

Pour ajouter une dimension informative, un carrousel de liens cliquables sous l’écran du direct affiche des éléments graphiques afin de diriger le spectateur vers des sites internet détaillant les propos diffusés ou donnant le profil LinkedIn de la personne interviewée.

Toutes ces interactions et informations complémentaires étaient gérées manuellement et en direct par deux opérateurs, un assistant d’édition et un opérateur technique afin d’être au plus près de l’événement en direct.

Capitalisation de la journée par la Vidéo On Demand

Pour capitaliser sur les émissions diffusées en direct, celles-ci étaient converties tout au long de la journée pour être rapidement accessibles en vidéo à la demande.

La technologie

Architecture et développement de l’application

Sur le plan technique, le front-office comme le back-office ont été développés en React, une technologie légère et flexible. L’infrastructure AWS a été réalisée en infrastructure as code via AWS CloudFormation avec une approche serverless. Cela nous a permis de profiter de l’élasticité du cloud d’AWS tout en offrant la possibilité de déployer autant de chaines souhaitées en quelques minutes et ainsi d’assurer une continuité dans le développement et l’intégration. La solution repose sur une architecture en micro-services autonomes, chaque micro-service appelant un élément et répondant à une demande particulière.

Nous décrivons ensuite les grandes fonctionnalités de l’application.

Les interactions

Grâce à Amazon Interactive Video Service (IVS), 42c propose une couche d’interactivité rendant l’expérience du spectateur plus engageante.

Pour gérer les événements : deux possibilités. Des tags ID3 (métadonnées) sont insérés dans les flux vidéo et sont synchronisés par le navigateur web de l’utilisateur, qu’il s’agisse d’une réponse à un quizz ou de l’ouverture d’une fenêtre pop-up. Il est aussi possible d’envoyer d’autres événements comme le changement de logo ou le nombre de vues via le protocole WebSocket d’Amazon API Gateway.

La gestion du chat est, elle, assurée depuis IVS Chat. Ce dernier est le service de discussion instantanée intégré directement à IVS. Chaque chaîne IVS peut ainsi avoir son propre chat et ses propres utilisateurs. Niveau sécurité, chaque message envoyé par une personne a un statut « En attente » par défaut et doit être modéré par un assistant d’édition. Ce dernier pourra le valider, ou au contraire, le masquer depuis l’interface dédiée dans le back-office.

Grâce à du polling (envoie d’une même requête à intervalle régulier), les messages ainsi autorisés étaient affichés quasi instantanément pour le spectateur.

La plateforme de VOD

Parmi ses avantages, IVS offre la possibilité d’enregistrer automatiquement les diffusions dans un espace de stockage Amazon S3 (Simple Storage Service).

Aussi, la gestion de la vidéo à la demande est effectuée en temps réel. Grâce au service Amazon EventBridge, nous pouvons écouter les évènements émis par le service IVS et ainsi déterminer à la seconde quand un nouvel enregistrement a été sauvegardé.

A ce moment-là, nous pouvons déclencher l’exécution d’une fonction AWS Lambda, un service d’exécution de code serverless, pour la répertorier dans une base de données Amazon DynamoDB. Dans l’interface du back-office, un éditeur peut alors la visualiser et la modifier afin d’en créer des « clips », des vidéos plus courtes (grâce à une autre fonction Lambda). Il peut alors la rendre visible pour les spectateurs dans la page VOD.

Dès que le spectateur apprécie un contenu, il peut l’enregistrer dans ses favoris.

L’identification des spectateurs et la recommandation

L’authentification des utilisateurs et la gestion des identités sont assurées par Amazon Cognito. Pour la gestion des droits d’accès, un jeton est envoyé à l’API Gateway qui accepte ou non de délivrer le service en fonction du profil utilisateur.

Enfin pour gérer la data, chaque base est reliée à Amazon Kinesis Data Firehose qui charge des flux de données en temps réel dans des entrepôts de données ou des services analytiques. L’exploitation de ces données permet de savoir quel utilisateur a vu quel programme et a généré quelle interaction. La solution utilise également Amazon Athena, un service de requête interactif serverless qui facilite l’analyse des données.

La gestion du flux video

Le Pop-up Channel est à la base composé d’un flux vidéo fourni par Tagada Agency et peut alterner des programmes live ou préenregistrés. Ce flux vidéo est envoyé sous format RTMP dans le service AWS IVS qui se charge alors d’y ajouter sa couche d’interactivité.

L’avantage qu’offre IVS par rapport à AWS Elemental MediaLive est la sortie en « Low Latency HLS », une sortie en faible latence qui nous permet d’avoir un temps d’attente entre la captation de l’image et la réception de celle-ci par le spectateur réduit à quelques secondes.

Le future de la popup channel

Le futur de la Pop Up channel va passer par la reconnaissance dans l’image réalisé avec le service Amazon Rekognition.

On l’utilisera, pour reconnaitre des objets pendant l’émission afin de donner une dimension technologique et informative supplémentaires, les téléspectateurs pourront obtenir des informations supplémentaires sur les gadgets et les produits technologiques présentés, tout en fournissant des données utiles pour l’analyse post-émission.

Actuellement nous avons bien avancé sur les phases d’apprentissages de notre IA, elle connait très bien le logo de 42 consulting !