WebDev: uso de la API de captura de medios en el navegador
Hoy me gustaría experimentar con el API de transmisión y captura de mediosdesarrollado conjuntamente en el W3C por el Grupo de Trabajo de Comunicaciones Web en Tiempo Real y el Grupo de trabajo de API de dispositivos. Algunos desarrolladores pueden conocerlo simplemente como getUserMediaque es la interfaz principal que permite que las páginas web accedan a dispositivos de captura de medios, como cámaras web y micrófonos.
Puedes encontrar el código fuente de este proyecto. en mi GitHub. Adicionalmente, aquí hay una demostración de trabajo para que experimentes. En la versión preliminar más reciente de Windows 10, Microsoft agregó soporte para las API de captura de medios en el Navegador Microsoft Edge para la primera vez. Gran parte de este código se tomó de la muestra de Photo Capture que el equipo de desarrollo de Edge produjo en su sitio de prueba de manejo.
Para aquellos de ustedes que quieran profundizar un poco más, Eric Bidelman tiene una gran artículo en HTML5 rocks que entra en la historia histórica de esta API.
Ponerse al día
los método getUserMedia() es un buen punto de partida para comprender las API de captura de medios. La llamada getUserMedia() toma MediaStreamConstraintsMediaStreamConstraints como argumento de entrada, que define las preferencias o los requisitos para los dispositivos de captura y los flujos de medios capturados, como el modo de orientación de la cámara, el volumen del micrófono y la resolución de video.
A través de MediaStreamConstraints, también puede elegir el dispositivo capturado específico usando su deviceId, que puede derivarse del método enumerateDevices(). Una vez que el usuario otorga el permiso, la llamada getUserMedia() devolverá una promesa con un MediaSteam objeto si se pueden cumplir las MediaStreamConstraints específicas.
¡Todo esto sin necesidad de descargar un complemento! En esta muestra, nos sumergiremos en la API y crearemos algunos filtros limpios en el video y las imágenes que capturaremos. ¿Tu navegador lo soporta? Bueno, getUserMedia() existe desde Chrome 21, Opera 18 y Firefox 17, y es ahora trabajando en Edge.
Detección de características
La detección de características es una simple verificación de la existencia de navigator.getUserMedia. Es un gran proyecto para verificar en cada navegador, por lo que sugeriría simplemente usando modernizr para comprobarlo. Así es como funciona:
si (Modernizr.getusermedia) { |
Sin Modernizr, como se demuestra en este ejemplo, tendría que usar:
navegador.getUserMedia = navegador.getUserMedia || navegador.webkitGetUserMedia || navegador.mozGetUserMedia; si (!navigator.getuserMedia) { |
El reproductor de video
En nuestro HTML, puede ver la etiqueta de video en la parte superior de la página. Notarás que también está configurado para reproducción automática. Sin eso, el video se congelaría permanentemente en el primer cuadro.
Actualmente no hay una fuente para el conjunto de medios, pero vamos a inyectar esa fuente a través de JavaScript en breve.
Obtener acceso a un dispositivo de entrada
Esta nueva funcionalidad puede generar una serie de nuevas oportunidades para los desarrolladores, pero también puede ser un riesgo de seguridad para el usuario final, por lo tanto, lo primero que notará cuando inicie esta aplicación web es que solicita permiso para usar su cámara web. . getUserMedia acepta algunos parámetros.
El primero es un objeto que especifica los detalles y requisitos para cada tipo de medio al que desea acceder. Para acceder a la cámara web, el primer parámetro debe ser {video: true}. Además, para usar tanto el micrófono como la cámara, pasa {video: true, audio: true}.
Compatibilidad con múltiples cámaras web
Aquí es donde las cosas realmente se ponen interesantes. También estamos usando el MediaDevices.enumeratedDevices método en esta muestra. Esto recopila información sobre los dispositivos de entrada/salida de medios disponibles en su sistema, como micrófonos, cámaras y altavoces. Esta es una promesa que devolverá varias propiedades, incluido el tipo (tipo) de dispositivo, como «entrada de video», «entrada de audio»o «salida de audio.”
Además, puede generar una identificación única en forma de cadena con una identificación única (entrada de video: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=)y finalmente una etiqueta para describir el dispositivo, como “Cámara FaceTime HD (incorporada)”. Sin embargo, esta es todavía una tecnología experimental, y ni siquiera aparece en CanIUse.com aún.
Configuración de la fuente en el reproductor de video
En la función initializeVideoStream, puede ver que estamos obteniendo la etiqueta de video de nuestra página y configurando su fuente para la transmisión que estamos pasando. La transmisión en sí es una mancha. Si el navegador no es compatible con el atributo srcObject, vuelve a crear una URL a partir del flujo de medios y la configura.
// initializeVideoStream() – Función de devolución de llamada cuando getUserMedia() regresa con éxito con un objeto mediaStream var initializeVideoStream = función (flujo) { var video = document.getElementById(‘videoTag’); |
Aplicar filtros CSS
No soy muy bueno tomando fotos, así que a menudo confío en los filtros que me proporciona Instagram. Pero, ¿y si pudieras aplicar tus propios filtros a tu video o imagen estática? ¡Bien tu puedes!
Creé una función simple para el feed de video, que me permite aplicar filtros CSS en tiempo real. El de la imagen es casi idéntico.
// changeCssFiltersOnVid() – Ciclo a través de los filtros CSS aplicados a la transmisión de video var cambiarCssFilterOnVid = función () { var efecto = filtros[index++ % filters.length] si (efecto) { |
En la parte superior de la clase, tengo una serie de filtros para recorrer. Se almacenan como una cadena, que corresponde a clases con nombres idénticos en CSS. // Filtros CSS var index = 0; var filtros = [‘grayscale’, ‘sepia’, ‘blur’, ‘invert’, ‘brightness’, ‘contrast’, »]; Y en el CSS:
/* imagen * filtros de video */ .sepia { .desenfoque { |
Puede ver más ejemplos de cómo funciona esto y cambiar valores en tiempo real, en la página de prueba de manejo de Edge.
Guardar imágenes
Examinando el código, es posible que vea algunas otras características con las que no está familiarizado de inmediato. Lo primero que me llamó la atención fue navigator.msSaveBlob. los Gota constructor le permite crear y manipular fácilmente un blob (básicamente un archivo) directamente en el cliente. Es compatible con IE 10+.
msGuardarBlob le permite guardar este objeto blob (en este caso, nuestra imagen instantánea) en el disco. También tiene un método hermano, msSaveOrOpenBlobque también le permite abrir la imagen desde el navegador.
// savePhoto() – Función invocada cuando el usuario hace clic en el elemento del lienzo var guardarFoto = function() { |
Si el navegador es compatible con el método, reducirá la cantidad de código que necesitamos escribir para guardar una imagen.
¿A dónde más podemos ir desde aquí?
Este es sólo el comienzo. También podemos utilizar WebGL con esto, lo que permite aplicar incluso más filtros Heye, así como tener una fuente de video / audio en tiempo real integrada en entornos altamente interactivos. Quizás ese sea mi próximo proyecto…
Además, puede conectarse a la API de audio web para aplicar modulación de frecuencia a su salida de audio. Esta muestra de la Sintonizador de audio web on lo ilustra bien. Algunas personas se interesan más por el aprendizaje visual, así que echa un vistazo a esta muestra de Microsoft también.
Finalmente, a medida que los navegadores móviles continúen adoptando más de esta tecnología, podrá usar estas API de JavaScript para conectarse al hardware subyacente y hacer que funcione en dispositivos móviles, independientemente de la plataforma. Es un buen momento para ser desarrollador web y, con suerte, después de que hayas usado esto, comprenderás por qué estoy tan emocionado de ser parte de esto.
Código fuente: https://github.com/DaveVoyles/GetUserMedia-sample
muestra de trabajo: http://getusermedia.azurewebsites.net/
Más prácticas con JavaScript
Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto y tenemos la misión de crear mucho más con Borde de Microsoft. Aquí hay algunos para revisar:
- Cumbre web de Microsoft Edge 2015 (una serie completa de lo que puede esperar con el nuevo navegador, las nuevas características de la plataforma web y los oradores invitados de la comunidad)
- Compilación de //BUILD/ y Windows 10 (incluido el nuevo motor de JavaScript para sitios y aplicaciones)
- Avance de JavaScript sin romper la Web (Discurso de apertura reciente de Christian Heilmann)
- Innovaciones en plataformas web y aplicaciones web alojadas (una inmersión profunda en temas como manifold.JS)
- Consejos prácticos de rendimiento para hacer que su HTML/JavaScript sea más rápido (una serie de 7 partes desde el diseño receptivo hasta los juegos casuales y la optimización del rendimiento)
- La plataforma web moderna JumpStart (los fundamentos de HTML, CSS y JS)
Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.
Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/
#WebDev #uso #API #captura #medios #navegador
