Webcam Capture to

Question

Using javascript or Jquery I want to get the current image from the webcam feed on my page and put it in an tag.

I have a bit of script which generates tags dynamically with unique Id's so after generating one all I want to do is capture an image from the webcam at that exact moment and save the image in the generated tag. After taking the image I just want the webcam to carry until the next time it takes a picture.

I already have a webcam feed running using a library which does face tracking, however I want to extend this with this feature to create a gallery of captured images on the page.

The library I am using is ClmTracker

Creator of the library suggested calling getImageData(x,y,w,h) on the video element and I have tried this. also tried to implement tutorials I have seen on other websites but to no avail. It would seem the answer would need to be specific to my code. I have tried to use canvas instead of tags to put the image in to, but I kept getting errors due to them being created dynamically in the code.

var vid = document.getElementById('videoel');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

/********** check and set up video/webcam **********/

function enablestart() {
    var startbutton = document.getElementById('startbutton');
    startbutton.value = "start";
    startbutton.disabled = null;
}


navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;

// check for camerasupport
if (navigator.getUserMedia) {
    // set up stream

    var videoSelector = {
        video: true
    };
    if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
        var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
        if (chromeVersion < 20) {
            videoSelector = "video";
        }
    };

    navigator.getUserMedia(videoSelector, function (stream) {
        if (vid.mozCaptureStream) {
            vid.mozSrcObject = stream;
        } else {
            vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }
        vid.play();
    }, function () {
        //insertAltVideo(vid);
        alert("There was some problem trying to fetch video from your webcam. If you have a webcam, please make sure to accept when the browser asks for access to your webcam.");
    });
} else {
    //insertAltVideo(vid);
    alert("This demo depends on getUserMedia, which your browser does not seem to support. :(");
}

vid.addEventListener('canplay', enablestart, false);

How can I capture an image from the webcam and put it in a div using the code above as a basis?

I'm not sure I can give any more details as I have not got the knowledge on how to do this.

score 2 · Accepted Answer · answered May 23 '14 at 14:32

2

First, draw it to a canvas:

var canvas = document.createElement('canvas');
canvas.height = video.height;
canvas.width = video.width;
canvas.getContext('2d').drawImage(video, 0, 0);

And now you can create the image:

var img = document.createElement('img');
img.src = canvas.toDataURL();

answered May 23 '14 at 14:32

Oriol

274,082
63
437
513

would you be willing to post a working example using the code I provided as a basis? – Dan W May 23 '14 at 14:50
@DanW My `video` variable is your `vid` one. And just run the code when you want. If you provide a working example of your code, I will add this code. – Oriol May 23 '14 at 14:55
Can I chat to you so I can show you my code? and you can attempt to implement it? I'm not sure whether I can or how I can chat without being prompted in the comments – Dan W May 23 '14 at 15:13
@DanW Why can't you post it in your question? About the chat: http://meta.stackexchange.com/questions/110330/how-do-i-invite-someone-to-chat-or-send-a-private-message – Oriol May 23 '14 at 15:23
Working on it for a project and would like to share it only where necessary, As I don't have 100 Rep I can't create a chat are you able to invite me to one? – Dan W May 23 '14 at 15:32
@DanW Not sure if I have done it well because I have never chat before, but I think I have invited you to http://chat.stackoverflow.com/rooms/54290/room-about-webcam-capture-to-img – Oriol May 23 '14 at 15:42

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I cannot get to seem to get the screenshot porting working, but the webcam part is working fine, I'll update when complete.

JSFiddle

HTML

<div id="container">
    <video autoplay="true" id="videoElement">dsasd</video>
    <br>
    <button onclick="snap()">Screenshot</button>
    <canvas></canvas>
</div>

JS

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}



        // Get handles on the video and canvas elements
        var video = document.querySelector('video');
        var canvas = document.querySelector('canvas');
        // Get a handle on the 2d context of the canvas element
        var context = canvas.getContext('2d');
        // Define some vars required later
        var w, h, ratio;
        
        // Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
        video.addEventListener('loadedmetadata', function() {
            // Calculate the ratio of the video's width to height
            ratio = video.videoWidth / video.videoHeight;
            // Define the required width as 100 pixels smaller than the actual video's width
            w = video.videoWidth - 100;
            // Calculate the height based on the video's width and the ratio
            h = parseInt(w / ratio, 10);
            // Set the canvas width and height to the values just calculated
            canvas.width = w;
            canvas.height = h;          
        }, false);
        
        // Takes a snapshot of the video
        function snap() {
            // Define the size of the rectangle that will be filled (basically the entire element)
            context.fillRect(0, 0, w, h);
            // Grab the image from the video
            context.drawImage(video, 0, 0, w, h);
        }

CSS

container {

margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;

}

videoElement, canvas {

width: 500px;
height: 375px;
background-color: #666;

}

Okay, I'll wait for the full thing. Are you pushing the image to a canvas element or an img tag? — Dan W, May 23 '14 at 14:22
You need to push them to a cavas tag first, then convert ie: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf — Dean Meehan, May 23 '14 at 14:25
I'll not get it complete to later, read this though, if you get a solution, post it here and ill update: This looks like the ticket.. http://www.html5rocks.com/en/tutorials/getusermedia/intro/ — Dean Meehan, May 23 '14 at 14:47
I have had a look and attempted a solution using that but it seems as though I am not quite good enough to work this one out! — Dan W, May 23 '14 at 14:52
Nice to see you have accepted the answer, could you post it for my own reference! :) — Dean Meehan, May 23 '14 at 23:57
If you look at Oriol's answer, the problem is it was more complex using my own code. But using his initial answer we were able to complete it for my code. Essentially, it needed to be saved to a canvas and then put in to img tags. — Dan W, May 24 '14 at 17:51

Webcam Capture to

2 Answers2

container {

videoElement, canvas {