Polyfill file input with accept capture (using getUserMedia to capture?)

Question

I want to enable image (& audio & video) uploads in a survey framework. To do so, input file is nearly sufficient for my purposes.

On some mobile browsers <input type="file" accept="image/*;capture=camera"> is a really simple way of letting users choose to upload an existing image or to take a new one. Of course the UI for viewing and choosing among the pictures is provided too.

Desktop browsers did not go this route. Instead, some pretty nice stuff seems to be possible using getUserMedia().
I did not find any working examples that upload the collected user-media to the server (e.g. I found https://github.com/codepo8/interaction-cam/ via this answer. It shows video, but doesn't capture in my Firefox and isn't "aware" of it either, it doesn't show video at all in Safari). I'm not sure how much of this is hardware-specific (my Macbook Air's camera has been on/off-broken in Chrome for a long time now).

Is there some sort of polyfill for uploading captured images that can fall back to a simple file input in case of trouble/access denial?

Answer 1

I've since found getUserMedia.js, which works in Firefox. It falls back to Flash, which is nice, I'll have to see if I am able to tweak it to fall back to input type="file" in mobile browsers.

Answer 2

On desktop, to access the webcam:

• use the (now deprecated) navigator.getUserMedia OR
• use the new promise based navigator.mediaDevices.getUserMedia

Once access is granted, to record the webcam:

• use the Media Recorder API, it's now supported in Chrome/Firefox (demo & code) OR
• use WebRTC and stream the video to a media server where you can record it

PS: on mobile the HTML Media Capture spec has evolved, accept="image/*;capture=camera" never made it to the W3C Candidate Recommendation. Use just accept="image/*" instead and separately add capture="capture"(Boolean) only if you want to force capture from the camera. See Correct Syntax for HTML Media Capture for more details.