aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/webrtc_api/taking_still_photos/index.html
blob: 143b2ee72fd5243c7b40f4f63ce68d5cf548d2b2 (plain)
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
153
154
155
156
157
158
159
---
title: Capturar fotografías con la cámara web
slug: WebRTC/Taking_webcam_photos
tags:
  - Canvas
  - WebRTC
  - cámara web
  - getusermedia
translation_of: Web/API/WebRTC_API/Taking_still_photos
---
<h2 id="Introducción_y_demostración">Introducción y demostración</h2>
<p>Este es un tutorial rápido de cómo acceder a la cámara de tu laptop y capturar una foto con ella. Puedes observar el <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">código final en acción en este JSFiddle</a>. También existe una versión más avanzada en JavaScript para cargar fotos a <strong>imgur</strong> disponible como <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">código en GitHub</a> o <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">como demo</a>.</p>
<h2 id="El_formato_HTML">El formato HTML</h2>
<p>Lo primero que necesitas para acceder a la cámara web utilizando WebRTC es un elemento {{HTMLElement("video")}} y un elemento {{HTMLElement("canvas")}} en la página. El elemento de video recibe la secuencia desde WebRTC y el elemento canvas es utilizado para agarrar la imagen desde el video. También añadimos una imagen de relleno que luego será reemplazada con la toma capturada por la cámara web.</p>
<pre class="brush:html;">&lt;video id="video"&gt;&lt;/video&gt;
&lt;button id="startbutton"&gt;Take photo&lt;/button&gt;
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;img src="http://placekitten.com/g/320/261" id="photo" alt="photo"&gt;
</pre>
<h2 id="El_script_completo">El script completo</h2>
<p>Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.</p>
<pre class="brush:js;">(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      canvas       = document.querySelector('#canvas'),
      photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 320,
      height = 0;

  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

})();</pre>
<h2 id="Explicando_paso_a_paso">Explicando paso a paso</h2>
<p>Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.</p>
<h3 id="Función_Anónima">Función Anónima</h3>
<pre class="brush:js;">(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      canvas       = document.querySelector('#canvas'),
      photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 320,
      height = 0;</pre>
<p>Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.</p>
<div class="warning">
  <p>En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.</p>
</div>
<h3 id="Obtener_el_video">Obtener el video</h3>
<p>Ahora necesitamos obtener el video desde la cámara web. Actualmente esto está predeterminado para los diferentes navegadores, así que necesitamos comprobar cuál es compatible:</p>
<pre class="brush:js;">  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);</pre>
<p>Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:</p>
<pre class="brush:js;">  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );</pre>
<p>En estos momentos Firefox Nightly necesita que tu configures la propiedad de <code>mozSrcObject</code> del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo <code>src</code>. Mientras que Firefox puede utilizar la secuencia de video directamente, Webkit y Opera necesitan crear un objeto URL desde ella. Todo esto será estandarizado en un futuro cercano.</p>
<h3 id="Redefinir_el_tamaño_del_video">Redefinir el tamaño del video</h3>
<p>Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.</p>
<pre class="brush:js;">  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);</pre>
<p>Nos subscribimos al evento <code>canplay </code>del video y leemos sus dimensiones utilizando <code>videoHeight</code> y <code>videoWidth</code>. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos <code>streaming</code> a verdadero (true) para que compruebe esto solo una vez, mientras que el evento <code>canplay</code>  siga en actividad.</p>
<p>Esto es todo lo que se necesita para que inicie el video.</p>
<h3 id="Capturar_una_imagen">Capturar una imagen</h3>
<p>Ahora necesitamos capturar una imagen utilizando un lienzo (canvas). Asignamos un manejador de eventos al botón de inicio para llamar a la función de <code>takepicture</code>.</p>
<pre class="brush:js;">  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);</pre>
<p>En esta función, reestablecemos el tamaño del lienzo (canvas) a las dimensiones del video, el cual lo sustituye y tenemos un marco del video, el cual se copia al canvas. Luego necesitamos convertir los datos del canvas en datos tipo URL con un encabezado PNG, y establecer el src de la fotografía a este mismo url.</p>
<pre class="brush:js;">  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

})();</pre>
<p>Eso es todo lo que se necesita para mostrar la secuencia de la cámara web y capturar una imagen fija de ella, a través de Chrome, Opera y Firefox.</p>
<h2 id="Compatibilidad">Compatibilidad</h2>
<p>Actualmente utilizar WebRTC para acceder a la cámara es compatible en Chrome, Opera y Firefox Nightly 18. Para habilitar WebRTC en Firefox Nightly requiere que establezcas un indicador en la configuración:</p>
<ul>
  <li>Teclea "about:config" en la barra de direcciones y afirma que quieres realizar algunos cambios.</li>
  <li>Encuentra la entrada "media.navigator.enabled" y establécelo a verdadero (true).</li>
</ul>