Webcam y Micrófono ( HTML 5 )

HTML 5 es un esfuerzo para adaptar HTML a las novedades que ha incorporado el Web gracias a complementos cómo Flash o Silverlight. Ya hemos visto cómo insertar audio y video, en este artículo vamos a ver cómo podremos acceder a dispositivos del ordenador del visitante: cámara web, micrófono...

Nota:
Los navegadores todavía no soportan al 100% HTML 5. Hasta que todos los navegadores implementen correctamente HTML5 habrá que seguir usando Flash para crear este tipo de aplicación.

Tabla de contenido

• · Acceso al vídeo de la webcam / audio del mic.
• · Grabando video / audio
• · Enviar y recibir imágenes de webcam

Acceso al vídeo de la webcam / audio del mic.

Para obtener acceso al video y audio de la usaremos getUserMedia (). Una vez conectamos con la webcam, podemos mostrar el stream de vídeo en un elemento <video> de forma que el usuario pueda verse a él mismo:

000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017

<video autoplay id="tVideo"></video> <script>     function getMedia () {         // Obtenemos el getUserMedia segun el navegador        navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;         // Solicitamos acceso        navigator.getUserMedia ( {             video: true,             audio: true         }, function( oMedia ) {             // Conectamos la webcam con el <video>            var video = document.getElementById('tVideo');             video.src = window.URL.createObjectURL( oMedia );         }, getMedia );     }     getMedia ();</script>  Maximizar   Seleccionar   SCRIPT,XML

Grabando video / audio

La interfaz Stream, tiene un método record () que devuelve una grabación (StreamRecorder ), esta grabación tiene a su vez un método stop () para finalizar. El método stop nos devolverá un objeto tipo File con la grabación.

000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036

<!--  Botón Grabar / Parar --> <input type="button" id="boton" value="Grabar" onclick="GrabarOParar ()" /> <script>  function GrabarOParar ( ) {    // Si está grabando   if ( grabando ) {         // Parar de gravar y enviar por AJaX        EnviarPorAjax ( grabando.stop () );      // Marcar grabar a 0        grabando = 0;      // Volver a poner "Grabar" en el botón     document.getElementById ('boton') . value = 'Grabar';    } else {       device = document.getElementsByTagName('device')[0];       // Empezamos a grabar      grabando = device.data.record ();        // Ponemos "Parar" en el botón      document.getElementById ('boton') . value = 'Parar';    }  }  function EnviarPorAjax ( archivo ) {   // Leemos el archivo  var reader = new FileReader();   // Creamos conexión ajax   reader.onload = function( binaryVideo ) {     // Creamos el objeto AJAX     ajax = new XMLHttpRequest ();     // Indicamos el scripot de upload del servidor     ajax.open("post", "/videoupload.php", true);      ajax.setRequestHeader("Content-Type", "multipart/form-data");     // Enviamos el contenido del archivo de vídeo     ajax.send( binaryVideo.target.result )   }   reader.readAsBinaryString(f);  }  grabando = 0;</script>  Maximizar   Seleccionar   SCRIPT,XML

Este ejemplo mostrará un boton de Grabar / Parar que junto al ejemplo anterior ( Mostrando el vídeo al propio usuario ) permitirán grabar un vídeo desde web cam.

Enviar y recibir imágenes de webcam

No tendría sentido tener acceso a la webcam, si no podemos enviar en directo las imágenes que obtenemos ( sin grabar y enviar ), HTML 5 incorpora la interfazConnectionPeer que permite conectar directamente con otro visitante de la página y enviar y recibir datos:

000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021

<!--  Botón Grabar / Parar --> <input type="button" id="boton" value="Conectar" onclick="ConectarPeer ()" /> <!--  Vídeo de un usuario remoto --> <video id="suVideo" autoplay></video> <script> function ConectarPeer () {   // Conectar a una IP  var conexion = new ConnectionPeer(  '80.23....');   conexion.onconnect = function (event) {     // Enviar tu stream al otro    conexion.addStream( document.getElementsByTagName('device')[0].data );     // Recibir stream del otro    conexion.onstream = function (event) {        document.getElementById ('suVideo').src = conexion.remoteStreams[0].URL;     }   }   // Conducimos el error  conexion.onerror = function ( event ) {     alert ( 'Imposible conectar con el usuario' );   } }</script>  Maximizar   Seleccionar   SCRIPT,XML

Con este código, junto con el de hace dos ejemplos ( Mostrando el vídeo al propio usuario
) podremos hacer un videochat donde el usuario podrá verse a él y a otro visitante