Hi I'm using ImageCapture in javascript to capture a photo from device camera video on my webapp.
The feature works fine on desktop, but on my iphone(safari) I get this error:
Can't find variable: ImageCapture
Here is my code:
// get camera permission and start the stream
var stream, imageCapture;
function getMediaStream() {
if (!window.navigator.mediaDevices) {
$("#unsupported").show();
$("#valid-permissions").hide();
$("#invalid-permissions").hide();
$("#alternative-button").show();
return;
}
window.navigator.mediaDevices.getUserMedia({video: {facingMode:'environment'}})
.then(function(mediaStream)
{
stream = mediaStream;
let mediaStreamTrack = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(mediaStreamTrack);
var video = document.querySelector('#webcam');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function (error) {
// this alert gives me the error above
alert(error.message);
$("#valid-permissions").hide();
$("#unsupported").hide();
$("#invalid-permissions").show();
$("#alternative-button").show();
});
}
It looks like ImageCapture is not a supported Web API in Safari (showing only ?s in the table provided here: https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture#Browser_compatibility).
However, there is a polyfill available from Google Chrome Labs here: https://github.com/GoogleChromeLabs/imagecapture-polyfill
You may be able to use the polyfill to achieve your goals in Safari.