Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
HTML5 camera test
<!doctype html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 camera test</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<input id="file-input" type="file" name="image" accept="image/*" capture="camera" />
<pre id="output"></pre>
var input = document.getElementById("file-input");
input.addEventListener("change", function(event) {
var file = input.files[0],
img = new Image(),
reader = new FileReader();
document.getElementById("output").innerHTML = + "\n" +
file.type + "\n" +
file.size + " bytes\n";
reader.onload = function(event) {
var img = new Image();
img.width = 300;
img.src =;
}, false);
Copy link

dandv commented Jul 27, 2016

Where is getUserMedia() used here?

Copy link

amn commented Mar 10, 2017

There is no use of getUserMedia here, the title of the gist is misleading.

Copy link

mieky commented Mar 28, 2022


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment