Take Photo From Webcam Using Javascript (Example Code)

By -
webcam example

If you want to take a picture from your computer or laptop webcam, you can easily do that using Javascript, there's a library called webcamjs, it's really simple and easy to use. 

Here's an example code of how you can take a picture from a webcam and then upload it to the server.

1. First grab the Webcamjs CDN and paste it before body tag of your HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js" integrity="sha256-JTH6WxFs/GvXkgGMSYlAXBawtdhTdyYA3+7hhkBG6/o=" crossorigin="anonymous"></script>

2. Now create the HTML for camera preview and camera result

<div id="my_camera"></div>
<input type=button value="Configure" onClick="configure()">
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<div id="results" ></div>
<input type=button value="Save Snapshot" onClick="saveSnap()">

3. Then the full Javascript code for taking picture and upload to server

<!-- CSS -->
<style>
#my_camera{
 width: 320px;
 height: 240px;
 border: 1px solid black;
}
</style>
<!-- -->
 <div id="my_camera"></div>
 <input type=button value="Configure" onClick="configure()">
 <input type=button value="Take Snapshot" onClick="take_snapshot()">
 <input type=button value="Save Snapshot" onClick="saveSnap()">
 
 <div id="results" ></div>
 
 <!-- Script -->
 <script type="text/javascript" src="webcamjs/webcam.min.js"></script>
 <!-- Code to handle taking the snapshot and displaying it locally -->
 <script language="JavaScript">
 
 // Configure a few settings and attach camera
 function configure(){
  Webcam.set({
   width: 320,
   height: 240,
   image_format: 'jpeg',
   jpeg_quality: 90
  });
  Webcam.attach( '#my_camera' );
 }
 // A button for taking snaps
 // preload shutter audio clip
 var shutter = new Audio();
 shutter.autoplay = false;
 shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
 function take_snapshot() {
  // play sound effect
  shutter.play();
  // take snapshot and get image data
  Webcam.snap( function(data_uri) {
  // display results in page
  document.getElementById('results').innerHTML = 
   '<img id="imageprev" src="'+data_uri+'"/>';
  } );
  Webcam.reset();
 }
function saveSnap(){
 // Get base64 value from <img id='imageprev'> source
 var base64image = document.getElementById("imageprev").src;
 Webcam.upload( base64image, 'upload.php', function(code, text) {
  console.log('Save successfully');
  //console.log(text);
 });
}
</script>

4. I am using the PHP for its server upload proccess, it's the easiest

<?php
// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';
$url = '';
if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
 $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}
// Return image url
echo $url;

If the code doesn't work, always consult the Browser console by pressing F12, then select tab Console, if there's an error you should fix it first.

For full documentation of using WebcamJS, you can go to their official github repository for documentation on how to use and customize it here jhuckaby/webcamjs.

Browser based application is the easiest way to build a user interface, with the help of Javascript, you can develop front end applications, faster, with sophisticated look. 

The benefit of building UI on the also the fact that the availability of libraries you can use to ease your UI development, you can just grab so many already exists libraries, read the API and then you can start customising and make your application useful and user  friendly. 


I am an experiences web developer, have a good problem-solving and deep understanding of software development principles. With comprehensive skill set in Java, PHP, Python, C and JavaScript. Able to do database thing like MySQL and Oracle. Along with expertise in frameworks like Spring, React, and Firebase. Have a solid understanding of software development methodologies, like Agile and Scrum. I applies best practices to ensure the development process is efficient and of the highest quality output.

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

By -
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to
Read more

How To Create Spring Boot Project Using Netbeans

By -
Image
Spring Boot is program that you can use to develops Spring Framework easier, without the need of using so many hard to handle configuration. This tutorial, we are gonna create Spring Boot Application by using Netbeans IDE. You can of course create Spring Boot Appilcation on Netbeans, but it will be easier if just using plugin for Spring development in Netbeans, 1. Open Netbeans, click tools menu and click plugin. After plugin window opened, click tab Available Plugins and find the "Nb SpringBoot" plugin then install and activate the plugin. 2. After restarting the Netbeans IDE. Now you gonna be able to create a new project with Spring boot application. File > New Project > Under categories, choose Maven > then choose  Spring Boot Basic. Now you can start the development of spring boot application using your Netbeans IDE. Open pom.xml to add spring boot dependencies you want.
Read more

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

By -
Image
Microservice Spring with Apache Kafka Kafka is an asynchronous messaging queuing system, but when you have a case in your project that you need to have the result immediately from another service you can do that quite easily. Kafka from the client side produces a message to the server side, then waiting for the server to return back the message exactly what the client wants. It’s identified in the kafka header request named KafkaHeaders.CORRELATION_ID and a topic where the server should send. If the server side produces the same correlation id to the same topic in the request, then the client side will catch that message as its reply. Although you can work with kafka from a different framework and language other than Java and Spring. Here’s in this example i just specifically giving the example of sending and replying kafka messages using Spring Boot. The Project Overview The client-project will send a string message to the server-project over kafka, then the server-project wil
Read more

Upload and Download Rest API using Spring Boot Reactive WebFlux

By -
Image
Reactive Spring Logo This is maybe a very simple task, but for those of you that may not be familiar with WebFlux found it difficult to create a Rest API that handles upload and download in Reactive spring application. Create the skeleton Spring project Create a new project, go to start.spring.io , on the dependencies section, add Spring Reactive Web. Generate and extract it into your desired project location. Instead of using spring-boot-starter-web, use spring-boot-starter-webflux instead in your pom.xml. Here’s the pom.xml for our Reactive Rest API project. Create our Rest controller Now that you have set to use WebFlux instead of the usual web, we have to change a little bit in the Controller class that handles the API endpoints. It doesn’t change much but you have to wrap the Response in Mono and the request parameter to FilePart. So our upload and download file controller will look like this. Create utility to handle file upload We need to structure our project better, so we cr
Read more

MIME Types - Complete List

By -
Image
MIME Types List Icons Mime types is important in software development, sometimes it is used as system security to verify whether a file contents match with the extensions. Some attacker can just name any file to pass extensions checking, but inside of the file is actually a harmful contents, can be use to read our system, stealing our data even worse using our resource for their benefit. Here's complete list of mime types, pair with the extensions of file. 123 application/vnd.lotus-1-2-3 ez application/andrew-inset aw application/applixware atom application/atom+xml atomcat application/atomcat+xml atomsvc application/atomsvc+xml bdoc application/bdoc ccxml application/ccxml+xml cdmia application/cdmi-capability cdmic application/cdmi-container cdmid application/cdmi-domain cdmio application/cdmi-object cdmiq application/cdmi-queue cu application
Read more