Capturer image avec webcam
NIPHLED
loulou - 15 janv. 2020 à 16:19
- Messages postés
- 1
- Date d'inscription
- dimanche 11 juin 2017
- Statut
- Membre
- Dernière intervention
- 11 juin 2017
loulou - 15 janv. 2020 à 16:19
A voir également:
- Javascript webcam
- Webcam js - Meilleures réponses
- Webcam javascript - Meilleures réponses
- Webcam javascript - Conseils pratiques - Javascript
- Récupérer données json (javascript) - Conseils pratiques - Javascript
- Javascript connexion base de données - Conseils pratiques - Javascript
- Javascript poo - Conseils pratiques - Javascript
- Calculatrice javascript - Guide
2 réponses
ProfesseurX
11 juin 2017 à 12:49
- Messages postés
- 22
- Date d'inscription
- vendredi 25 mars 2016
- Statut
- Membre
- Dernière intervention
- 16 octobre 2019
11 juin 2017 à 12:49
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 :)
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 :)
@karamel
13 juin 2017 à 14:18
- Messages postés
- 1807
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 5 mai 2022
13 juin 2017 à 14:18
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
niveau compatibilité c'est limité a firefox chrome opera et edge
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
@karamel
10 janv. 2020 à 20:11
- Messages postés
- 1807
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 5 mai 2022
10 janv. 2020 à 20:11
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
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
Modifié le 13 janv. 2020 à 06:49
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 ...