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

Question

I am currently using webcam (not native camera) on a web page to take a photo on users' mobile phone. Like this:

var video: HTMLVideoElement;
...
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
var jpegData = canvas.toDataURL('image/jpeg', compression);

In such a way, I can now successfully generate a JPEG image data from web camera, and display it on the web page.

However, I found that the EXIF data is missing. according to this:

Canvas.drawImage() will ignore all EXIF metadata in images, including the Orientation. This behavior is especially troublesome on iOS devices. You should detect the Orientation yourself and use rotate() to make it right.

I would love the JPEG image contain the EXIF GPS data. Is there a simple way to include camera EXIF data during the process?

Thanks!

Answer 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);
     });
  });

Answer 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'])