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
Related
I currently have an iPhone that is connecting to a browser via WebRTC and from that browser I have other additional browser windows connected via webRTC that preview the same video stream.
iPhone > Safari Desktop (video works) > Chrome/Firefox/Safari Desktop works great
iPhone > Firefox (video works) > Chrome/Firefox/Safari Desktop works as well
iPhone > Chrome (video works) > Chrome/Firefox/Safari display a black video
My issue is a little hard to explain so I've created an image to help illustrate the issue:
The crazy thing is it works when the source is an Android device or another browser. Is it possible that iOS Safari is limiting the WebRTC stream to the first browser? Is there a way to debug why Chrome is displaying black instead of the video?
It looks like this is a known issue with Chrome and H264:
https://bugs.chromium.org/p/chromium/issues/detail?id=1073828&q=black%20h264&can=2
When I disable H264 it works so I will run with that for now. Unfortunately that means we miss out on the benefits of H264 hardware encoding/decoding.
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.
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.
I know with below code will capture a image from ios 6+ safari mobile browser
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
Is there any other way of capturing a image from safari mobile browser using html5/JS?
Is there any alternative for WebRTC MediaStream API in iOS safari mobile browser?
Safari does not support WebRTC yet.
http://iswebrtcreadyyet.com/
To start with WebRTC on iOS, you may explore this demo https://github.com/ISBX/apprtc-ios. It't not exactly the same as you're looking for. The demo app achieves video chat. But it should be trivial to get image
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