How can I upload Photo from front Camera on Angular 17?

Question

I'm developing a webapp using Angular 17. I want the user to upload images, but only from camera. To upload files I use:

async compressFile(flag: boolean) {
    this.imageCompress.uploadFile().then(({ image, orientation }) => {
      this.takeExifData(image, flag, orientation) // fun to get exif-data
    });
  }

<button class="button" (click)="compressFile(true)"> Upload</button>

I'm trying to use <input capture='camera'> but this method gives user a choice between camera, gallery and files. How can I limit this choice to camera only?

Answer 1

You can use the getUserMedia method from MediaDevices check the Mozilla documentation here:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#syntax

You can try this:

navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
  .then((stream) => {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch((error) => {
    console.error('Error accessing camera:', error);
  });