¿Te gustaría aprender Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!
En este post te vamos a mostrar como puedes crear la funcionalidad de tomar una foto con javascript puro, sin necesidad de librerías externas o plugins adicionales, esto te permitirá tomar fotografías desde webcam para directamente descargarlas a tu pc, seguro que más de en un proyecto web vendría bien esta funcionalidad.
TOMAR UNA FOTO CON JAVASCRIPT PURO
Lo que haremos el día de hoy será mostrar al usuario una interfaz que permite obtener el flujo de tu webcam y mostrarlo en la pantalla, en el momento de que el usuario decide tomar una foto entonces se presentan las opciones de: eliminar esta imagen y descargar a tu ordenador la fotografía tomada.
LA ESTRUCTURA
La estructura es bastante simple, unicamente asegurate de utilizar los mismos identificadores para que funcione el codigo javascript:
|
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
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Tomarte una Foto con Javascript</title>
<meta charset=«utf-8» />
<meta name=«robots» content=«noindex»>
<link rel=«stylesheet» type=«text/css» href=«dist/estilo.css» media=«all» />
</head>
<body>
<h3>Tomarte una foto con JavaScript</h3>
<div class=«container»>
<div class=«app»>
<a href=«#» id=«start-camera» class=«visible»>Iniciar Demo</a>
<video id=«camera-stream»></video>
<img id=«snap»>
<p id=«error-message»></p>
<div class=«controls»>
<a href=«#» id=«delete-photo» title=«Eliminar Foto» class=«disabled»><i class=«material-icons»>delete</i></a>
<a href=«#» id=«take-photo» title=«Tomar Foto»><i class=«material-icons»>camera_alt</i></a>
<a href=«#» id=«download-photo» download=«foto.jpg» title=«Descargar Foto» class=«disabled»><i class=«material-icons»>file_download</i></a>
</div>
<canvas></canvas>
</div>
</div>
<script src=«dist/funcionalidad.js»></script>
</body>
</html>
|
Como puedes visualizar hay una parte donde importamos nuestro estilo css:
|
<link rel=«stylesheet» type=«text/css» href=«dist/estilo.css» media=«all» />
|
y otra donde importamos nuestra funcionalidad en javascript:
|
1
|
<script src=«dist/funcionalidad.js»></script>
|
LA FUNCIONALIDAD
Nuestra funcionalidad viene por nuestro codigo javascript 100% puro, sin ningun plugin o dependencia externa:
|
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
// Obtenemos todos los elementos que necesitaremos
var 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’);
// Utilizamos la funcion getUserMedia para obtener la salida de la webcam
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage(«Tu navegador no soporta la funcion getMedia.»);
}
else{
// Solicitamos la camara
navigator.getMedia(
{
video: true
},
function(stream){
// A nuestro componente video le establecemos el src al stream de la webcam
video.src = window.URL.createObjectURL(stream);
// Reproducimos
video.play();
video.onplay = function() {
showVideo();
};
},
function(err){
displayErrorMessage(«Ocurrio un error al obtener el stream de la webcam: « + err.name, err);
}
);
}
// En los moviles no se puede reproducir el video automaticamente, programamos funcionamiento del boton inicar camara
start_camera.addEventListener(«click», function(e){
e.preventDefault();
// Reproducimos manualmente
video.play();
showVideo();
});
take_photo_btn.addEventListener(«click», function(e){
e.preventDefault();
var snap = takeSnapshot();
// Mostramos la imagen
image.setAttribute(‘src’, snap);
image.classList.add(«visible»);
// Activamos los botones de eliminar foto y descargar foto
delete_photo_btn.classList.remove(«disabled»);
download_photo_btn.classList.remove(«disabled»);
// Establecemos el atributo href para el boton de descargar imagen
download_photo_btn.href = snap;
// Pausamos el stream de video de la webcam
video.pause();
});
delete_photo_btn.addEventListener(«click», function(e){
e.preventDefault();
// Ocultamos la imagen
image.setAttribute(‘src’, «»);
image.classList.remove(«visible»);
// Deshabilitamos botones de descargar y eliminar foto
delete_photo_btn.classList.add(«disabled»);
download_photo_btn.classList.add(«disabled»);
// Reanudamos la reproduccion de la webcam
video.play();
});
function showVideo(){
// Mostramos el stream de la webcam y los controles
hideUI();
video.classList.add(«visible»);
controls.classList.add(«visible»);
}
function takeSnapshot(){
var hidden_canvas = document.querySelector(‘canvas’),
context = hidden_canvas.getContext(‘2d’);
var width = video.videoWidth,
height = video.videoHeight;
if (width && height) {
// Configuramos el canvas con las mismas dimensiones que el video
hidden_canvas.width = width;
hidden_canvas.height = height;
// Hacemos una copia
context.drawImage(video, 0, 0, width, height);
// Convertimos la imagen del canvas en datarurl
return hidden_canvas.toDataURL(‘image/png’);
}
}
function displayErrorMessage(error_msg, error){
error = error || «»;
if(error){
console.log(error);
}
error_message.innerText = error_msg;
hideUI();
error_message.classList.add(«visible»);
}
function hideUI(){
// Limpiamos
controls.classList.remove(«visible»);
start_camera.classList.remove(«visible»);
video.classList.remove(«visible»);
snap.classList.remove(«visible»);
error_message.classList.remove(«visible»);
}
|
Como puedes ver el codigo viene un poco documentado, de cualquier forma si tienes alguna duda o comentario no dudes en dejarme un comentario.
EL ESTILO
El estilo css lo puedes ver a continuación, no es obligatorio pero le da un toque un poco más profesional:
|
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
@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;
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h3{
font: normal 32px/1.5 ‘Open Sans’, sans-serif;
color: #fff;
margin: 50px 0;
text-align: center;
}
.container{
max-width: 1000px;
margin: 50px auto;
padding: 20px;
background-color: #efefef;
}
.app{
width: 100%;
position: relative;
}
.app #start-camera{
display: none;
border-radius: 3px;
max-width: 400px;
color: #fff;
background-color: #448AFF;
text-decoration: none;
padding: 15px;
opacity: 0.8;
margin: 50px auto;
text-align: center;
}
.app video#camera-stream{
display: none;
width: 100%;
}
.app img#snap{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
display: none;
}
.app #error-message{
width: 100%;
background-color: #ccc;
color: #9b9b9b;
font-size: 28px;
padding: 200px 100px;
text-align: center;
display: none;
}
.app .controls{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 30px;
display: none;
}
.app .controls a{
border-radius: 50%;
color: #fff;
background-color: #111;
text-decoration: none;
padding: 15px;
line-height: 0;
opacity: 0.7;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.app .controls a:hover{
opacity: 1;
}
.app .controls a.disabled{
background-color: #555;
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.app .controls a.disabled:hover{
opacity: 0.5;
}
.app .controls a i{
font-size: 18px;
}
.app .controls #take-photo i{
font-size: 32px;
}
.app canvas{
display: none;
}
.app video#camera-stream.visible,
.app img#snap.visible,
.app #error-message.visible
{
display: block;
}
.app .controls.visible{
display: flex;
}
@media(max-width: 1000px){
.container{
margin: 40px;
}
.app #start-camera.visible{
display: block;
}
.app .controls a i{
font-size: 16px;
}
.app .controls #take-photo i{
font-size: 24px;
}
}
@media(max-width: 600px){
.container{
margin: 10px;
}
.app #error-message{
padding: 80px 50px;
font-size: 18px;
}
.app .controls a i{
font-size: 12px;
}
.app .controls #take-photo i{
font-size: 18px;
}
}
|
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
¿Te gustaría Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!
Tenemos los diplomados que necesitas.¡Haz clic aquí!
Por favor, necesito algún código para tomar fotos sin necesidad de estar conectado a la internet. Encontré en ProgramaEnLinea ¿Como Tomar una Foto con JavaScript? y me ha interesado muchísimo pero honestamente traté de usarlo y no me funciona. Solo soy un aficionado a estos leguajes, aunque me gustan mucho, no los domino a la perfección. Por otra parte, el dispositivo que uso es un Chromebook. Quizás esta información le sirva de algo para ayudarme a que esta cámara se ejecute sin ningún problema en dicho dispositivo:
Google Chrome 43.0.2357.131 (Build oficial) (32 bits)
Revisión 1a26cd4c53ce1422588a5345501b4c3a075485b4
Plataforma 6946.68.0 (Official Build) stable-channel veyron_speedy
Blink 537.36 (@197431)
JavaScript V8 4.3.61.32
Flash 18.0.0.194-r1
Agente de usuario Mozilla/5.0 (X11; CrOS armv7l 6946.68.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.131 Safari/537.36
De acurdo a esto que explico, me sentiría muy agradecido si me enviaran el código completo de la cámara, listo para ser ejecutado, lo necesito. En la espera de su pronta respuesta, muchísimas gracias de antemano. Yunior.
Hola buen dia, escribeme gguerrero@tecgurus.net y comentame nuevamente por correo tu solicitud.
Saludos