Maison > interface Web > Tutoriel H5 > Code basé sur la mise en œuvre de la fonction de caméra HTML5 cool camera (webcam HTML5) compétences du didacticiel code_html5

Code basé sur la mise en œuvre de la fonction de caméra HTML5 cool camera (webcam HTML5) compétences du didacticiel code_html5

WBOY
Libérer: 2016-05-16 15:50:42
original
1652 Les gens l'ont consulté

photobooth demo - gbin1.com

WebRTC sera peut-être la norme HTML5 la plus regardée l'année prochaine. Mozilla a développé un ensemble d'API pour vous aider à contrôler le matériel, tel que les caméras, les microphones ou les accéléromètres. Vous pouvez appeler les périphériques matériels natifs dont vous avez besoin sans recourir à d'autres plug-ins.

Dans l'article d'aujourd'hui, nous présenterons Photobooth.js développé par Wolfram Hempel. L'utilisation de cette bibliothèque de classes peut vous aider à appeler rapidement la fonction appareil photo et vous pouvez facilement ajouter la fonction appareil photo au site Web. Et cela vous aide rapidement à prendre des photos. Vous pouvez utiliser cette fonction pour prendre des photos des utilisateurs, n'est-ce pas génial ?

Caractéristiques principales :
    Réglage du contraste, réglage de la couleur, réglage de la luminosité, réglage de la teinte, le bouton photo prend en charge les derniers navigateurs Chrome, Firefox, Opera et autres, prend en charge la méthode du plug-in jQuery et la méthode du code javascript

浏览器支持 - gbin1.com

Après avoir utilisé Chrome pour ouvrir la démo en ligne, veuillez confirmer pour autoriser le navigateur à appeler votre caméra, comme suit :

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

Code Javascript :

Copier le code
Le code est le suivant :

$(' #webcam' ).photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '< img src="' dataUrl '" >');
});

Le code ci-dessus transmettra les données d'image générées à la balise avec id=picture. Veuillez vous référer à l'API concernée pour des instructions spécifiques.
Téléchargement du code source

Nous espérons que vous apprécierez tous cette démonstration en ligne et cette démo que nous proposons. Si vous avez des questions, veuillez nous laisser un message, merci !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal