My friend and I are currently working on an app that requires camera access. However, we have encountered some issues with getting the camera to work on iOS (specifically iOS 13).
After testing, we found that Safari freezes right after obtaining the camera content, while Chrome and Edge do not acquire camera access at all. Here is a snippet of our code:
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
function isMobile() {
const isAndroid = /Android/i.test(navigator.userAgent);
const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
return isAndroid || isiOS;
}
async function setupCamera() {
video = document.getElementById('video');
console.log("a");
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
width: mobile ? undefined : windowWidth,
height: mobile ? undefined : windowHeight
},
});
console.log("b");
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
Despite 'a' always being printed in the console, 'b' never appears. Any insights or suggestions on what might be causing this issue would be greatly appreciated!