JavaScript - How to take a picture in webcam with EXIF data?

Solution 1:

Tested on Pixel 3 - it works. Please note - sometimes it does not work with some desktop web-cameras. you will need exif-js to get the EXIF object from example.

  const stream = await navigator.mediaDevices.getUserMedia({ video : true });
  const track = stream.getVideoTracks()[0];
  let imageCapture = new ImageCapture(track);
  imageCapture.takePhoto().then((blob) => {
      const newFile = new File([blob], "MyJPEG.jpg", { type: "image/jpeg" });
      EXIF.getData(newFile, function () {
          const make = EXIF.getAllTags(newFile);
          console.log("All data", make);
     });
  });

Solution 2:

unfortunately there's no way to extract exif from canvas.

Although, if you have access to jpeg, you can extract exif from that. For that I'd recommend exifr instead of widely popular exif-js because exif-js has been unmaintained for two years and still has breaking bugs in it (n is undefined).

With exifr you can either parse everything

exifr.parse('./myimage.jpg').then(output => {
  console.log('Camera:', output.Make, output.Model))
})

or just a few tags

let output = await exifr.parse(file, ['ISO', 'Orientation', 'LensModel'])