PWA mobile camera access

While working on a PWA. I came across the need to access a mobile device's camera/images.(a native app was out of the question). After doing some research I came across this little nugget.

<input type="file" accept="image/*" capture="camera" />

By adding the accept and capture attributes I was able to access my phone's camera and images. I should also point out that you don't need to do anything special with your Server side (Node or PHP). It acts just like a standard file upload input in a browser.

You can open video devices in the web browser...

<video id="cameraPlayer"></video>

// find the video devices (font/back cameras etc)
navigator.mediaDevices.enumerateDevices().then(function (devices) {
    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
    devices.forEach(function (device) {
        if (device.kind === 'videoinput') {
            cameraDeviceIds.push(device.deviceId)
        }
    })
})

// attach camera output to video tag
navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: cameraDeviceIds[currentCameraIndex] } }
}).then(function (stream) {
    document.getElementById("cameraPlayer").srcObject = stream
})

If you just want an image you can use an input

<input type="file" accept="image/*" id="inputPhoto" class="hidden" capture="environment" />

   // trigger capture
   document.getElementById('inputPhoto').click()

  // event handler for change
    function onInputPhotoChange() {
    if (document.getElementById('inputPhoto').files.length === 0) {
        return
    }


    var reader = new window.FileReader()
    reader.onloadend = function (event) {
        event.target.result
        // image data
        // note you may need to rotate using EXIF data on a canvas
    }

    // Read the file into memory as dataurl
    var blob = document.getElementById('inputPhoto').files[0]
    reader.readAsDataURL(blob)
}

If you want to use the camera in an Ionic PWA app, you can use Capacitor: https://capacitor.ionicframework.com/docs/apis/camera

I implemented the camera feature and it works 100%:

In addition to the above answers, you will have to add this in your index.html file, for the camera to work on PWA

<script nomodule="" src="https://unpkg.com/@ionic/pwa-elements@1.3.0/dist/ionicpwaelements/ionicpwaelements.js"></script>

The solution given above only make selection of file resticted to i mages category only. But we want to access camera or audio device here of browser. So, to rescue this challege here come api from browser("browsers are powerfull now yeah").

getUserMedia(:true/false)

Here <media_type> is type of media you want to access like audio,video You can set it as {audio: true/false} and {video:true/false}. But error "NotFoundError" will be returned if media not found.

Here is eg; :>

if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){ const stream = await navigator.mediaDevices.getUserMedia({video: true}) }

It will run on Android and Ios platform with PWA and on a browser

home.page.ts file

import { Component } from '@angular/core';
import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, 
CameraPhoto, CameraSource } from '@capacitor/core';
const { Camera, Filesystem, Storage } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}
  async capturedImage(){
    const image = await Camera.getPhoto({
      resultType: CameraResultType.DataUrl, 
      source: CameraSource.Camera, 
      quality: 90 
    });
    console.log('image',image)
  }
}

home.page.html

 <ion-button expand="full" (click)="capturedImage()"> Captured Image</ion-button>