24

I am using navigator.getUserMedia with constraints to access the user's webcam, using the feed as the source of an HTML <video> and then copying its stream to drawImage a <canvas> context. I'm doing all this so I can take a snapshot at intervals.

What I would like to do is, once the page starts taking snapshots, lock the getUserMedia camera's focus/exposure, so that in between snapshot intervals the environment can change without the light balance changing or the camera refocusing.

Does anyone know if this is possible on the JS side?

Jody Heavener
  • 2,704
  • 5
  • 41
  • 70
  • 7
    Not yet. Unfortunately, WebRTC does not allow photo-level access to cameras, but a new [Image Capture spec](http://w3c.github.io/mediacapture-image/index.html) is being worked on to solve this. None of the browsers implement it yet though. – jib Apr 06 '15 at 00:36
  • 1
    Chrome Beta 56 does ship with a first draft of the Image Capture API. See the release info: http://www.androidpolice.com/2016/12/14/chrome-56-beta-adds-official-web-bluetooth-api-support-experiential-webvr-apk-download/ – geekonaut Dec 21 '16 at 20:56
  • Look at this example : https://jsfiddle.net/zlatnaspirala/u2f9wbzh/ , ok this is not webrtc . It is possible 100%. Look at https://www.webrtc-experiment.com (recording , capture etc...) – Nikola Lukic Feb 17 '17 at 08:21
  • Possible duplicate of [Take photo when the camera is automatically focused](https://stackoverflow.com/questions/47637708/take-photo-when-the-camera-is-automatically-focused) – Marcus Sep 15 '19 at 06:25
  • @Marcus this question is years older but ‍♂️ – Jody Heavener Sep 16 '19 at 16:33
  • @JodyHeavener I know, however this question was forwarded to me twice, comes up quite often. Just here to point to another direction/help :) – Marcus Sep 17 '19 at 11:56

2 Answers2

1

Flagged as duplicate of: Take photo when the camera is automatically focused

Firsly - though perhaps bad practice here - I will link to why MediaCapture might be blurry or grainy than expected:

Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?

In short: MediaCapture does a lot of transformations on the media source which may cause blury or grainy images.

To solve this use ImageCapture:

The ImageCapture API enables control over camera features such as zoom, brightness, contrast, ISO and white balance. Best of all, Image Capture allows you to access the full resolution capabilities of any available device camera or webcam. Previous techniques for taking photos on the Web have used video snapshots, which are lower resolution than that available for still images.

To solve your problem:

You can solve this via UX and a zoom slider. Below is information on how to achieve this with ImageCapture (still images). MediaCapture (video feed) does not allow this functionality. You could use MediaCapture and have a button such as "Manual Mode" and allow a user to pick the correct zoom to take the photo.

You could also "emulate" a camera by having an update loop doing n ImageCaptures per update and have a zoom slider.

https://developers.google.com/web/updates/2016/12/imagecapture

And here is an example on how to use it/polyfill: https://github.com/GoogleChromeLabs/imagecapture-polyfill

Makesure you use the latest getUserMedia polyfills which handle crossplatform support: https://www.npmjs.com/package/webrtc-adapter

Hope this helps

Marcus
  • 1,880
  • 20
  • 27
0

We had the same problem some time ago. It only happens on some devices... but even devices from the same brand had different behaviours. Something in the browser / OS version / driver combination were broken. In some devices focus was locked and in others didn't. We look over all the API, we tried dozens of variations in the initialization code but finally we concluded there was no apparent solution.

We added a button to restart all in order to mitigate the problem somehow...

user1039663
  • 1,230
  • 1
  • 9
  • 15