html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Camera Access!</title>
</head>
<body onload="ready()">
<div style="text-align:center;">
<marquee><i>Click on the video to take a snap!</i></marquee>
<hr><b>Camera</b><br>
<video id="urcam" width="176" height="144" style="border:1px solid blue;" autoplay>
</video>
<hr><b>Snap</b><br>
<canvas id="photo" width="176" height="144" style="border:1px solid red;">
</canvas>
<hr>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
alert("Won't work in Sololearn App Code Playground!");
function ready() {
var urcam = document.getElementById('urcam');
var photo = document.getElementById('photo');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
urcam.src = window.URL.createObjectURL(stream);
urcam.play();
});
}
var cntxt = photo.getContext('2d');
document.getElementById("urcam").addEventListener("click", function() {
cntxt.drawImage(urcam, 0, 0, 176, 144);
});
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run