simpl icon indicating copy to clipboard operation
simpl copied to clipboard

Not working on iphone SE

Open Ponant opened this issue 3 years ago • 19 comments

Hi, Clicking the start button on iphone SE does not trigger anything, neither on safari nor chrome nor firefox. Any clue??

Ponant avatar Jul 05 '21 07:07 Ponant

ios 14.6 with latest browsers as of today. And in settings I allowed access to camera by these browsers.

Ponant avatar Jul 05 '21 07:07 Ponant

sorry @samdutton , I was meaning the https://github.com/samdutton/simpl/tree/gh-pages/mediarecorder . It seems that on PC the camera permission is required upfront, whereas on mobile nothing happens and clicking the start button does nothing. I checked out that other samples, such as the one where we can pick the camera and microphone, or setting the resolution work on mobile. So, perhaps the bug comes from the initial load.

Ponant avatar Jul 05 '21 08:07 Ponant

Thanks for the heads-up.

This commit fixes the problem (for me on Safari 14.11 on Mac at least).

Does simpl.info/mr work for you now? (You might need to clear caches.)

samdutton avatar Jul 05 '21 10:07 samdutton

Here I am back Not yet unfortunately! I do not even see the alert you added. Tested on chrome and safari incognito modes :)

Ponant avatar Jul 05 '21 10:07 Ponant

@samdutton , I made some further test. The following doe not work neither on mobile https://webrtc.github.io/samples/src/content/getusermedia/record/ I get the error navigator.getUserMedia error:OverConstrainedError: InvalidConstraint I came to this link because I read your article https://developers.google.com/web/updates/2016/01/mediarecorder

I would really appreciate any guidance on the matter as I need to implement this on a web app (client-side) to allow a user to record a video at SD resolution (480p) and be able to respond in the UI in case of errors.

Ponant avatar Jul 05 '21 11:07 Ponant

Not sure why this isn't updating for you on simpl.info/mr. Did you try clearing caches?

The main change is to remove the options argument from the MediaRecorder constructor call. Does this work for you if you run the new code locally?

samdutton avatar Jul 05 '21 11:07 samdutton

Further info: https://simpl.info/getusermedia/constraints/ this one works if I click twice on the resolution button (example VGA). If I click once, I get a prompt to allow for the camera, and accepting gives a black image in the html. Clicking a second time on the resoulation button brings in the camera full screen.

This one https://simpl.info/getusermedia/sources/ , is fantastic!!! So there is something in between the different codes which make it work or not??

Ponant avatar Jul 05 '21 11:07 Ponant

@samdutton , I cleared the browser settings and in incognito mode. Unfortunatly on the phone it is hard to debug. On pc it always worked.

Ponant avatar Jul 05 '21 11:07 Ponant

I think the issue comes upon the first load of the page, but I am not sure yet.

Ponant avatar Jul 05 '21 11:07 Ponant

Removing the options argument from the MediaRecorder constructor fixed the issue for me on simpl.info/mr in Safari (on Mac at least — I don't have an iPhone with me). Does this work on your site?

At one point I also noticed a problem with MediaSource using BrowserStack with an iPhone, but I haven't been able to reproduce that.

samdutton avatar Jul 05 '21 14:07 samdutton

On ipad it works, but not on iphone SE (bought in 2019 or so). I checked it out on Safari Chrome Edge Firefox mobile Firefox Focus Opera

The desktop version asks for permisison on load, but the phone just ignores it and hitting start shows nothing. I will go into the code to see if it can be fixed. I have hope because the other examples you provide (links above) work well.

But my main concern is to find a universal way to do it because i need to rely on this API in production. Any chance this API is stable as of today? I keep you posted on that

Ponant avatar Jul 05 '21 15:07 Ponant

Interestingly, this one https://simpl.info/getusermedia/sources/ sends me 3 popups:

  1. Allow microphone access
  2. Allow camera access
  3. Allow microphone and camera access

Perhaps the MR code is not messing up with permissions. I will print out errors in a p tag, I should be able to get something

Ponant avatar Jul 05 '21 15:07 Ponant

I think the problem is with MediaSource.

Apparently this is supported on iPad but not iPhone: caniuse.com/?search=mediasource.

Depending on what you want to do, you may not need MediaSource at all.

There's a WebKit MediaRecorder example here: webkit.org/blog/11353/mediarecorder-api.

samdutton avatar Jul 05 '21 16:07 samdutton

Ok thank you for the info that might be it. I need to offer users to record a video on at 480p and be able to preview results and then upload it to our servers. Would that make it without mediasource? I need the flow to be consistent throughout browsers and os’s

Ponant avatar Jul 05 '21 17:07 Ponant

The choice of 480p is to reduce memory and upload size. If i use the input field method, that will open their camera app, which means they can record in hd or higher, which i would need to avoid

Ponant avatar Jul 05 '21 17:07 Ponant

But mediasource seems supported on other browsers on mobile, whereas the code is mot working on all browsers on iphone

Ponant avatar Jul 05 '21 17:07 Ponant

Correct: MediaSource is not implemented on iPhone.

On Mon, 5 Jul 2021 at 18:36, Ponant @.***> wrote:

But mediasource seems ok on other browsers on mobile, whereas the code is mot working on all browsers on iphone

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/samdutton/simpl/issues/162#issuecomment-874253561, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABSDKVG2PHXHHI77LO7JFTTWHUQVANCNFSM472FOAHQ .

samdutton avatar Jul 05 '21 18:07 samdutton

You mean on safari iphone? Otherwise i am confused. I have the major browsers on my iphone and the MD sample works on none. But the caniuse points to safari ios as partial support, so i guess mediasource should be ok on chrome edge and firefox on iphone. Agree?

Ponant avatar Jul 05 '21 18:07 Ponant

The lack of support on iPhone is for all browsers.

All browsers on iOS must use WebKit https://developer.apple.com/app-store/review/guidelines/#2.5.6, the same engine used by Safari.

On Mon, 5 Jul 2021 at 19:37, Ponant @.***> wrote:

You mean on safari iphone? Otherwise i am confused. I have the major browsers on my iphone and the MD sample works on none. But the caniuse points to safari ios as partial support, so i guess mediasource should be ok chrome edge and forefox on iphone. Agree?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/samdutton/simpl/issues/162#issuecomment-874276308, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABSDKU25TWPUQ6SKBQDOATTWH3XTANCNFSM472FOAHQ .

samdutton avatar Jul 06 '21 08:07 samdutton