html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!--
http://tutorialzine.com/2016/07/take-a-selfie-with-js/
Source: https://jsfiddle.net/dannymarkov/cuumwch5/
-->
<body>
<h3>Demo: Take a Selfie With JavaScript</h3>
<div class="container">
<div class="app">
<a href="#" id="start-camera" class="visible">Touch here to start the app.</a>
<video id="camera-stream"></video>
<img id="snap">
<p id="error-message"></p>
<div class="controls">
<a href="#" id="delete-photo" title="Delete Photo" class="disabled"><i class="material-icons">delete</i></a>
<a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
<a href="#" id="download-photo" download="selfie.png" title="Save Photo" class="disabled"><i class="material-icons">file_download</i></a>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
background-color: #fff;
font:normal 16px/1.5 sans-serif;
color: #333;
}
h3{
font: normal 32px/1.5 'Open Sans', sans-serif;
color: #2c3e50;
margin: 50px 0;
text-align: center;
}
.container{
max-width: 1000px;
margin: 50px auto;
padding: 20px;
background-color: #efefef;
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
19
20
21
22
23
24
25
26
27
28
var video,
image,
start_camera,
controls,
take_photo_btn,
delete_photo_btn,
download_photo_btn,
error_message;
function init(){
// References to all the element we will need.
video = document.querySelector('#camera-stream');
image = document.querySelector('#snap');
start_camera = document.querySelector('#start-camera');
controls = document.querySelector('.controls');
take_photo_btn = document.querySelector('#take-photo');
delete_photo_btn = document.querySelector('#delete-photo');
download_photo_btn = document.querySelector('#download-photo');
error_message = document.querySelector('#error-message');
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run