VideoEditorJS - Blog

Editeur de vidéo en ligne 100% HTML5/JAVASCRIPT

Rendu final

La phase de rendu final a été une des plus longue puisqu'elle a été à plusieurs reprise recontrustruite pour s'adapter aux évolution du projet.
Cependant, sont fonctionnement reste globalement le même.


Pricipe de base

La phase de Rendu final, a pour simple but de transcrire ce que l'utilisateur vois sur sont écran, en une suite d'instruction qui vont permettre la génération d'un fichier video qui correspond au montage réalisé.

Fonctionnement

Le Rendu final ce découpe en trois principales étapes :

  • Duplication de l'état des varriables contenant les informations du montage
  • Construction d'une unique piste vidéo, reflétant la superposition des autres pistes vidéos, en conservant la première comme prioritaire.
  • Traduction de chaque piste une à une, en ayant préalablement reclasser ( par sécurité ) les éléement par ordre chronologique

L'enssemble de ces étapes permettent au final, d'obptenir un fichier contenant une liste de commandes.
Le traitement final, ne s'éffectue pas du coté de l'utilisateur, mais du côté serveur. A l'aide d'un script BASH, il nous est possible de calculer l'avancement ainsi que d'executer la liste de commande de chaque projet en attente de traitement.
Le traitement, est assuré grâce à FFmpeg ( https://www.ffmpeg.org/ ), qui permet de travailler relativement facilement les fichier multimédia. Celui-ci va être capable de produir par l'execution des commande, deux fichier :
  • l'un au format choisi par l'utilisateur
  • l'autre au format MP4 x264

Pourquoi deux fichier vidéo ?

Deux fichiers vidéo sont produit, le premier correspondant aux désir de l'utilisateur, le deuxième, présent pour permettre la lecture sur les navigateur web, avant de télécharger le fichier au format demandé.
Le deuxième fichier est au mp4 car on peut obtenir des fichiers de petites taille avec le codec x264 pour la vidéo et le codec aac pour l'audio.
De plus les navigateurs internet récent, supportant les technologies html5, sont capable de lire nativement les contenus videos et audios sur certains formats standardisé dont le mpeg4. ( voir les spécifications html5 : Vidéo | Audio) La lecture du fichier final ne demmande aucune configuration particulière si ce n'est le fait d'avoir un navigateur web recent et conforme aux spécification html5.