Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > Code based on HTML5 cool camera (HTML5 webcam) camera function implementation code_html5 tutorial skills

Code based on HTML5 cool camera (HTML5 webcam) camera function implementation code_html5 tutorial skills

WBOY
Release： 2016-05-16 15:50:42
Original
1652 people have browsed it

photobooth demo - gbin1.com

WebRTC may be the most watched HTML5 standard next year. Mozilla has developed a set of APIs to help you control hardware, such as cameras, microphones, or accelerometers. You can call the native hardware devices you need without relying on other plug-ins.

In today’s article, we will introduce Photobooth.js developed by Wolfram Hempel. Using this class library can help you quickly call the camera function, and you can easily add the camera function to the website. And it quickly helps you take photos. You can use this function to take photos of users. Isn’t it great?

Main Features:
    Contrast setting color setting brightness setting hue setting photo button supports the latest chrome, firefox, opera and other browsers supports jQuery plug-in method and javascript code method

浏览器支持 - gbin1.com

After using Chrome to open the online demo, please confirm to allow the browser to call your camera, as follows:

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

Javascript code:

Copy code
The code is as follows:

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

The above code will pass the generated image data to the tag with id=picture. Please refer to the relevant API for specific instructions.
Source code download

We hope you all like this online demonstration and demo we provide. If you have any questions, please leave us a message, thank you!

Related labels：
Photograph
source：php.cn
Previous article：Summary of development and application of geographical location positioning api interface in html5_html5 tutorial skills Next article：Canvas path drawing and coordinate transformation application examples of html5_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2184
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2331
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1961
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1845
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1897
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template