Record Video with Chrome on iOS not triggering "allow access"

[elfar]

Description

The example https://collab-project.github.io/videojs-record/examples/video-only.html does not work on Chrome in iOS

Steps to reproduce

Open https://collab-project.github.io/videojs-record/examples/video-only.html with Chrome and iPhone

Results

Expected

Expected to be triggered to allow access to camera

Actual

It showed the same start screen as with android etc but upon clicking the camera icon nothing at all happens. Also, if clicking on resize will show a loading gif icon under the camera icon forever

Error output

Am afraid I do not have any debug info from the ios phone I borrowed to check this :(

Additional Information

Please include any additional information necessary here. Including the following:

versions

It is running on your end so not sure what version you use - assuming latest?

browsers

Chrome 72.0.3626.101

OSes

iPhone 6 - iOS 12.1.4

PS - I also tried Safari on same phone, it did trigger the "allow access to camera" question but could not really get it to record - on maximize I could see the camera working but could not record.

PPS - I also implemented this myself on a mobile site with latest version 3.5.1 and worked perfectly on android/linux chrome/firefox but same thing happened with iOS Chrome as on your example site - tried changing default webm format to mp4 but that did not help

[thijstriemstra]

thanks for the report. It would be really useful to see the browser console messages. Can you follow these instructions and paste the results here? https://www.lifewire.com/activate-the-debug-console-in-safari-445798 or https://medium.com/@mattcroak718/debugging-your-iphone-mobile-web-app-using-safari-development-tools-71240657c487

[elfar]

Thanks for your quick reply, correct me if I'm wrong but it seems to me both links you provided require a mac computer to work? I am not a "iMan" and don't own a Mac (nor iPhone, was just borrowing one to confirm a complaint that my recorder was not working). If I manage to get my hand on one I will - unless there is some way to do this with only iPhone and Linux!?

[elfar]

FYI - think I got debugging working with my linux - https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7 - at least I could see Network and Elements data coming in, but no console data popped I'm afraid. Also, seems this and your links only work for Safari, which is OK as I also can't record anything in Safari (but at least Safari triggers me to allow access to camera and I can see the camera in action, just not record) but does not help with figuring out why chrome does not even trigger the question to allow access. Also I asked a couple of others with iPhone 8 and they had the same issue, nothing happens when clicking the video camera icon.

[thijstriemstra]

my bad, you should use https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7

[thijstriemstra]

at least I could see Network and Elements data coming in, but no console data popped I'm afraid

There should be console logs. Without them it's hard to debug or even know what's going on.

[elfar]

Yeah, it is strange all other debug info show up just fine in my tools, just nothing in console, simply empty, annoying! Will have another go at this tomorrow, at least it seems this is readily reproducible as none of my friends with iPhone and chrome can get this link to work as well.

[thijstriemstra]

also see #347

[elfar]

Yeah thanks had noticed it, possibly a similar cause. OK - there was some debug_proxy bug but managed to work around it and get console data. I can only do this in Safari though and am more interested in what is going on in chrome, you do not happen to know of a way to get console log for ios chrome? In any way, getting safari working is also of interest - here is a screenshot of the console. 1st error comes after accepting access to camera (a question which is not triggered at all on chrome) and the 2nd error comes after clicking record - which opens up the full view of the camera but does not seem to record anything, only thing I can do is pause and close full view. Hope this is helpful

[thijstriemstra]

you do not happen to know of a way to get console log for ios chrome?

I'll have to research..

The screenshot and errors you see for Safari look very familiar, see #332

[ddunford]

I've hit this problem today too. If you need anything, let me know.

[thijstriemstra]

Can you give https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter a try?

[ddunford]

Can you give https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter a try?

Sorry, I misread IOS for MacOS. I'm not seeing the 'allow device' pop up when clicking the camera (?) on the demo on a MacOS using Chrome (73). I'm just collecting more info and will get back to you.

[elfar]

Been looking a bit more into this, recordrtc samples as well have the same issue and I have not succeeded in finding a single solution at all out there which works in Safari/Chrome on iOS. Apart, from basic "capture" stuff - but this leaves the browser so I lose the control I was looking for regarding autostop video and limit recording length etc. Let me know if there are any further logs you need.

[thijstriemstra]

ha, our prayers have been heard.. this was just released: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html @elfar @dunfy can you check that out?

[thijstriemstra]

And can you also try adding playsinline in the video tag, e.g.

<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>

Make sure to use and test with HTTPS-only pages.

[thijstriemstra]

But it looks like getUserMedia (which is used to start the camera) is only allowed in Safari on iOS, not on Chrome for iOS :open_mouth:

See https://bugs.chromium.org/p/chromium/issues/detail?id=752458

That would mean for now (until Apple fixes it), only Safari for iOS supports getUserMedia. Shocking considering it's 2019..

[elfar]

OK, had tried chrome://inspect before without success but just noticed that it was only introduced in M73 and I was running M72 - after an upgrade this worked very nicely. It is as you wrote getUserMedia does not seem to be supported!

The "playsinline" is that something you think would help with getting Safari working then? I can try it later today in which case.

Here is the chrome log:

[elfar]

FYI - added playisinline to my own player and it was the closest I have been to a working version in iOS (Safari ofc as Chrome does not exactly seem to be on Apple todo list any time soon!) I could get a inline functional camera which was showing live what I was filming. Also, although the control panel was blinking like crazy, I managed to hit record and it actually started counting up the secs as if it was recording, however it did not save any data like it does on android and this is the console log

VIDEOJS: Using video.js 7.4.1 with videojs-record 3.4.0 and recordrtc 5.5.4

index.js:192 device is ready!

index.js:70 started recording video stream.

index.js:12429 VIDEOJS: ERROR: Your browser does not supports Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder.
(anonymous) @ index.js:12429
dispatcher @ index.js:14092
trigger @ index.js:14226
dispatcher @ index.js:14090

index.js:351 It seems that recorder is destroyed or "startRecording" is not invoked for video recorder.

[thijstriemstra]

It is as you wrote getUserMedia does not seem to be supported!

Thanks for the log messages, I will improve the error message for browsers that do not have getUserMedia like Chrome iOS. I'll also add a note to the browser support table in the readme.

FYI - added playisinline to my own player and it was the closest I have been to a working version in iOS

are you saying that without playsinline it's not properly working on Safari iOS?

Also, although the control panel was blinking like crazy,

That's really weird..

I hope the upcoming iOS Safari release will have MediaRecorder support.

[elfar]

Yes, this does not work in Safari iOS, it is closer to working than Chrome as it gets past the "getUserMedia" and asks for permission. However, without playisinline clicking on record will open up the video full screen and the only thing you can do is press pause/play and nothing is seemingly being recorded and no counter. With playisinline, you will see the camera inline and clicking on record will actually count up recording seconds as if it was working, however, seemingly nothing is being recorded. I have tested a fair amount of possible solutions out there and not been able to get any of them to record video in browser in Safari, only by leaving the browser and use capture will it work.

My first screenshot is what I get in console log in Safari iOS on your sample site.

[thijstriemstra]

thanks for the confirmation. I will add playsinline to all video examples as it seems required for Safari.

[thijstriemstra]

The improved error message is now in master branch and will be released as 3.6.0 this week.

[elfar]

Great thanks for your effort on this. Btw regarding the supported browser section for videojs-record isn't this then misleading?

"Safari Stable / Beta/ Preview (OSX/iOS) Audio + Video + Image + Screen"

Because, and correct me if I'm wrong, you will not be able to record anything (at least not video, have not been testing audio) on any iOS browser using this code or, seemingly to me, any other code out there?

[finnscho]

Hi, I have the same problems using safari and chrome on ios. I ported my web app via cordoba to ios and this doesn't work as well. Is there any solution to this? Thank you & best regards

[thijstriemstra]

Is there any solution to this?

Please read the info in this ticket before commenting. Star https://bugs.chromium.org/p/chromium/issues/detail?id=752458 if you want to let them know this is an important feature.

[mshahamirian]

I'm having the same problem in iOS Chrome and safari.

[thijstriemstra]

But it looks like getUserMedia (which is used to start the camera) is only allowed in Safari on iOS, not on Chrome for iOS See https://bugs.chromium.org/p/chromium/issues/detail?id=752458 That would mean for now (until Apple fixes it), only Safari for iOS supports getUserMedia. Shocking considering it's 2019..

Good news! According to https://caniuse.com/stream:

Before iOS 14.3 getUserMedia returned no video input devices in UIWebView or WKWebView, but only directly in Safari.

So Chrome for iOS 14.3 or newer supports getUserMedia (haven't tested yet). Finally :)

[thijstriemstra]

So Chrome for iOS 14.3 or newer supports getUserMedia (haven't tested yet). Finally :)

Tested it with iOS14.4 and Chrome 87.0.4280.77 but couldn't produce a proper recording (it created a 0kb file). Safari on iOS14.4 worked fine though.

[Lakshmikanth8055]

Hello, We are facing issue on Ipad-Chrome browser (OS-14.7 and OS- 14.3 ) and (Latest chrome version) , We can record the video but not able to play on the chrome browser, but same working fine in the safari browser. (In the Iphone safari and chrome it is working fine).. Any Suggestion or Solutions please.

[rs-cuongph]

Hi. @thijstriemstra th We are facing issue on Chrome Ios , we can click record the video but after 2-3s browser willl refresh. (In safari it is work perfect).. More detail is below: