Dyrk

Coucou à vous Amis Dyrknautes !

Je suis depuis plusieurs semaines à plancher sur un nouveau "standard" (par nouveau j'entends plutôt jeune 3/4 ans il me semble).
Un standard que l'on appelle EME pour "Encrypted Media Extensions" et qui permet ni plus ni moins d'appliquer des protections sur le contenu multimédia que l'on peut retrouver sur Internet  (Vidéo, Audio).

Spotify utilise cette protection sur sa plateforme, et il faut dire que ça marche plutôt bien.
Pour l'instant je n'ai pas encore trouvé de moyen de contournement :/
Je reviendrais vers vous sur ce sujet dans un prochain article, sachant que la R&D (Recherche & Développement) qu'il y a derrière ce genre d'action est plutôt lourde ...

En tout cas j'ai profité de ce petit moment pour actualiser 2 de mes scripts de  "téléchargement" de vidéos pour Dailymotion et Youtube.

Dailymotion

Le principe de fonctionnement de mon script est assez simple.
Vous vous rendez sur une vidéo de la plateforme de Dailymotion.
Normalement vous devriez obtenir un lien dans votre barre d'adresse de ce genre-là :

https://www.dailymotion.com/video/xxxxxxxx

xxxxxxxx : Correspond à l'identifiant de la vidéo.

En analysant un peu ce qui se passait sur le réseau à l'aide de la console de votre navigateur (Touche F12 de votre clavier, onglet "réseau") ...

J'ai constaté que la page chargeait des "méta-datas" via un lien ressemblant à celui-ci :

https://www.dailymotion.com/player/metadata/video/xxxxxxxx

xxxxxxxx : Correspond (toujours) à l'identifiant de la vidéo.

Aussi lorsque l'on regarde ce que renvoi ce lien on constate qu'il y a nos vidéos (dans plusieurs qualités) !

Mon script se contente donc de générer automatiquement ce lien, puis de récupérer la vidéo dans la meilleure qualité possible.

/*
*
*
*	Download on Dailymotion
*	(t) Button to Download will appear on the left top corner
*	(c) Dyrk.org - 2018
*
*/
var b = document.createElement('button'), downloadFunc= function(e){ 
		delete e.qualities['auto']; 
		link = e.qualities[Object.keys(e.qualities).reduce(function(a,b){if (b>a && e.qualities[b][1]) return b; return a;}, 0)][1].url; 
		prompt("download link :",link); 
	};
b.textContent = 'Download';
b.setAttribute('style',' position: fixed;top: 155px;left: 10px;background: white;color: #20cef7;width: 100px;height: 50px;border: 1px solid #20cef7;'); 
b.addEventListener('click', function(){ $.get("https://www.dailymotion.com/player/metadata/video/"+/video\/(.*)/.exec(document.location.toString())[1]).done(downloadFunc) });
document.body.appendChild(b);

Il vous faudra copier-coller ce script dans votre console Google Chrome / Firefox / ...
Si tout fonctionne vous devriez voir un petit bouton de téléchargement apparaître sur le coin gauche de votre écran.

Youtube, Facebook  (et autre(s))

Pour Youtube c'est différent, et c'est légèrement plus complexe.
Je modifie directement le fonctionnement normal des "vidéos" pour y accéder depuis l'une de ses fonctions.
En gros, je sais que lorsque vous allez mettre en pause votre vidéo, vous allez appeler une fonction "pause".
Je vais donc modifier le "prototype" de l'objet Vidéo "HTMLVideoElement" pour customiser cette fonction.
Comme ça dès que l'utilisateur (vous), appuiera sur "pause".
La vidéo se mettra en pause, appellera la fonction "pause" qui exécutera mon code.
Mon code sera donc appelé "DEPUIS" la vidéo et aura donc accès à toutes ses propriétés.

Il existe d'autres manières de procéder beaucoup plus simple, mais celle-ci me permet de voir des "vidéos" qui ne serait pas dans le DOM, comme c'est le cas dans spotify qui utilise un objet "vidéo" pour lire sa musique ;)

Une fois à l'intérieur, je vais pouvoir créer un "MediaStream" et  l'enregistrer au travers d'un "MediaRecorder".
"MediaRecorder" me permettra d'assembler le fichier final que vous pourrez télécharger à la fin ^^

/*
*
*	Download on Youtube
*	(t) Need to pause / play movie to start the download
*	(c) Dyrk.org - 2018
*/
var Cfg = {dl:false, download:document.createElement('a'), blobs:[], blobType:{type:'video/webm'}, load:document.createElement('img'),
		   css:'position:fixed;top:90px;left:10px;z-index:1000;height:25px;width:25px;'};
HTMLVideoElement.prototype.pause2 = HTMLVideoElement.prototype.pause;
Cfg.load.setAttribute('style',Cfg.css+"display:none");
Cfg.load.setAttribute('src','https://dyrk.org/divers/recordingIcon.gif');
document.getElementsByTagName('html')[0].appendChild(Cfg.load);
HTMLVideoElement.prototype.pause = function(){
	Cfg.load.setAttribute('style',Cfg.css+"display:none");
	if (Cfg.dl) 
			return Cfg.rec.stop();
	stream = this.captureStream(40);
	Cfg.rec = new MediaRecorder(stream, Cfg.type);
	Cfg.rec.addEventListener('dataavailable', function(e){ 
		Cfg.load.setAttribute('style',Cfg.css);
		Cfg.blobs.push(e.data);
	});
	Cfg.rec.addEventListener('stop',function(e){
			Cfg.download.download = 'youtube.webm';
			Cfg.download.href = window.URL.createObjectURL(new Blob(Cfg.blobs, Cfg.blobType));
			Cfg.download.click();
			window.URL.revokeObjectURL(Cfg.download.href);
            Cfg.dl 		= false;
			Cfg.load.setAttribute('style',Cfg.css+"display:none");
	});
	Cfg.rec.start(0);
	Cfg.dl = true;
	this.pause2();
};

Il vous faudra copier-coller ce script dans votre console Google Chrome / Firefox / ..., mettre en pause la vidéo et la relancer.
Si tout fonctionne vous devriez voir un petit point rouge clignoter sur le coin gauche de votre écran.

Conclusion

Bon divertissement à tous, et bien entendu je vous rappelle qu'il est interdit de télécharger les vidéos dont vous n'avez pas l'autorisation blablablabla enfin vous voyez ce que je veux dire ;)
Surtout n’hésitez pas à partager en commentaire les sites sur lesquels le script que j'ai développé pour Youtube fonctionne.