Access to mobile cameras PWA

While working on PWA. I was faced with the need to access the camera / images of a mobile device (it was out of the question in a native application). After some research, I came across this little nugget.

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

      

        
        
        
      

    

By adding accept and capture attributes, I was able to access my phone camera and images. I should also point out that you don't need to do anything with your server side (Node or PHP). It acts the same as the standard input for uploading files in the browser.

You can open video devices in a 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 the 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)
}

      

        
        
        
      

    

Accessing the camera through Cordova (and more specifically ionic, since you noted the ionic structure in your question) is a matter of installing the plugin, whether you are using ionic or not. There are several camera plugins, but the one recommended by ionic can be found here:

https://github.com/apache/cordova-plugin-camera

For example, to add a plugin to your ionic project, just run:

ionic Cordova plugin add cordova-plugin-camera

      

        
        
        
      

    

You would use this in a component .ts file (for example):

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(private camera: Camera) { }

...


const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it base64:
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});

      

        
        
        
      

    

The above implementation was taken from here where more details can be found:

https://ionicframework.com/docs/native/camera/