Search code examples
javascripthtmlgetusermedia

ImageCapture is not defined


I am trying to execute this code:

const canvas = document.querySelector('canvas');

var interval;
var track;

navigator.mediaDevices.getUserMedia({video: true})
.then(gotMedia)
.catch(err => console.error('getUserMedia() failed: ', err));

function gotMedia(mediastream) {
    track = mediastream.getVideoTracks()[0];
    var imageCapture = new ImageCapture(track);
    interval = setInterval(function () {
      imageCapture.grabFrame()
        .then(processFrame)
        .catch(err => console.error('grabFrame() failed: ', err));
    }, 1000);
}

function processFrame(imgData) {
    canvas.width = imgData.width;
    canvas.height = imgData.height;
    canvas.getContext('2d').drawImage(imgData, 0, 0);
}

function stopGrabFrame(e) {
    clearInterval(interval);
    track.stop();
}

to take a snapshot of a live video from my webcam but it fails and the console of the browser says the following:

getUserMedia() failed: ReferenceError: ImageCapture is not defined at gotMedia

Do this means that my web browser (Google Chrome) doesn't support ImageCapture? Can I fix it?


Solution

  • The ImageCapture specification is not implemented in any browser yet, except behind a flag.