PWA mobile camera access - ionic-framework

Question

My requirement is to access the mobile camera in iOS and android using the mobile browser.
Using Ionic PWA app can I access mobile camera in iOS and android device browsers? Looking for PWA solution using Cordova (not native solution).

Answer 1

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.

Answer 2

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

Answer 3

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%:

Answer 4

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>

Answer 5

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

Answer 6

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>

Answer 7

Accessing the camera via Cordova (and more specifically ionic since you tagged the ionic-framework in your question) is a matter of installing the plugin, whether you're 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 the plugin to your ionic project, simply run:
ionic Cordova plugin add cordova-plugin-camera
You would use it like this in your component's .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's base64:
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
The above implementation was taken from here, where more details can also be found:
https://ionicframework.com/docs/native/camera/