Dans ce tuto HTML5 en vidéo, nous verrons comment capturer une image de la vidéo de la webcam pour en faire une photo que l'on sauvegardera ensuite en base de données pour pouvoir la réutiliser par la suite. D'abord, nous construirons nos éléments en HTML afin de pouvoir développer notre application. Ensuite, nous verrons comment afficher la vidéo de la webcam dans notre navigateur, puis comment prendre une capture de cette vidéo pour ensuite l'afficher dans un canvas HTML5. Ceci fait, nous convertirons la capture affichée dans le Canvas en format JPEG pour pouvoir la traiter et l'enregistrer en base de données dans un champs de type LONGBLOB via un script PHP auquel nous transmettrons l'image en AJAX. Et enfin, nous verrons comment récupérer les images enregistrées en base de données afin de les afficher.

Bon tuto !

Jetez un oeil à ces autres tuto HTML 5

Pack créer et développer un portfolio de A à ZPack créer et développer…
Voici un tuto créer et développer un portfolio de A à Z dédié…

Intégration HTML5 / CSS3 d'un portfolio minimalisteIntégration HTML5 / CSS3…
Voici la suite de la formation Photoshop consacrée à la création…

Créer une application autour de moi en HTML5Créer une application autour…
Dans ce tuto HTML5 en vidéo, nous allons voir comment créer…

Pack : Créer votre site Internet, les bases pour débutantsPack : Créer votre site Internet,…
Dans ce pack, nous allons vous donner toutes les bases HTML…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…

Montage HTML / CSS d'un site Internet ResponsiveMontage HTML / CSS d'un site…
Voici une formation sur le découpage et l'intégration d'un…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

Montage HTML / CSS d'un site responsive en One PageMontage HTML / CSS d'un site…
Voici la suite de la formation consacrée à la création d'une…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5 de 28 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



Toutes les formations de Simpledev


Témoignage des clients de simpledev

Des tuto de qualité et bien expliqués.

Les tutos sont bien expliqués.

Super tuto, rien à dire. merci

Bonjour, vidéos bien expliquées sur Créer un blog avec Node.js

Un très bon formateur qui va au bout de ses explications. Ses tutoriels sont de qualité et je les recommande fortement ! Merci à vous pour ce que vous m'avez appris !

Lire les autres témoignages

 

D'autres tuto de simpledev

Webcam avec effets visuels en HTML5Webcam avec effets visuels en HTML5
Dans ce tuto HTML5 en vidéo, nous verrons comment afficher la webcam de l'ordinateur…

Vérifier simplement si un fichier est une image en PHPVérifier simplement si un fichier est une image en PHP
Dans ce tuto PHP gratuit en vidéo, nous verrons comment vérifier simplement si un fichier…

Vérifier simplement l'extension d'un fichier en PHPVérifier simplement l'extension d'un fichier en PHP
Dans ce tutoriel PHP gratuit en vidéo, nous verrons comment vérifier simplement l'extension…

Afficher la webcam en HTML5Afficher la webcam en HTML5
Dans ce tuto HTML5 en vidéo, nous verrons comment afficher la webcam du visiteur à…

voir tous les tuto de simpledev

Ce tuto n’a pas encore reçu de vote

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (4)

par Saku
(a acheté ce tuto - 10 janvier 2014)

" Bonsoir,

très bon tutoriel et formateur.
J'aurais quand même préciser que la solution précisé n'est utilisable que sur Google Chrome.

Cependant, en cherchant un peu sur Google on trouve comment régler ça.

Merci! :) "

par wekwarel
(a acheté ce tuto - 11 décembre 2012)

" Je les ai contacté de ce pas, merci pour ta réactivité ! "

par simpledev
(auteur de ce tuto - 11 décembre 2012)

" Bonjour wekwarel, j'ai ré-up les sources mais je crois que le problème vient plutôt de la plateforme, donc si tu n'arrives toujours pas à télécharger les sources, contact le support de tuto.com pour qu'ils règlent le problème;)
A+ "

par wekwarel
(a acheté ce tuto - 10 décembre 2012)

" Bonjour, j'adore tes tutos qui m'ont fait énormément progresser, mais sur celui là, la sources semble corrompue. Serait-il possible que tu la re-up ?

Merci "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto HTML 5 d’une durée de 28 minutes a été acheté 54 fois.

Ce tuto a été publié le 12 novembre 2012 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto HTML video.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !