Detect HTML5 Media Capture API Support

Question

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.

Answer 1

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:

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

Answer 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