{Streaming} Synchroniser l’audio et la vidéo en cas de décalage

 

Hello Hello la compagnie,

 

Je n'ai pas pu publier d'article durant la semaine dernière, il faut avouer qu'en ce moment je fais un peu les choses au jour le jour et je suis sur un grand nombre de front à la fois ...
Cependant j'espère pouvoir continuer à pouvoir vous écrire des petites choses durant les prochains temps ...
Je devrais très prochainement signer un contrat chez une très prestigieuse entreprise, j'espère y trouver un endroit qui sera enrichissant intellectuellement parlant et où je trouverais de la matière dans l'écriture de mes articles ... bien entendu, je vous parle de tout ça en avance de phase, puisqu'il s'agit là de quelque chose qui aura lieu dans quelques mois.
Pour l'heure mon objectif est la finalisation de ma VAE, la soutenance est prévue pour fin juin ... je croise donc les doigts pour obtenir ce précieux diplôme !

Aujourd'hui, j'aimerais vous proposer un petit script que j'ai écrit qui est du même genre que :{Streaming} Augmenter le volume maximum d'une vidéo

Après vous avoir offert un moyen d'augmenter le volume maximum d'une vidéo, je vais vous permettre de regarder des vidéos, malgré le fait qu'il y ait un décalage entre le son et l'image !

 

La méthodologie

Pour réaliser ce script, je suis partie d'une technique assez simple qui consiste à jouer en même temps 2 fois la même vidéo. L'une qui nous servira d'image, et l'autre pour l'audio ... le tout en essayant de les synchroniser correctement.

J'ai donc écrit un code qui va générer sur une page affichant une vidéo, une deuxième vidéo "transparente".
Ce bout de script coupera le son de la vidéo principale et décalera le son de x secondes (x étant une valeur positive ou négative, selon si vous souhaitez avancer ou reculer l'audio de la vidéo)

 

Le bout de script

Petit morceau de code qu'il vous faudra copier dans la console (Touche F12, onglet console) de la page où vous aurez votre vidéo (Attention aux iframes : Je vous invite à vous référer à mon article sur l'augmentation du volume).

/*
*		audioMovieCalibrator 
*	Adjust bad synchronisation between picture & audio
*	(c) Dyrk.org 2019 - 2020
*
*/

function audioCalibration(time){
	var movie = document.getElementsByTagName('video')[0], newMovie = document.createElement('video'),
		body  = document.getElementsByTagName('html')[0], oldNewMovie = document.getElementsByClassName('hackSoundMovie');
	// ici je coupe le son et je met en pause la vidéo principale
	movie.muted = true;
	movie.pause();
	// Je supprime tout reliquat d'une autre vidéo créée depuis cette fonction
	for (var i in oldNewMovie) {
		if (oldNewMovie[i].parentNode) 
			oldNewMovie[i].parentNode.removeChild(oldNewMovie[i]);
    }
	//J'injecte une copie de la vidéo principale
	newMovie.src = movie.src ? movie.src : movie.getElementsByTagName('source')[0].src;
	newMovie.setAttribute('class','hackSoundMovie');
	newMovie.setAttribute('style','width:1px; height:1px; opacity:0');
	body.appendChild(newMovie);
	
	//Je règle la copie de la vidéo principale pour démarrer selon la valeur time avant ou après la vidéo principale
	newMovie.currentTime = movie.currentTime + time;
	// Je démarre la vidéo principale et sa copie
	movie.play();
	newMovie.play();
}

Lorsque vous aurez chargé ce bout de code dans la console, vous pourrez recalibrer à la volée l'audio avec la commande suivante :


// audioCalibration(secondToAdd);


audioCalibration(-1.);

Ci-dessus, un exemple où je décale le son, une seconde en avance (-1), à l'inverse, je peux mettre une valeur positive si l'image est en avance par rapport à l'audio.

 

Démonstration Vidéo

Pour cette démonstration j'ai pris une plateforme de streaming avec une vidéo ayant un décalage.
Il s'agit là d'un exemple, et je rappelle que la consultation de films en streaming sans autorisation est interdite.
Sur ces bonnes paroles, je vous souhaite un bon visionnage et surtout n'oubliez pas de vous abonner sur la page Facebook et sur la chaîne Youtube ;)

 

Conclusion

Aujourd'hui nous vivons la dématérialisation, il n'est plus nécessaire de disposer de 150 logiciels, et tout ce fait sur internet, cependant ... tout n'est pas encore au point, et j'espère au travers mes quelques scripts, vous offrir des outils pour profiter d'une meilleure expérience en ligne.
N'hésitez pas à me remonter des idées d'articles.
Je m'excuse pour les personnes qui me propose des idées originales mais je dois publier des articles qui sont en lien avec ce que j'ai l'habitude de publier.

Petite demande aussi :
Par pitié, évitez de m'envoyer des mails en mode :
- "J'aimerais pirater le mot de passe de machin bidule Chouette"
ou encore
- "J'ai un souci avec mon téléphone portable est-ce que tu peux m'aider."
....
J'en reçois un certain nombre par jour ... et mon blog (ou moi-même) n'a pas vocation à régler des soucis perso, mais plutôt des problématiques de masse ...

 

 

Partagez ce contenu

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *