diff options
Diffstat (limited to 'files/es/webrtc/taking_webcam_photos/index.html')
| -rw-r--r-- | files/es/webrtc/taking_webcam_photos/index.html | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/files/es/webrtc/taking_webcam_photos/index.html b/files/es/webrtc/taking_webcam_photos/index.html deleted file mode 100644 index 143b2ee72f..0000000000 --- a/files/es/webrtc/taking_webcam_photos/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -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;"><video id="video"></video> -<button id="startbutton">Take photo</button> -<canvas id="canvas"></canvas> -<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"> -</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> |