Last updated on January 8th, 2020 at 10:04 pm

In this post i am going to explain how to capture image from webcam and upload it to node server i am using express framework for this example if you want to learn about express follow this post. I already early post same thing but in that time i am using php to handle that captured image. Now to build this thing we are using  HTML5 getUserMedia() to access our webcam from browser and capture image, Example in this post are very easy to understand.

Step 1. Setup your node express framework  {hope you know how to do that}.

Step 2. Open your routes (index.js) file and add new routes in it one for view (where user click image and upload button etc..), And second is where we handle upload image.


router.get('/captureImage', function(req, res, next) {
res.render('captureImage', { title: 'Capture Image and upload' });
});
router.post('/captureImage', function(req, res, next) {
//console.log("FormData "+ req.body.base64);
var base64Data = req.body.base64.replace(/^data:image\/png;base64,/, "");
fs.writeFile("uploads/out.png", base64Data, 'base64', function(err) {
if(err){
console.log(err);
}else{
res.send(JSON.stringify({'status': 1, 'msg': 'Image Uploaded'}));
}
});
});

view raw

index.js

hosted with ❤ by GitHub

Step 3. Create new view for your route as given bellow captureImage.jade. In this view we are using javascript and angular together :).


extends layout
block content
div(class="container" id="Cool" ng-app="mainApp" ng-controller="formController")
h2.blue.red#header("property"="pValue") Capture your image from webcam
div.row
div.col-md-6
video#video(autoplay='')
div.col-md-6
canvas#canvas(width='640', height='480')
div
button#snap Capture
button#new New
button(id="upload" ng-click="uploadImage()") Upload
script(type="text/javascript").
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// Littel effects
//$('#video').fadeOut('slow');
$('#canvas').fadeIn('slow');
//$('#snap').hide();
//$('#new').show();
// Allso show upload button
//$('#upload').show();
});
// Capture New Photo
document.getElementById("new").addEventListener("click", function() {
//$('#video').fadeIn('slow');
//$('#canvas').fadeOut('slow');
//$('#snap').show();
//$('#new').hide();
});
// Upload image to sever
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
console.log(dataUrl);
});
}, false);
var mainApp = angular.module("mainApp", []);
mainApp.controller("formController", function($scope, $http) {
$scope.uploadImage = function () {
var request = $http({
method: "post",
url: "/captureImage",
data: {
base64: document.getElementById("canvas").toDataURL()
},
headers: { 'Content-Type': 'application/json' }
});
request.success(function (data) {
console.log(data);
});
request.error(function(serverResponse, status, headers, config) {
alert("failure");
});
};
});

view raw

captureImage.jade

hosted with ❤ by GitHub

Step 4. Run your app and capture image 🙂

🙂