Posez votre question Signaler

Capturer image avec webcam

Messages postés
1
Date d'inscription
dimanche 11 juin 2017
Statut
Membre
Dernière intervention
11 juin 2017
 - - Dernière réponse : @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
 - 13 juin 2017 à 14:18
Javascript / DHTML Posez votre question Signaler
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

Signaler Commenter la réponse de ProfesseurX
Messages postés
22
Date d'inscription
vendredi 25 mars 2016
Statut
Membre
Dernière intervention
16 octobre 2019
 1
0
Merci
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 :)




Commenter la réponse de ProfesseurX
Signaler Commenter la réponse de @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
 51
0
Merci
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
Commenter la réponse de @karamel
Répondre Posez votre question