1. Accueil
  2. Codes-Sources
  3. Javascript / DHTML

Capturer image avec webcam

Signaler
Messages postés
1
Date d'inscription
dimanche 11 juin 2017
Statut
Membre
Dernière intervention
11 juin 2017
 -
 loulou -
Meilleures salutations,
J'ai fait un site web d'inscription en ligne des étudiants d'une université.
Je voudrais que le candidat puisse capturer sa photo avec la webcam et l'uploader.

Veuillez m'aider svp, je suis à bout
Je vous serez très reconnaissant
Afficher la suite
A voir également:

2 réponses

Réponse 1 / 2
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
 61
bonjour

voici un exemple qui ouvre la camera puis on prend une photo en utilisant un canvas enfin on sauvegarde l'image dans le canvas en base 64. A ce stade il reste a cree la partie ajax afin d'envoyé l'image base 64 qui devra etre converti en image coté serveur 

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>HTML5 Camera</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">

	<script type="text/javascript">

	function init() {

		navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 800, height: 600 } }).then(function(mediaStream) {
			
			var video = document.getElementById('sourcevid');
			video.srcObject = mediaStream;
			
			video.onloadedmetadata = function(e) {
				video.play();
			};
		  
		}).catch(function(err) { console.log(err.name + ": " + err.message); });
	
	}

	function clone(){
		var vivi = document.getElementById('sourcevid');
		var canvas1 = document.getElementById('cvs').getContext('2d');
		canvas1.drawImage(vivi, 0,0, 150, 112);
		var base64=document.getElementById('cvs').toDataURL("image/png");	//l'image au format base 64
		document.getElementById('tar').value='';
		document.getElementById('tar').value=base64;
	}

	window.onload = init;
	</script>
	
</head>

<body>
    
        <video id="sourcevid" height='150' width='150' autoplay="true"  style='display:inline'></video>
		
		<div id="main" style='height:150px;width:150px;margin:auto;display:inline'>
		
        <canvas id="cvs" height='150' width='150'></canvas>
		
		</div>
<button onclick='clone()' style='height:50px;width:80px;margin:auto'>photo</button>
<textarea id='tar' style='width:50%;height:200px;'></textarea>
</body>
</html>


niveau compatibilité c'est limité a firefox chrome opera et edge
Signaler

Bonjour,

J'ai bien vu votre réponse et cela fonctionne parfaitement. Je souhaite récupérer la photo dans une variable pour l'insérer dans un google sheet, comment puis je le récupérer?

D'avance merci
Signaler
@karamel
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
 61
de quelle facon tu veut la recuperer ?

un tuto qui peut t'etre utile
Signaler

Bonjour,

Un grand merci pour votre réponse.
En effet, je commence à utiliser GoogleSheet et je cherche à mettre en place un interface de saisie (le google form ne sera pas suffisant). Je suis obligé d'utiliser HTML combiné avec google script pour faire mon interface. Dans le tuto proposé, je souhaite intégrer une nouvelle fonction script qui devra me renvoyer la photo. Le but final sera de récupérer la photo renvoyée dans une cellule d'un google sheet de manière automatique. Mon problème, je ne maîtrise ni Html ni google script et que je suis contraints de les utiliser.

Merci pour votre aide
Réponse 2 / 2
Messages postés
22
Date d'inscription
vendredi 25 mars 2016
Statut
Membre
Dernière intervention
16 octobre 2019
 1
Ne désespère pas :-; je suis la et ensemble je suis sur qu'on vas y arriver...

Bon il faut commencer par bien identifier ce qu'on veut faire.

Il y a la partie serveur (chez OVH ou la machine qui héberge tes fichiers dans ta fac.) J'espère que tu arrive a faire la différence entre le client et le serveur. Le client c'est l'ordi sur lequel tu lis ce message.... Le serveur c'est l'ordi que ton ordi (le client) à tapé sur le web pour afficher cette page.

Le traitement coté client :

il faut que le code dise a ton navigateur : Hey mec ! donne moi accès au flux vidéo de la cam. Premier soucis, la sécurité attention car tu ouvre une porte coté client... Un méchant hacker pourrais faire croire que le flux qu'il passe est une image mais il pourrais envoyer un binding avec un fichier qu'il exécutera depuis l'extérieur et pourrais faire un backdoor. Mais j'avoue que c'st un peu du psycotage lol ...

Ton navigateur le coquinou ! vas demander a ton OS de lui donner un accès au flux vidéo. Apres que l'utilisateur ai accepté d'afficher sa cam dans un popup. Ce qu'il vas avoir facilement

ensuite il faut capturer une "frame de la vidéo" avec du code afin d'obtenir une image. qui seras envoyer sur un serveur PHP.

Tu risque de devoir effectuer un peu de travail sur ton fichier image coté serveur.. resizing, logotype ..

Ton serveur vas recevoir le fichier. Il vas faire des vérifications de sécurité et la c cool ! il vas écrire le fichier sur son disque dur.

Fini ! .... non j'deconne ...

il te reste une petite chose a faire. associer l'image a un profile.. Pour ça il vas falloir incrémenter une base de donné avec le fichier.. Apres tout dépends de ce que tu veux faire. Si tu veux un système de modération des images.

Par contre fais super gaffe a la sécurisation, car pour les hacker il n'y a rien de plus marrant que de changer la photo des utilisateurs.

Bon c'est bien gentil ProfesseurX mais j'ai pas avancé !!!

pour charger le flux vidéo sa se passe coté navigateur et il existe pas mal de solutions.. Si tes machines ont javascript ... fais le en JS. si tes machine n'ont pas JS aspx est ton ami vive microsoft! Je te conseil d'utiliser des librairies tels que jQuery.

bref tu as ton fichier image dans un champs prêt a être envoyer au serveur utilise ajax pour avoir un traitement asynchrone.

coté php fabrique toi une petite classe qui vas utiliser GD pour vérifier ton image, j'entends que c'est bien une image ! car si je suis un malin et que je te vois utiliser JS pour faire de lAJAX .. Je vais récupérer l'adresse du script php qui reçois et stock le fichier et je vais lui envoyer un fichier qui vas se connecter a la base de donné pour récupérer les passwords de tes users .. Apres tu connais la suite ... bref c'est super important de bien sécurisé le script php qui vas recevoir et enregistrer.

Pour la gestion de ton image une fois sur le serveur ... j'imagine que tu vas modifier la valeur d'un champs thumb dans la table users de ton projet. utilise PDO....

Bon ça fait beaucoup de choses et beaucoup de fautes .. si tu veux on le fais ensemble mais on le rends open source ? a bientôt l'ami :)




Signaler

Salut pr. x (aurais t des pouvoirs mentaux ^^).
Je tiens juste à te dire bravo pour ton énoncé des tâches à faire, bien que résumées qui me semblent complètes.
à part le 'vive Micorsoft' bravo et vive l'open source ;)

si tu veut t'amuser je développe un moteur d'animation svg/html/canvas2d et compte rajouter une partie média (api lecteur vidéo/audio) qui sera indépendante et customizable en vanilla.js , éventuellement un plugin jquery mais bon le but c'est de sen passer aussi pour alléger le chargement et ne pas être dépendant d'une autre librairie.
On pourrais faire ça ensemble si ça te tente ;)
edit: oups pas vu la date du message ...
Répondre Posez votre question