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