Home » Nodejs » Accessing WebCam with NodeJS

Accessing WebCam with NodeJS

Posted by: admin November 19, 2017 Leave a comment

Questions:

Does anyone have any experience with trying to access a webcam through node? I can’t seem to find any prior attempts at this.

To expand a bit – I have a nodeJS server running, and I want to be able to access the webcam on the same box Node is running (so really, I’m using node more as a client implementation). Some things I wanted to do – get an image from the webcam, or, it’d be awesome if I could get a stream to the webcam that I pipe to another server and stream to other clients 😉

Does anyone know how this can be done?

Thanks

Answers:

I don’t think there’s anything specific to Node.js when it comes to working with webcams, the concepts are generally the same no matter what language or server you’re using. The hardware involved and the interfaces to that hardware is what should define your solution.

The simplest case would be to serve individual snapshots that are periodically saved to disk by the webcam’s included software, or you can make a system call that invokes a local process or program to save a snapshot on demand. You can then serve a page using Node.js that periodically refreshes the latest snapshot.

Alternatively, you can interface directly with the webcam hardware using a controller tailored to the operating system (DirectShow, Windows Image Acquisition, IKPictureTaker, V4L2, etc.) and create a live video stream using Node.js as the transport mechanism.

If your webcam has a network interface and already offers a streaming server, you might want to look into a reverse proxy solution instead, using nginx or Apache for example. Here is a solution where nginx is being used to proxy a webcam stream formatted by VLC.

Here is a creative solution that captures a video stream by taking individual frames, encoding the image data, and using websockets to push the image data to a canvas element on a client page, using Node.js as the intermediate server.

Questions:
Answers:

I haven’t dived into this yet, but you could possibly use Python to do it with OpenCV.

Then you can use node-python to call python from Node.

http://opencv-python-tutroals.readthedocs.org/en/latest/py_tutorials/py_gui/py_video_display/py_video_display.html

https://www.npmjs.com/package/node-python

Optionally if everything is running on Windows, you can use .Net and C# to talk to the camera and then use edge.js to make .Net calls.

Edge.Js supports linux now via Mono, you just need to be running a Linux distro that hos a mono package available, or build mono yourself.

Questions:
Answers:

It’s possible to use OpenCV with Node to access your camera… this article will give you a basic overview.
https://community.risingstack.com/opencv-tutorial-computer-vision-with-node-js/

Another way is to search by camera on npm repository, you will find a lot of modules that deal with webcams.

Questions:
Answers:

accessing web in node application is very simple we just need to use html5 getUserMedia() method to do that and reaming part is very easy here is complete code please node i am using express framework:

Step 1. My layout.jade file in which i am accessing web cam

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");
        });
      };
   });

Step 2. my routes file in which i hand or save my uploaded 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'}));
        }
    });
});

For complete tutorial please follow link Accessing WebCam with NodeJS and save click image – TrinityTuts

Leave a Reply

Your email address will not be published. Required fields are marked *