11

Is there a way to detect whether a browser supports the HTML5 Media Capture API for a mobile website I'm building? I can only seem to find solutions for detecting getUserMedia() support.

I would like to be able to present mobile users one of two scenarios:

  • User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.
  • User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter.
edcs
  • 3,847
  • 2
  • 33
  • 56
  • I'm confused. Why aren't the solution for checking for getusermedia support acceptable? – Raymond Camden Aug 30 '12 at 15:35
  • 1
    Isn't `getUserMedia()` a different API to Media Capture? For example: Chrome supports `getUserMedia()` and can display images and video from my webcam natively, but if I use the following HTML: ``, I can't capture an image from my webcam to upload to my web server. – edcs Aug 30 '12 at 16:10
  • Ah - you are correct. Sorry - I keep forgetting about that particular form of capture. – Raymond Camden Aug 31 '12 at 19:01
  • 1
    Actually - I believe getUserMedia is the 'real' API and this was the old version. Check the spec: http://www.w3.org/TR/media-capture-api/ It says specifically work on the spec is dead and getUserMedia is what is being used for the future. – Raymond Camden Aug 31 '12 at 19:08
  • Thanks for clarifying - I suppose the question now is; can I use `getUserMedia()` to trigger system dialogues in the same way as you could with the media capture API? `getUserMedia()` seems to focus on embedding media capture into the web page. In an ideal world I'm trying to replicate the PhoneGap camera function: http://docs.phonegap.com/en/1.0.0/phonegap_camera_camera.md.html – edcs Sep 01 '12 at 11:13
  • 1
    The original Media Capture API linked to above is indeed deprecated, but was replaced by both the getUserMedia() API and a new HTML Media Capture API ( http://www.w3.org/TR/capture-api/ ). The difference is the old one was a more complicated JavaScript API whereas the new one is a single HTML attribute (so no JavaScript required). Regarding detection, I've been looking into it but can't find a solution. There seems to be no way to programmatically detect for "capture" attribute support, sadly. – tagawa Apr 22 '13 at 12:48
  • Made a little snippet for that, since all the alternatives seems to fail: https://gist.github.com/rafaelrinaldi/5969890 –  Jul 11 '13 at 04:57

2 Answers2

3

User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.

There's no way (at the moment) to create 2 separate HTML buttons: one for (just) the library & one for (just) the camera ( I've covered all the possible HTML Media Capture options in this article)

Use <input type="file" accept="image/*;"> and you'll be prompted to choose between capturing a photo or selecting an existing one:

enter image description here

User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter

Support is as follows:

  • Android 2.2+ and iOS6.0+ support the above code
  • Android 3.0+ supports capture and takes the user straight to the camera
  • iOS6 through 10 do NOT support capture (prompt is always shown)
  • desktop browsers do NOT support HTML Media Capture

Detecting support resumes to detecting the above browsers.

Support reference: this 2013 O'Reilly book and my testing

octavn
  • 3,154
  • 32
  • 49
2

You can use modernizr, on the docs page you can see in the table of features supported and detected that they detect both the HTML Media Capture and also the getUserMedia

Kuzeko
  • 1,545
  • 16
  • 39