iOS Mobile

[bharatmalhotra84]

Hi,

I'm using the libary and can see it has troubles showing the face dectection frame on iOS (mobile). After allowing the camera, it does not load the frame. Is there anything I should be looking at specifically to make it work?

Your input is much appreciated.

Regards,
Bharat

[vladmandic]

without providing more information, i cannot really help.

you haven't even stated are you using safari or chrome?
i'd suggest to try with chrome and if it doesn't work, attach chrome inspector to instance running on ios so you can monitor browser console output.

note that ios is supported as best-effort as i do not have ios device available for testing.

[bharatmalhotra84]

Hi Vlad,

Sorry I did not mention it. I'm checking it on safari (iphone 12). I can see console errors using web inspector. see the attached.

[bharatmalhotra84]

I tried cleaning up cache on my safari but no luck.

[vladmandic]

first exception is in your code, not inside human library - jQuery null is not an object.
there is exception at the end as well, NotAllowedErrror, but cant see exactly where. check between browser and web server if settings are correct to use things like camera access.

[bharatmalhotra84]

Hi Vlad, sorry for the delay reaching on this. I have resolved all other errors except this one. I was trying to reach out to other platforms to separate the issue from the library and iphone (safari).

[bharatmalhotra84]

I checked safari camera settings and it's allowed

[vladmandic]

it would help if you could copy&paste errors instead of hard to read screenshots.
but important part - expand that exception so it shows more details - i don't know what is in you main.js line 95

in general, this is most commonly related to browser enforcing different things when working with video streams such as:

• when requesting webcam video stream, make sure you set audio: none or browser may block access
• try calling video.play() in some onclick event instead?
  a lot of browsers don't allow autoplay of videos unless there is some user interaction

[bharatmalhotra84]

ok, I will try to pull some internal information here. I see audio is set to false. do you suggest changes in below code so video starts on a some kind of user event instead of autoplay?
async function webCam() {
try {

    status("starting webcam...");
    const options = {
        audio: false,
        video: {facingMode: "user", resizeMode: "none", width: {ideal: document.body.clientWidth}}
    };
    const stream = await navigator.mediaDevices.getUserMedia(options);
    const ready = new Promise((resolve) => {
        dom.video.onloadeddata = () => resolve(true);
    });
    dom.video.srcObject = stream;
    dom.video.play();
    await ready;
    dom.canvas.width = dom.video.videoWidth;
    dom.canvas.height = dom.video.videoHeight;
    const track = stream.getVideoTracks()[0];
    const capabilities = track.getCapabilities ? track.getCapabilities() : "";
    const settings = track.getSettings ? track.getSettings() : "";
    const constraints = track.getConstraints ? track.getConstraints() : "";
}
catch (e) {
    status("Problem starting webcam, refresh page and make sure you allow your browser access.");
}

}

[bharatmalhotra84]

I can see also in the html, I added so i will try removing autoplay

[vladmandic]

thats already in demo already, just first remove dom.video.play() so it doesnt try to autoplay from webcam init method
and then use something like this:

human/demo/typescript/index.ts

Lines 65 to 68 in 8aa4d3d

	dom.canvas.onclick = () => { // pause when clicked on screen and resume on next click
	if (dom.video.paused) dom.video.play();
	else dom.video.pause();
	};

[bharatmalhotra84]

Thanks Vlad. I also sent you another code that is actually responsible for autoplay. If i remove it the video does not load at all

[vladmandic]

does it not load or does not start playing? if you're using canvas overlay over video remember that first frame does not get rendered until its processed, so it shows as blank even if video is loaded. i'm basically guessing here since i don't know your entire code.

[bharatmalhotra84]

I think you are right here. our requirement is video to be autoplay as soon as user is reached to this step. it works fine on all other browsers laptop or mobile except iphone safari v 15.4 / chrome / edge. if you have anything specific for this case, that would be great!

[vladmandic]

quick google shows some hints that video tag should have "autoplay muted playsinline" to work on newer iphones
other than that, i don't have iphone at hand to try out anything

[bharatmalhotra84]

i have autoplay muted already and will try with playsinline and let you know.

[bharatmalhotra84]

adding playsinline did the trick! Thank you Vlad for your time and suggestions. have a nice weeked.