QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Capturing Webcam Image Using JavaScript

Capturing Webcam Image Using JavaScript

This post is a part 12 of Capturing Webcam Image Using JavaScript post series.

In getUserMedia article I explained how we can retrieve webcam video using JavaScript. Developers started applying different techniques to retrieve a single frame out of the stream which would result in a captured image. But non of these techniques to capture a image was standard. Therefore a new image capture API was introduced to capture images using JavaScript.


ImageCapture API

ImageCapture class is the heart of the API. It takes an video track and extracts a image out of it. Let’s see an example of how its done:
View Demo

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || null;

        var video_audio_properties = {video: true};

        video_audio_properties = {video: {mandatory: {minWidth: 300, minHeight: 300, minFrameRate: 30}, optional: [{ minFrameRate: 60 }]}, audio: true};

        function onSuccess(stream)
        {
            var videoDevice = stream.getVideoTracks()[0];
           
            if(window.ImageCapture)
            {
                var pictureDevice = new ImageCapture(videoDevice);
           
                pictureDevice.onphoto = showImage;
                pictureDevice.onphotoerror = photoError;
               
                //take the photo
                pictureDevice.takePhoto();
            }
            else
            {
                alert("Image Capture API is not supported");
            }
           
           
        }
       
        //a blob of the caotured image is passed to the success callback
        function showImage(blobeven)
        {
            //retrieve the Data URI of the image
            document.getElementById("captured_image").src = URL.createObjectURL(blobevent.data);
        }
       
        function photoError()
        {
            console.log('failure to take photo');
        }
       
        function onError(error)
        {
            console.log("Video capture error: ", error.code);
        }

        if(navigator.getUserMedia != null)
        {
            navigator.getUserMedia(video_audio_properties, onSuccess, onError);
        }
        else
        {
            alert("microphone and webcam API not supported");
        }

ImageCapture provides a lot of other customisation that can be applied to the retrieved image. More on it here.

Aug 25, 2014Narayan Prusty
Capturing Webcam Video and Microphone Audio Using HTML5Check if CSS property is supported using CSS and JavaScript

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Capturing Webcam Video and Microphone Audio Using JavaScript
  • Capturing Webcam Video and Microphone Audio Using HTML5
  • What is Multiplexing in HTTP/2?
  • What is Server Push and Promises in HTTP/2?
  • Content Security Policy Tutorial with Examples
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license