• Author / Uploaded
• Jeovanny

Citation preview

Hacer streaming de audio y video solo con HTML5 Hoy vengo con un tutorial muy divertido, se trata de cómo hacer streaming usando video y cámara de tu dispositivo solo con HTML. Para hacer esto he usado simplemente tres cosas, mi editor de código predeterminado que esSublime Text 2, un localhost para mi pc (esto es para hacer un servidor en mi propia computadora y poder hacer mis pruebas en una página web), uso actualmente WAMP, y la tercera es simplemente tener todos mis dispositivos correctamente conectados en mi dispositivo a usar, cámara y micrófono por supuesto. Veamos el resultado de este tutorial antes de comenzar: Aprovecho y les presento a Whiskey, mi compañero de programación. Empecemos... Lo primero que debemos hacer como en todos los tutoriales es tener el código base para empezar este maravilloso viaje y tener (por fin) una forma de hacer streaming desde nuestra propia pc, usando esto también pues para permitir el uso del micrófono y cámara solo con HTML5. El código que pongo es bastante simple, agregando también una etiqueta 09. 10. Pues vale, es un código bastante simple, agregando en el la nueva etiqueta que ya mencioné: window.URL = window.URL || window.webkitURL; Empezamos paso a paso, ¿para qué sirve todo esto? Es simplemente el prefijo que hace que funcione el javascriipt. En Firefox funcione el prefijo URL sin necesidad de nada, window.URL y ya está. La parte del código que usamos para decir || window.webkitURL es para hacer que el window.URL sea exactamente lo mismo y pueda funcionar pues, en Chrome que es el navegador que necesita el prefijo webkit. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; Ahora ponemos el método que usaremos para hacer una llamada al hardware de nuestro dispositivo, éste se llama navigator.getUserMedia, para Chrome de nuevo necesitamos el webKit. Recordamos aquí de nuevo los prefijos, el || es para que funcione de la misma manera en absolutamente todos los casos. navigator.getUserMedia({audio:true, video:true},function(vid){ document.querySelector('video').src = window.URL.createObjectURL(vid); }); Para que podamos hacer al Hardware de media usamos el método de navigator.getUserMedia y definimos true para que así sea capaz de ingresar al audio y al video. Al momento de hacer el tutorial y probar mi resultado tuve un error y era que no me daba el audio pero sí el video, este error era simplemente porque no había escrito bien audio, entonces pido por favor estén muy pendientes de estos pequeños detalles. La parte de function, un callback que como parámetro recibió el video 'vid'. Aún esto no está listo para ser enviado a nuestra primera etiqueta , ¿la recuerdan? Creamos ahora el document.querySelector('video') que es un método de javascript que te devuelve el primer elemento que coincida con el parámetro que tú le mandas. Luego necesitamos agrear la ruta de donde buscará el video, convertiremos la ruta del video a una URL que pueda leer la ruta del video. Para eso está la última parte del código: .src = window.URL.createObjectURL(vid); Esto es simplemente todo. Si tienes alguna pregunta no dudes en dejarla en los comentarios, será respondida en la brevedad posible. ¡Hasta la próxima!

En esta ocasión compartiré con ustedes algunas de las capacidades que brinda Html5 para transmitir audio en formato mp3 utilizando la librería audiojs. Les recomiendo, antes de continuar avanzando, la lectura del siguiente artículo que explica en forma introductoria las propiedades de la etiqueta audio HTML5Audio y luego descargarse el plugin audiojs con el que podrán generar su propio player. ¿Por qué es importante que te vayas familiarizando con Html5? Básicamente porque nos hace la vida más fácil a los desarrolladores, es multiplataforma, es semántico, es eficiente. Con sólo una línea de código tenés un reproductor de audio que consume muchos menos recursos de memoria que Flash Player. El en caso del plugin audiojs, lo que hace es servirnos el reproductor en html5 si el browser en compatible con la etiqueta audio y el formato mp3. En el caso de versiones de navegadores anteriores - o en el caso de Firefox que no es compatible en forma nativa con mp3 - el plugin audiojs sirve el reproductor como flash player. De este modo queda asegurada la compatibilidad con la amplia mayoría de los exploradores y sus distintas versiones. Esto quiere decir que en Crome 7+ y Internet Explorer 9+ y Safari 4 + tus oyentes podrán escucharte en un reproductor html5! Este reproductor ha sido probado con Shoutcast en los siguientes exploradores de mayor uso:

Safari (4+ html5) Chrome (7+ html5) IE (6, 7, 8, w/ Flash) - (9+ html5) Firefox (3+, w/ Flash) Opera (10+,

w/

Flash)

Si te interesa profundizar sobre la compatibilidad de html5 audio con los diferentes browser te recomiendo visitar el siguiente sitio especializado: Caniuse. Si bien audiojs es un plugin estable, las pruebas de su utilización con Shoutcast por parte de Potencia Web aún están en fase beta. Por lo que es muy importante poder contar con tu experiencia! Podés dejar tu comentario o aporte a este post que será respondido por nuestro equipo. Ahora sí, manos a la obra! Para explicarte del modo más sencillo cómo crear tu propio player html5, tomaré como base un excelente artículo publicado por TecNATO (Comunidad Tecnológica de Perú); el cual propone tres pasos básicos: - Primero: Agregamos dentro de nuestras etiquetas el archivo audio.min.js que viene dentro del archivo que descargamos (audiojs)

- Segundo: Creamos nuestra función con su variable (es obligatoria pero siempre la misma) es sencilla y si no tienes conocimiento de Javascript pues sólo copia lo siguiente:

audiojs.events.ready(function(){ var as = audiojs.createAll(); });



Pueden personalizar el player editando la hoja de estilos css. Por

ejemplo: http://kolber.github.com/audiojs/demos/test2.html

El Player es Open Source bajo licencia MIT, por lo que puede modificarse, distribuirse, etc. Para más información sobre la licencia: MIT License Ampliaremos!