I am trying to build a web app that will allow users to use the built in camera on an iPad to take a picture or video of themselves and then post it to Facebook. So far I have had no luck when testing getUserMedia() in Safari for iOS 6 or the Chrome app.
This info graphic shows that it is not supported by Safari with iOS 6 but it should work with Chrome, no?
http://caniuse.com/stream
Any help would be much appreciated.
Currently the only way for mobile Safari to get an image from the camera (or photo roll) is with an input element. It is quite simple:
<input id="image-picker" type="file" accept="image/*" />
Then in js:
$("#image-picker").change( function (event) {
var files = event.target.files;
if (files.length>0) {
// Do something with files[0]
}
});
Chrome for iOS uses identical methods/views for displaying and interpreting HTML, with the exception of a few Safari-specific optimizations. If Safari does not support getUserMedia(), then Chrome cannot support it either unless they build their own port of WebKit for iOS, and even then, it might be a stretch. The functionality you are after may be available through some other means, but not using getUserMedia().
Now Safari supports it starting from IOS 11 & Safari 11.
The namespaces have changed a little as its now mediaDevices prefixed.
Check https://caniuse.com/?search=mediaDevices
Related
I'm having WebRTC usability issue in Opera (55.0.2719.50560) and Firefox (68.3.0) on Android (Samsung Galaxy S6).
Firefox problem: is asking me multiple (around 3) times about permission to use camera. Also is asking me all the time which camera I want to use (regardless that constrains are set)
Opera: is asking me multiple times (around 3) which camera I want to use (regardless of constraints).
Exactly the same code is working properly on the same phone on Chrome and using Safari and Chrome on iPhone.
All content is served using https.
Thank you for any suggestions.
-webkit-autofill pseudo-class works fine in Desktop Chrome, but doesn't work in Mobile Chrome (IOS)
I have a custom float placeholder framework, and i want it to support chrome autocomplete (which fill the form on the page load or from the dialog)
So I added this code:
#{$all-text-inputs} {
&:-webkit-autofill + #{$this}-placeholder {
left: 0;
right: 0 ;
transform: translateY(-34px);
#include text(big, $lh: 1.3em, $fw: fw(regular));
opacity: 1;
}
}
This is working as expected in Chrome Desktop: -webkit-autofill fires and placeholder go to the top
But seems like this pseudo-class doesn't work in Chrome Mobile (IOS)
Input Structure:
<div class="input input-with-float-placeholder">
<div class="input-inner">
<input type="email">
<span class="input-placeholder">Username</span>
</div>
</div>
Hmm. It's an interesting question since Chrome (Blink) supports this webkit feature and other engines don't.
Unless you're targeting Chrome only (which you may be), it may be wise to go another direction. :-webkit-autofilll is not on any standards track and is not part of any specification. Something to think about. You are guaranteed to get wildly different results on differing platforms, as your question points out.
Moreover, mobile Chrome on iOS appears to use iOS's WKWebView** -- which doesn't support this non-standard webkit feature. My understanding is that WKWebView only supports features available to iOS Safari. (While the availability of the WKWebView API was a major step up for third-party browsers on iOS, it still != Chrome's Blink rendering engine.)
** I don't think that has changed in the last couple years, and your experience suggests it has not.
See:
Difference between Chrome for iOS and Chrome for Android
https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill
I'm trying to draw a video frame on canvas. It works well on desktops, but there are issues on Chrome on Android devices.
Please see the example:
http://buildar.com/static/drawimage/minimal.html
I've tested it on various Android devices and the only that's working on is Android 5 with Crosswalk (Cordova app).
After removing the Crosswalk or trying on other Android version, the drawImage function doesn't work.
I've found several related Chromium bug reports, but according to them, the issue seems to be fixed
https://code.google.com/p/chromium/issues/detail?id=501208
What can be the reason for it to work only on Android 5 + Crosswalk - if Crosswalk fully replaces the device Webview, wouldn't it work on older Android versions as well?
Is there any other way of capturing the video frame? I'm currently researching converting the video to <img>, alternative video plugin, using Webgl, taking video screenshot, but haven't discovered anything so far that could possibly work.
Use input file tag for capture image from ipad camera.
<input type="file" accept="image/*;capture=camera">
On Safari - back screen, on Chrome - work.
What problem with safari?
Hello you should know that the camera API is new and not available for all browsers. Here you can see, if it's available for the specific browsers. You also will see that Safari doesn't support it. Only a few supports it like : GC, FF, Opera, GC for Android and Android Browser.
Supporting Camera
I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.