Media Capture : Démo HTML5
Mise à jour : 2017-01-22
Media Capture
- accept : type MIME :
- image/* : appareil photo
- audio/* : microphone
- video/* : caméra
- capture : désigne le type de capture, mais ne semble pas indispensable et peut s'écrire de plusieurs façon, cf. exemple plus bas :
- camera : image
- microphone : audio
- camcorder : vidéo
- ...
Notes sur le tuto
- Articles très complets concernant getUserMedia(), l'API permettant de manipuler ces périphériques :
- Exemple :
- Testé sous IE 11/Windows 8.1 mobile.
- Voir aussi : File API
Exemple de code HTML5
Prenez une photo : <input type="file" accept="image/*" capture="camera" id="testFile" name="test"><br> <img id="testImg" style="width:100px"><br> Enregistrez un son : <input type="file" accept="audio/*" capture><br> Enregistrez une vidéo : <input type="file" accept="video/*"> <script> document.getElementById("testFile").onchange = function (event) { src = window.URL.createObjectURL(event.target.files[0]) document.getElementById("testImg").src = src window.URL.revokeObjectURL(src)} </script>
Démonstration du résultat HTML5
Prenez une photo :
Enregistrez un son :
Enregistrez une vidéo :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isAttributeSpecified("test", "capture") isItemSupported("window.URL.createObjectURL", true) </script>