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