Detect HTML5 Media Capture API Support

Asked 30/8, 2012 at 14:55 Answered 10/11, 2016 at 14:22

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.

Selestina answered 30/8, 2012 at 14:55 Comment(7)

I'm confused. Why aren't the solution for checking for getusermedia support acceptable? – Sonasonant 30/8, 2012 at 15:35

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: <input type="file" accept="image/*;capture=camera">, I can't capture an image from my webcam to upload to my web server. – Selestina 30/8, 2012 at 16:10

Ah - you are correct. Sorry - I keep forgetting about that particular form of capture. – Sonasonant 31/8, 2012 at 19:1

Actually - I believe getUserMedia is the 'real' API and this was the old version. Check the spec: 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. – Sonasonant 31/8, 2012 at 19:8

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: docs.phonegap.com/en/1.0.0/phonegap_camera_camera.md.html – Selestina 1/9, 2012 at 11:13

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 ( 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. – Standardize 22/4, 2013 at 12:48

Made a little snippet for that, since all the alternatives seems to fail: gist.github.com/rafaelrinaldi/5969890 – Trajectory 11/7, 2013 at 4:57

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

Epigraphy answered 10/11, 2016 at 14:22 Comment(0)

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

Overstock answered 20/4, 2016 at 12:55 Comment(0)

Recommended topics

Hot tags