11521 sujets

JavaScript, DOM et API Web HTML5

Photo par webcam

Bonjour,
Je me permets de vous contacter, car je suis dans le désarrois, je cherche à créer un fichier à partir d'une image prise avec ma webcam.
Je récupère la webcam via un code que j'ai récupéré sur internet.

var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia		||
					navigator.webkitGetUserMedia	||
  					navigator.mozGetUserMedia		||
   					navigator.msGetUserMedia		||
					navigator.oGetUserMedia;
if (navigator.getUserMedia)
{       
   	navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream)
{
    video.src = window.URL.createObjectURL(stream);
}

Et je prends la photo via ces 3 petites lignes

function photo()
{	
	image.width = video.videoWidth;
	image.height = video.videoHeight;
	image.getContext('2d').drawImage(video, 0, 0);
}

Mais le problème est que pour la traiter en PHP après, il me faut un fichier en png/jpg, étant donné que j'utilise imagecreatefrompng dans la suite de mon code.
Je n'y connais pas grand-chose en js donc si quelqu'un connait une fonction ou un moyen Smiley ohwell
Bonsoir,

Peut-être que tu pourrais te servir plus simplement de l'attribut capture de <input type="file" />.

LE input file permet habituellement d'uploader un fichier, mais si tu précises les attributs capture et accept, une option est proposée à l'utilisateur pour prendre une photo avec la caméra de son appareil au lieu de choisir une photo qui est enregistrée.

L'avantage c'est que ça upload un fichier ordinaire provenant d'un formulaire normal, que tu peux donc récupérer très facilement en php.

Cela dit, c'est tout à fait possible avec ta méthode. Tu peux récupérer une image du flux vidéo, en demander un blob, puis l'uploader avec l'API FormData en AJAX. Mais c'est sûrement un peu plus compliqué. Je n'en connais pas les détails donc je te laisse chercher avec ces mots-clés.
merci de ta réponse QuentinC,

J'ai regardé ta solution, mais je ne parviens pas à capturer la vidéo de la webcam, je parviens uniquement à prendre une photo via une fenêtre spécifique. Smiley decu

Mais en cherchant une autre orientation j'ai trouvé ceci :Prendre_des_photos_avec_la_webcam qui est extrêmement proche de ma première solution, je suis en train de l'adapter à mon apps, je vous tiens au courant Smiley biggrin
Modifié par Rouffy (03 Jan 2017 - 16:00)
a écrit :
J'ai regardé ta solution, mais je ne parviens pas à capturer la vidéo de la webcam, je parviens uniquement à prendre une photo via une fenêtre spécifique.


La photo est de toute façon prise avec la webcam... donc c'est pareil, non ?

Tu me mets un doute là, tu veux prendre une photo ou enregistrer une vidéo ?
Note qu'avec la'ttribut capture, tu peux aussi demander une vidéo, en mettant l'attribut accept à quelque chose comme video/* à la place de image/*.
Désoler du retard, deux semaines d'exam Smiley ohwell

Je remets le tout au clair :
j'ai une webcam qui tourne et que je récupère parfaitement sur le site. Mon but est de sauvegarder sur mon serveur une image de cette webcam.

Pour l'instant je récupère ce que je veux dans un canvas ou une image (au cas ou ça change quelque chose pour la suite Smiley smile ), mais elle n'est pas sauvegardée sur le serveur Smiley confus
Salut,
Bon j'ai fait des recherche et compris à mon grand désespoir que le JS ne peut pas sauvegarder un élément sur le serveur, logique il est côté client, ça aurait dû me sauter aux yeux tout de suite, enfin bref du coup je renvoie l'image en POST et je cherche à la traiter en PHP, je vous tiens au courant sur la suite.

Pour info j'utilise ce code, il fonctionne enfin il me renvoie un truc qui a le format d'une image

// envois de l'image au canvas
image.width = video.videoWidth;
image.height = video.videoHeight;
image.getContext('2d').drawImage(video, 0, 0);

// récupération du contenue du canvas sous la forme d'une string
var img_string = image.toDataURL('image/png', 0)
img_string = img_string.replace("data:image/png base64;", "");

// création d'un formulaire pour l'envois en POST
var formul = document.createElement('form');
formul.setAttribute('method', 'POST');
formul.setAttribute('action', "");

// création du input pour l’envoie de la string
var champCache = document.createElement('input');
champCache.setAttribute('type', 'hidden');
champCache.setAttribute('name', 'image');
champCache.setAttribute('value', img_string);
formul.appendChild(champCache);

// envois du formulaire
document.body.appendChild(formul);
formul.submit();
Sujet clos
Aller à