Développeurs : distribuez vos vidéos au plus grand nombre avec Amazon Elastic Transcoder et Amazon CloudFront

Par :
Pierre Gilot
jeu, 30/10/2014 - 16:33
Niveau :
Avancé

Dans cet article, nous verrons donc comment distribuer efficacement et simplement ces médias, et en particulier les vidéos.

Introduction

Après la création de votre site web proposant un service de stockage de vos médias vous pourriez souhaiter y ajouter des fonctionnalités supplémentaires comme, par exemple, la distribution de vidéos au plus grand nombre et leur visualisation sur tous les terminaux : ordinateurs ou PC, mobiles et tablettes. En effet, il faut pouvoir proposer aux utilisateurs finaux une expérience optimale où qu’ils soient, à toute heure de la journée et quel que soit le terminal utilisé.

Dans cet article, nous détaillerons les points suivants :

  • comment réencoder les vidéos reçues en des formats lisibles par la majorité des terminaux ;
  • comment mettre en œuvre un CDN (Content Delivery Network) pour la distribution optimisée des vidéos dans le monde entier.

Pour cela, nous allons utiliser d’autres services Amazon Web Services :

  • Amazon Elastic Transcoder sera employé pour réencoder les vidéos à réception ;
  • le service Amazon Cloudfront sera mis en œuvre, en tant que CDN, pour distribuer et mettre en cache les vidéos.

Toutes les informations figurant dans le présent article (y compris les éléments de code) sont mises à disposition à des fins strictement pédagogiques. Nous vous recommandons fortement de ne pas utiliser les éléments de code présentés dans l'article sans modification, comme la personnalisation et l'ajout d'éléments de sécurité. Il convient, en effet, de rappeler qu’Amazon Web Services propose un modèle de responsabilité partagée où AWS assure la sécurisation des couches basses (bâtiments physiques, réseaux, virtualisation…) – et où le client est responsable de la sécurité de son application, comme dans l'exemple que nous allons passer en revue aujourd'hui.

Convertir des medias avec Amazon Elastic Transcoder

Amazon Elastic Transcoder est un service de transcodage (un convertisseur) de fichiers multimédias dans le cloud. L'architecture de ce service est prévue pour traiter un grand nombre de fichiers multimédias et des fichiers volumineux. Les pipelines de transcodage permettent d'exécuter plusieurs transcodages en parallèle. Ce service est donc élastique et permet aux développeurs de « transcoder » des fichiers multimédias d'un format source vers un format lisible par des appareils tels que les smartphones, les tablettes et les ordinateurs. Enfin, à l'instar des autres solutions Amazon Web Services, il est économique, puisque la tarification d’Amazon Elastic Transcoder se fait en fonction des minutes de vidéo à transcoder et de la résolution souhaitée pour le contenu transcodé.

Avec Amazon Elastic Transcoder, le transcodage se fait en deux étapes. Dans un premier temps il faut créer un pipeline qui va définir le bucket Amazon S3 d’entrée (là où se trouvent les fichiers à transcoder), le bucket Amazon S3 de sortie (où seront déposés les fichiers transcodés) et la façon d’obtenir les vignettes des vidéos transcodées. Dans un deuxième temps, l’opération de transcodage se fait par la création d’un Job dans lequel on définira les paramètres spécifiques pour transcoder chaque vidéo.

A chaque upload de fichier vidéo dans notre application, il faudra créer un nouveau Job pour transcoder la vidéo, chaque nouveau Job sera ajouté dans le Pipeline définit plus tôt afin d’être exécuté.

Pour créer votre pipeline, saisissez la commande suivante :

> aws elastictranscoder create-pipeline --name mon-application-pipeline --role arn:aws:iam::123456789012:role/Elastic_Transcoder_Default_Role --input-bucket <BUCKET_ORIGINE> --content-config file://mon-application-pipeline-content-config.json --thumbnail-config file://mon-application-pipeline-content-config.json --notifications Progressing="",Completed="",Warning="",Error="" --output table

Notez bien le résultat de la commande et en particulier l’Id du pipeline qui est nécessaire pour lancer les jobs d’encodage.

Vous pouvez vérifier la bonne exécution de votre commande dans la console d’administration :

Maintenant que le pipeline est créé, nous allons pouvoir lancer des jobs de transcodage à la volée directement à chaque Upload de fichier Vidéo dans Amazon S3. D’ailleurs, si vous avez testé l’application à ce point, vous aurez certainement remarqué qu’à la fin du téléchargement, l’application web vous retourne une page de succès comme ceci :

En effet, lorsque l’Upload est terminé, Amazon S3 vous renvoie vers la page de votre choix (ici l’URL /uploadsuccess) qui vous permet d’effectuer des actions à la suite d’un upload réussi.

Il suffit donc d’ajouter un hook à notre application lors du redirect vers l’URL /uploadsuccess pour lancer un job de transcodage. Ceci est fait en modifiant notre application :

// GET /uploadsuccess

//   handles S3 notification when the upload is finished :

//   calls the createJob method to start two encoding jobs

app.get('/uploadsuccess', ensureAuthenticated, function (req, res){

  createJob(req.user, req.query.key, function(err, data) {

    if (err)

      res.send(500, err);

    else

      res.redirect('/');

  })

});

Le but de la fonction createJob est de lancer deux jobs de transcodage : un premier job pour un encodage HLS à 400kbps et un deuxième à 1Mbps assortis d’une playlist M3U8 globale (nommée main.m3u8). Cela permettra aux utilisateurs finaux d’effectuer du bitrate variable (visualiser le flux à 400kbps ou le flux à 1Mbps à un moment donné) en fonction des capacités de leurs terminaux et de leurs connexions réseaux. Une fois les jobs terminés, les fichiers résultants sont stockés dans le même bucket Amazon S3 que les fichiers d’origine, mais dans un sous-répertoire out.

