HTML5 User Media Inputs Demo

by idygress

HTML

<p>
    <label>
        Your photo
        <input id="pretty" type="file" accept="image/*;capture=camera">
        <img src="http://butidigress.com/wp-content/uploads/2018/07/cameraIconTrans.png">
    </label>
</p>
    
<p>
    <label>
        Your video
        <input type="file" accept="video/*;capture=camcorder">
    </label>
</p>
    
<p>
    <label>
        Your voice
        <input type="file" accept="audio/*;capture=microphone">
    </label>
</p>

CSS

#pretty {
  background:red;
  padding:20px;
  visibility:hidden;
}

JavaScript

var viewport = document.createElement("meta");
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(viewport);