Using webcam with Javascript to take snapshots

Question

making a page to take snapshots with the webcam. but suddenly it stopped working on every computer. Did i make a typo i cant see myself, or does anyone has an idea too fix this??

added the draw in bit aswell

// 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 },
        image_format= "jpeg",
        jpeg_quality= 85,
        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();
            $("#snap").show();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
            $("#snap").show();
        }, errBack);
    } else if(navigator.mozGetUserMedia) { // moz-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
            $("#snap").show();
        }, errBack);
    }



// Get-Save Snapshot - image 
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
        // the fade only works on firefox?
        $("#video").fadeOut("slow");
        $("#canvas").fadeIn("slow");
        $("#snap").hide();
        $("#reset").show();
        $("#upload").show();

console just gives me "failed to load resource [media%20MediaStream] (not found) — Mathias Rønnow Nørtoft, Oct 05 '16 at 13:04
yeah tbh it used to work, but only i chrome, yeez. any other ideas to make this is welcome. — Mathias Rønnow Nørtoft, Oct 05 '16 at 13:04

Kaiido · Accepted Answer · 2016-10-05T22:45:44.587

2

You never draw your video to the canvas in this part of the code.

Also, navigator.getUserMedia is not the "standard" anymore, it has been updated to navigator.mediaDevices.getUserMedia which will return a Promise.

var ctx = c.getContext('2d');
var vid = document.createElement('video');

vid.oncanplay = function() {
  c.width = this.videoWidth;
  c.height = this.videoHeight;
  draw();
}

navigator.mediaDevices.getUserMedia({
  video: true
}).then((stream) => {
  vid.srcObject = stream;
  vid.play();
});

function draw() {
  ctx.drawImage(vid, 0, 0);
  requestAnimationFrame(draw);
}

<canvas id="c"></canvas>

And a fiddle for chrome since it doesn't allow gUM in SO-snippets.

Ps : if you need to support older implementations, check the official WebRTC polyfill, adapter.js

edited Oct 05 '16 at 22:45

answered Oct 05 '16 at 13:05

Kaiido

123,334
13
219
285

i see what you mean and what works, but iam not sure how i implement it in my own code for now. ive made a fiddle with the full code.you mind taking a look? https://jsfiddle.net/7LknaL0e/ – Mathias Rønnow Nørtoft Oct 05 '16 at 13:25
god o' god, king of kings, i salute you for removing my headache sir! – Mathias Rønnow Nørtoft Oct 05 '16 at 13:42
1

Kalido: you might also want to adopt vid.srcObject = stream; which is the shiny spec way to do things – Philipp Hancke Oct 05 '16 at 16:00
@PhillipHancke you're right. I guess I didn't because [I was playing with Blobs](http://stackoverflow.com/questions/39874867/canvas-recording-using-capturestream-and-mediarecorder?noredirect=1#comment67037087_39874867) at the same time and that FF unfortunatwly only accepts MediaStream as srcObject... – Kaiido Oct 05 '16 at 22:49

Using webcam with Javascript to take snapshots

1 Answers1