I am working on a tablet (HP) with Windows 8.1. We developed a web application, accessed from the tablet with the Chrome browser, which accesses the tablet's webcam using the getUserMedia API (the implementation is simple, based on JavaScript, similar to the one here for example: https://davidwalsh.name/demo/camera.php).
Our application will be used to take photos of identity cards, and then submit them to a servlet.
The quality of the picture taken inside the browser, using the getUserMedia API, is quite poor, and the letters on the identity cards are sometimes not easily readable in the image.
If I use the "Camera" application from Windows 8.1 on the same tablet, and take pictures of the same identity cards, in the same light conditions and from the same distance, the resulting images (JPEG) are very clear.
Why is this difference in quality? I read all about the getUserMedia API, and I tried all the available parameters (constraints, width, height, jpeg quality), but I cannot obtain a good quality image.
What is the reason for which the same camera on the same tablet results in such a quality difference when used in the browser, and when used with the Windows camera application, and is there a way to obtain better quality in the browser (develop a custom plugin)?
To answer your question "Why is this difference in quality?" In short it is because the Browser emulates the camera feed and does image transformation underthehood to allow the ability to send different streams to different clients. WebRTC main focus is for P2P media streaming, not for taking high quality photos.
You can use ImageCapture to gain more camera properties (and to get it as an ImageBitmap) but support right now is still very weak.
Please read my answers below which goes into more depth on MediaCapture and ImageCapture for their use cases for more information.
Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?
Take photo when the camera is automatically focused
Related
Your app’s Play Store listing provided a non-valid Wear OS screenshot which is framed within the device. A valid Wear OS screenshot must include the full-frame image of the app interface.
To those who have successfully rolled out a Wear OS app, would you please tell me what Google is trying to say. Thanks!
Edit:
I have taken Yuri's advise have uploaded the 384px by 384px image below for the Wear OS section and created another release. Now, I'm just waiting for Google's feedback. Thanks, Yuri
Second Edit:
The image above fixed my issue.
https://support.google.com/googleplay/android-developer/answer/9866151#zippy=%2Cscreenshots
Upload screenshots with a minimum size of 384 x 384 pixels, and with
a 1:1 aspect ratio.
Provide screenshots showing only your app
interface. Screenshots must demonstrate the actual in-app or in-game
experience, focusing on the core features and content so users can
anticipate what the app or game experience will be like.
Don’t frame
your screenshots in a Wear OS hardware device.
Don’t include
additional text, graphics, or backgrounds in your Wear OS screenshots
that are not a part of your app's interface.
Don’t include
transparent backgrounds or masking.
Make sure the one on the left does not have a transparent background, prefer a flat black background instead.
Also the one of the right shouldn't have a device in the picture, it should just be the circle of the screen without a frame.
I am trying to take 15 Megapixel images with a Logitech c920.
The camera supports full-HD (2.1 MP) video, and 15MP static images.
Using the supplied Logitech Software, I can indeed save 15MP images. But if I access the camera directly via DirectShow, I can at most get the full-HD resolution. It seems like the camera is stuck in "video" mode.
I tried various examples for accessing webcams, namely RobotEyez, VLC, NirSoft WebCamImageSave.
I am beginning to suspect that the default interfaces for webcams under windows are only designed for video, and that there is no official way to tell the camera to take still images in higher resolution than the video stream.
How can I access such a device under windows in order to capture the full 15MP resolution supported for still images?
MediaCapture gives poor quality of QR code image captured, because of which QR code decoder(Zxing) is not able to decode the QR code(Windows Phone 8.1 universal app)
The problem comes only if QR code becomes more complex, i.e. generated out of long string(more then 180 characters), for QR codes generated out of small strings(less then 180) it works fine.
If I feed image directly to Zxing decoder(copy qr image to solution and provide uri) it works fine. But if I capture image using mediacapture api await captureManager.CapturePhotoToStorageFileAsync(imgFormat, file);
and feed it to decoder it does not work,
By looking at the image you posted in the comments for the other answer in conjunction to the code snippets you're using for focus, I would guess that you're calling the focus API at the wrong time. Make sure to use the FocusControl (and other "auto" controls such as WhiteBalance and Exposure) after starting the preview.
Also, focus takes some time to converge, so make sure you're waiting for the operation to finish before capturing a photo.
Have a look at the CameraResolution SDK sample on the Microsoft Windows Universal Samples GitHub repo. You should be looking into using the GetAvailableMediaStreamProperties method, pick the resolution you want to use, and set it on the MediaStreamType of your choosing (Video, Photo, Preview) by using the SetMediaStreamPropertiesAsync method.
Do read through the full sample, though. There are some details (like the number of MediaStreamTypes supported by the camera, see VideoDeviceCharacteristic) that you should understand to build a robust camera app.
I am developping a Phonegap application using nice UI tools, like ReactJS, with requestAnimationFrame and things like that.
I am trying to have rendering performances of 60fps.
According to this article:
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
To have 60 fps, the browser has to be able to do, under 16ms, the following:
JavaScript
Style calculations
Layout
Paint Setup & Paint
Composite
I can see the performance of each in Chrome DevTools by looking at the frames. My Js code is pretty fast thanks to how React optimises the dom manipulations, and the whole fit under 16ms most of the time.
However, these informations are for my computer, my CPU and GPU...
I'm interested to have these informations for different mobile devices, to see how they will behave and to know what is the minimum device level to have 60 fps.
Are there any tools to inspect browser rendering frames for most popular mobile devices?
Is there an easy way to slow down my computer so that it behaves like a mobile phone in term of performances?
What about the impact of other apps running on the phone that could use some of the phone's resources?
You could hook up a remote web inspector with the phone an profile the rendering performance like you would on your computer. This is supported on on iOS 6+ and on Android 4.4, assuming the app is in debug mode. However, hooking up the remote web inspector distorts the results as it imposes a serious performance bump itself.
If you're just interested in measuring raw fps my suggestion is to inject stats.js, a little widget that displays a fps graph:
https://github.com/mrdoob/stats.js/
I used this to benchmark different game engines and got decent results.
I would be using Google for this, but it would display outdated info, and that's not what I want.
Basing from statistics of 2012,cellphones and tablets have shifted the way we interact with websites. Due to that, I'm planning going fully mobile and I would like to know which is the "standard" image size I should implement (for mobile display only) so they don't slow down cellular connections and the browsing session. Of course... they shouldn't look crap either
Thanks a lot!
40 kb seems to be best images sizes all images used in your original website should be reduced from the original size to this size. as most mobile devices will not be compatible with any image size bigger than this.