VideoEditorJS - Blog

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

Rendu

Cette partie n'a pas été une des plus faciles, dans ces quelques lignes nous allons découvrir pourquoi.


Les problèmes liés au rendu sont multiples et peuvent se découper en deux parties principales :

  • La classe Render.js, a au cours du temps subi de nombreuses modifications, qui dépendent directement de la façon dont sont traités éléments. Ainsi la venu de nouvelles fonctionnalités comme la possibilité de créer plusieurs pistes audio, vidéo ou encore le changement de volume des pistes audio, nous ont amené à faire de nombreuses modifications, rendant de plus en plus complexe la traduction de ce qui visuellement partait simple, en une suite d'instructions lisible par le serveur de traitement.
  • Le rendu fut aussi un problème dans la mesure où les pistes vidéos et audios doivent traitées séparément.
    Le principal problème provient des pistes vidéos. Il faut fixer une base et donc nous avons choisi que la première piste était prioritaire sur toutes les autres.
    Lorsque qu'un vide existe entre deux éléments d'une même piste, il faut chercher récursivement sur toutes les autres pistes vidéos s'il existe un élément qui coïncide avec l'espace disponible. Tout cela dans le but de produire en mémoire une seule et unique piste vidéo avec tous les éléments des autres pistes (en exploitant la gestion des collisions décrite plus tôt).
    Après cette étape, le plus dur est fait, il suffit de traiter les pistes simplement, peu importe son type.