Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
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' | ===== Présentation de l' | ||
- | On peut changer la couleur de la typographie et du fond d' | + | On peut changer la couleur de la typographie et du fond d' |
=== Version classique | === Version classique | ||
Ligne 39: | Ligne 39: | ||
Vous pouvez retrouver l' | Vous pouvez retrouver l' | ||
- | Vous pouvez également télécharger les 4 styles d' | + | Vous pouvez également télécharger les 4 styles d' |
+ | * {{ : | ||
+ | * ou en {{ : | ||
+ | |||
+ | ==== Structure du dossier et site ==== | ||
+ | |||
+ | Dézipper votre téléchargement, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Ouvrez un des un des 4 dossiers d' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Ouvrez la page web " | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Autoriser l' | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | |||
====== Explication du programme | ====== Explication du programme | ||
- | Le programme se compose de plusieurs parties, un fichier " | + | Le programme se compose de plusieurs parties, un fichier " |
==== Structure Html ==== | ==== Structure Html ==== | ||
Ligne 194: | Ligne 217: | ||
==== Scripts JavaScript ==== | ==== Scripts JavaScript ==== | ||
- | Les commentaires/ | + | Les commentaires/ |
**__camera.js__** | **__camera.js__** | ||
< | < | ||
+ | // Code de Jacob Seidelin (https:// | ||
+ | //Modifié par Andrei Gheorghe (https:// | ||
+ | // | ||
+ | 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.setAttribute(' | ||
+ | video.setAttribute(' | ||
+ | video.setAttribute(' | ||
+ | video.setAttribute(' | ||
+ | |||
+ | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; | ||
+ | window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; | ||
+ | |||
+ | if (navigator.getUserMedia) { //si autorisation | ||
+ | navigator.getUserMedia({ | ||
+ | video: true, //vidéo activée | ||
+ | audio: false, //son coupé | ||
+ | }, function(stream) { | ||
+ | options.onSuccess();// | ||
+ | |||
+ | 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(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function initCanvas() { //lorsque bouton play lancé | ||
+ | canvas = options.targetCanvas || document.createElement(" | ||
+ | canvas.setAttribute(' | ||
+ | canvas.setAttribute(' | ||
+ | |||
+ | context = canvas.getContext(' | ||
+ | |||
+ | // mirroir video | ||
+ | if (options.mirror) { | ||
+ | context.translate(canvas.width, | ||
+ | context.scale(-1, | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function startCapture() { // | ||
+ | video.play(); | ||
+ | |||
+ | renderTimer = setInterval(function() { // definir l' | ||
+ | try { | ||
+ | context.drawImage(video, | ||
+ | options.onFrame(canvas); | ||
+ | } catch (e) { | ||
+ | // TODO //??? | ||
+ | } | ||
+ | }, Math.round(1000 / options.fps)); | ||
+ | } | ||
+ | |||
+ | function stopCapture() { //Fonction arreter la capture vidéo | ||
+ | pauseCapture(); | ||
+ | |||
+ | 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); | ||
+ | video.pause(); | ||
+ | } | ||
+ | |||
+ | return { | ||
+ | init: function(captureOptions) { //fonction capture vidéo | ||
+ | var doNothing = function(){}; | ||
+ | |||
+ | options = captureOptions || {}; //option de capture image | ||
+ | |||
+ | options.fps = options.fps || 25; // | ||
+ | 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' | ||
+ | |||
+ | options.onSuccess = options.onSuccess || doNothing; //lorsque ça fonctionne, déclencher évennement | ||
+ | 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, | ||
+ | |||
+ | pause: pauseCapture, | ||
+ | |||
+ | stop: stopCapture //si rien lancé, stop | ||
+ | }; | ||
+ | })(); | ||
</ | </ | ||
Ligne 351: | Ligne 481: | ||
+ | ====== Débogage et Infos supplémentaires ====== | ||
+ | |||
+ | ☛ ATTENTION : ne changez pas l' | ||
+ | |||
+ | ☛ 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, | ||
+ | |||
+ | ☛ Ne fonctionne visiblement pas sur Safari, mais fonctionne sur téléphone. | ||