Différences

Ci-dessous, les différences entre deux révisions de la page.

--- wiki:tutoriels:ascii-camera-html:accueil [2020/10/15 18:21]
bonnetja [Scripts JavaScript]
+++ wiki:tutoriels:ascii-camera-html:accueil [2020/10/16 11:44] (Version actuelle)
bonnetja [Débogage et Infos supplémentaires]
@@ Ligne 25: / Ligne 25: @@
 ===== Présentation de l'effet  =====
-On peut changer la couleur de la typographie et du fond d'écran dans le fichier "ascii.css", en inversant l'ordre des caractères dans le fichier "ascii.js"
+On peut changer la couleur de la typographie et du fond d'écran dans le fichier "ascii.css" et inverser l'ordre des caractères " dans le fichier "ascii.js"  (" .:-/*0#8%@"), cela nous donne une image en négatif.
 === Version classique  ===
@@ Ligne 39: / Ligne 39: @@
 Vous pouvez retrouver l'exemple de cette [[https://www.lookitsgraphic.com/projects/ascii.html|Expérimentation sur mon site web.]]
-Vous pouvez également télécharger les 4 styles d'effets montrés plus haut en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.rar |Fichier RAR (compression)}} ou en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.zip |Fichier ZIP (compression)}}
+Vous pouvez également télécharger les 4 styles d'effets montrés plus haut en
+  * {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.rar |Fichier RAR (compression)}}
+  * ou en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.zip |Fichier ZIP (compression)}}
+==== Structure du dossier et site ====
+Dézipper votre téléchargement, ouvrez le dossier
+{{:wiki:tutoriels:ascii-camera-html:dossier.png?300|Dossier}}
+Ouvrez un des un des 4 dossiers d'exemples
+{{:wiki:tutoriels:ascii-camera-html:exemple_blanc.png?300|Dossiers exemples}}
+Ouvrez la page web "index.html"
+{{:wiki:tutoriels:ascii-camera-html:site_index.png?300|Index site}}
+Autoriser l'accès à votre caméra puis cliquez sur le bouton "play".
+{{:wiki:tutoriels:ascii-camera-html:autoriser.png?300|}}
+{{:wiki:tutoriels:ascii-camera-html:play.png?300|}}
 ====== Explication du programme  ======
-Le programme se compose de plusieurs parties, un fichier "index.html" composant la structure de création de la page web, un fichier "asciiCss.css" c'est la feuille de style en cascade, qui permet de composer le style graphique de la page. Et trois autre fichier en JavaScript (language de programmation de scripts utilisé pour les pages internet intéractives), "camera.js" qui définit les fonction et variable de la caméra, "ascii.js" sert à traduire l'image en caractères et en à les organiser et "app.js" donnant un cadre visuel, c'est l'interface.
+Le programme se compose de plusieurs parties, un fichier "index.html" composant la structure de création de la page web, un fichier "asciiCss.css" c'est la feuille de style en cascade, qui permet de composer le style graphique de la page. Et trois autre fichier en JavaScript (language de programmation de scripts utilisé pour les pages internet intéractives), "camera.js" qui définit les fonction et variable de la caméra, "ascii.js" sert à traduire l'image en caractères et en à les organiser et "app.js" c'est l'interface.
 ==== Structure Html ====
@@ Ligne 194: / Ligne 217: @@
 ==== Scripts JavaScript ====
-Les commentaires/explications se situent apres les //
+Les commentaires/explications se situent apres les /  /.
 **__camera.js__**
 <code>
+// Code de  Jacob Seidelin (https://www.nihilogic.dk/labs/jsascii/)
+//Modifié par Andrei Gheorghe (https://github.com/idevelop)
+//remodifié et expliqué par Lookitsgraphic ( https://lookitsgraphic.com/Projects/Ascii.html/ )
+var camera = (function() { //utilise variable option, video, canvas, context, rendertimer
+	var options;
+	var video, canvas, context;
+	var renderTimer;
+	function initVideoStream() { //fonction commencement de vidéo
+		video = document.createElement("video"); //créer un element utilisant variable vidéo
+		video.setAttribute('width', options.width); //attibut largeur
+		video.setAttribute('height', options.height); //attibut hauteur
+		video.setAttribute('playsinline', 'true'); // attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément.
+		video.setAttribute('webkit-playsinline', 'true'); //Même que pour playsinline mais pour navigateur safari et mozilla
+		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //demande d'utilisation d'un périphérique de l'ordinateur (pour nous la caméra),
+		window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; // ne fonctionne que si le site est sécurisé (https) (depuis 2018 par convention de google et autres).
+		if (navigator.getUserMedia) { //si autorisation
+			navigator.getUserMedia({
+				video: true, //vidéo activée
+				audio: false, //son coupé
+			}, function(stream) {
+				options.onSuccess();//renvoi une confirmation vers programme app.js
+				if (video.mozSrcObject !== undefined) { // renvoi une confirmation programme pour Firefox < 19
+					video.mozSrcObject = stream;
+				} else {
+					video.srcObject = stream; //actif
+				}
+				initCanvas();
+			}, options.onError);
+		} else {
+			options.onNotSupported(); //sinon non supporté, renvoi non confirmation vers programme app.js
+		}
+	}
+	function initCanvas() { //lorsque bouton play lancé
+		canvas = options.targetCanvas || document.createElement("canvas"); //creer une section écran dédier, un canvas
+		canvas.setAttribute('width', options.width); //attribut largeur
+		canvas.setAttribute('height', options.height); //attribut hauteur
+		context = canvas.getContext('2d'); // CanvasRenderingContext2D est utilisée pour dessiner des rectangles (l'écran)
+		// mirroir video
+		if (options.mirror) {
+			context.translate(canvas.width, 0); //largeur du canvas uniquement
+			context.scale(-1, 1); //-1 = rotation verticale
+		}
+	}
+	function startCapture() { //commencement capture vidéo
+		video.play(); //la vidéo se lance
+		renderTimer = setInterval(function() { // definir l'intervale de rendu
+			try {
+				context.drawImage(video, 0, 0, video.width, video.height); //dessin des caractères
+				options.onFrame(canvas); //Dans l'espace défini
+			} catch (e) {
+				// TODO //???
+			}
+		}, Math.round(1000 / options.fps)); //nombre définir par 1000 divisé par fps
+	}
+	function stopCapture() { //Fonction arreter la capture vidéo
+		pauseCapture(); //Appel fonction vidéo en pause
+		if (video.mozSrcObject !== undefined) {  //pour mozilla <19
+			video.mozSrcObject = null;
+		} else {
+			video.srcObject = null; //pour autre naviguateur
+		}
+	}
+	function pauseCapture() { //Fonction vidéo en pause
+		if (renderTimer) clearInterval(renderTimer); //stopper sur dernière image du rendu fps
+		video.pause(); // la vidéo est en pause
+	}
+	return {
+		init: function(captureOptions) { //fonction capture vidéo
+			var doNothing = function(){}; //récupération image seulement
+			options = captureOptions || {}; //option de capture image
+			options.fps = options.fps || 25; //fréquence
+			options.width = options.width || 640; //taille capture vidéo largeur
+			options.height = options.height || 480; // taille capture vidéo hauteur
+			options.mirror = options.mirror || false; // capture vidéo pas en mirroir
+			options.targetCanvas = options.targetCanvas || null; // TODO: L'élèment est-il actuellement a <canvas> ?
+			options.onSuccess = options.onSuccess || doNothing; //lorsque ça fonctionne, déclencher évennement  onSucces
+			options.onError = options.onError || doNothing; // Lorsque erreur, déclencher évennement OnError
+			options.onNotSupported = options.onNotSupported || doNothing; // si le navigateur ne fontionne pas avec caméra, déclencher évennemnt onNotSupported
+			options.onFrame = options.onFrame || doNothing; //???
+			initVideoStream();
+		},
+		start: startCapture, //bouton start, lancer capture
+		pause: pauseCapture, //bouton pause, pause capture
+		stop: stopCapture //si rien lancé, stop
+	};
+})();
 </code>
@@ Ligne 351: / Ligne 481: @@
+====== Débogage et Infos supplémentaires ======
+☛ ATTENTION : ne changez pas l'ordre des fichiers dans le téléchargement sinon vous allez rompre les liens, si vous souhaitez changer les emplacements des sous fichier ( autres que le fichier html), modifiez les liens dans le fichiers "index.html".
+☛ Si vous souhaitez héberger ce fichier sur votre propre site internet, il ne fonctionnera que si vous utilisez un protocole HTTPS (sécurisé) et non http, c'est la norme depuis 2018 pour pouvoir accéder à la caméra, le micro, la localisation, ... d'un visiteur web.
+☛ Ne fonctionne visiblement pas sur Safari, mais fonctionne sur téléphone.

TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Différences

Outils de la page