Lorsque les jobs d’encodage sont lancés, l’utilisateur est redirigé vers la page d’accueil du site. Il ne reste plus qu’à modifier la vue views/index.hjs pour y lister les adresses des fichiers m3u8 présents dans le répertoire out du bucket où sont stockées les vidéos.

Vous pouvez aussi ajouter une page de consultation disposant d’un lecteur de médias capable de présenter la vidéo transcodée dans une fenêtre disposant de contrôles. A ce titre, le player OpenSource JWPlayer peut être facilement intégré dans vos pages web : vous pouvez consulter la documentation à cette adresse : http://www.jwplayer.com/. Une page exemple est fournie dans le tutoriel associé à cet article.

Une fois fait, vous pouvez publier vos modifications directement sur AWS Elastic Beanstalk :

> git add .; git commit -am "file transcode"; git aws.push

A ce stade, notre application peut maintenant :

Authentifier des utilisateurs grâce à la fédération d’identité ;

Autoriser les utilisateurs identifiés à uploader des fichiers vers un bucket Amazon S3 ;

Lancer des Jobs de transcodage dont les résultats sont stockés dans un bucket Amazon S3 ;

Lister les vidéos transcodées sur la page d’accueil.

La seule chose qui reste à ajouter à cette application est la capacité de délivrer les vidéos dans le monde entier avec un haut niveau de performances. C’est l’objectif du prochain chapitre dans lequel nous allons faire usage du service Amazon Cloudfront.

Diffuser un site web et ses médias avec Amazon Cloudfront

Amazon CloudFront est un service Web de diffusion de contenu. Il s'intègre aux autres services Amazon pour permettre aux développeurs de distribuer facilement du contenu aux utilisateurs finaux avec une faible latence, des vitesses de transfert de données élevées et aucun engagement.

Amazon Cloudfront est non intrusif : aucune modification de l’application développée jusqu’ici ne sera nécessaire. Seule la distribution Amazon Cloudfront sera à créer via les utilitaires lignes de commande ou via la console.

> aws cloudfront create-distribution --distribution-config file://mon-application-distribution.json

Le fichier mon-application-distribution.json est un simple fichier texte au format JSON décrivant les attributs de la distribution Amazon Cloudfront. Il se présente comme ceci (extraits) :

. . . .

        "Origins": {

            "Items": [

                {

                    "CustomOriginConfig": {

                        "OriginProtocolPolicy": "match-viewer",

                        "HTTPPort": 80,

                        "HTTPSPort": 443

                    },

                    "Id": "site-web-de-mon-application",

                    "DomainName": "https://12345789abcde.elasticbeanstalk.com/"

                }

            ],

            "Quantity": 1

        },

      . . . .

        "DefaultCacheBehavior": {

            "TargetOriginId": "site-web-de-mon-application",

            "ViewerProtocolPolicy": "https-only",

            "ForwardedValues": {

                "Cookies": {

                    "Forward": "all"

                },

                "QueryString": true

            },

     . . . . .

            "MinTTL": 0

        },

        "CallerReference": "mon-application-distribution",

        "ViewerCertificate": {

            "CloudFrontDefaultCertificate": true

        },

    . . . .

Les extraits visibles dans l’encart précédent indiquent que la distribution Amazon Cloudfront distribuera les pages HTML du site beanstalk créé précédemment (URL AWS Elastic Beanstalk de la forme 123456abcdef.elasticbeanstalk.com)

Pour vérifier la bonne exécution de votre commande vous pouvez vérifier dans la console AWS que la distribution a été créée :

Vous retrouverez bien :

1 – le nom de domaine de la distribution Amazon Cloudfront qui a été créée ;

2 – le nom de domaine de notre application AWS Elastic Beanstalk qui a été mise en œuvre au fil des articles de cette série.

ATTENTION : pour distribuer un site sécurisé http avec Amazon Cloudfront il vous faudra vous munir d’un certificat SSL valide. En effet, pour des raisons de sécurité, Amazon Cloudfront s’assure de distribuer un contenu garanti par un certificat SSL : si vous utilisez un certificat auto-signé, par exemple, Amazon Cloudfront refusera de distribuer le contenu associé.

Enfin, pour tester le bon fonctionnement de votre distribution, saisissez le nom de domaine de la distribution Cloudfront (1) dans votre navigateur :

et pour vérifier que les vidéos sont visibles depuis un terminal mobile : 

Félicitations ! Vous avez lancé votre premier site de partage de vidéos en ligne !

A vous de jouer !

Pour ceux d’entre vous qui souhaitent déployer ce site eux-mêmes, un tutoriel complet est disponible à l’adresse suivante : http://bit.ly/awsmedia2. Il vous suffira de créer votre propre compte AWS pour déployer les ressources nécessaires et de suivre les instructions données. Vous aurez ainsi accès à l’intégralité du code source.

Pour tester gratuitement Amazon Elastic Transcoder, AWS vous invite à profiter du niveau d’utilisation gratuit qui inclut, chaque mois pendant un an, jusqu'à 20 minutes de transcodage audio, 20 minutes de transcodage SD ainsi que 10 minutes de transcodage HD.

Pierre Gilot, Solutions Architect, AWS

Ajouter un commentaire

Filtered HTML

Plain text

CAPTCHA
Cette question permet de vérifier que vous n'êtes pas un robot spammeur :-)
 BBBB   PPPP   ZZZZZ   GGG   FFFF 
B B P P Z G F
BBBB PPPP Z G GG FFF
B B P Z G G F
BBBB P ZZZZZ GGG F