Share
Lo que vas a crearHoy me gustaría experimentar con la API Media Capture y Streams, desarrollada conjuntamente en el W3C por el Grupo de trabajo de comunicaciones en tiempo real de la Web y el Grupo de trabajo de las API de dispositivos. Algunos desarrolladores pueden saberlo simplemente como getUserMedia, que es la interfaz principal que permite a las páginas web acceder a dispositivos de captura de medios como cámaras web y micrófonos.
Puede encontrar el código fuente de este proyecto en mi GitHub. Además, aquí hay una demostración de trabajo para que experimentes. En la última versión preliminar de Windows 10, Microsoft agregó por primera vez el soporte para las API de captura de medios en el navegador Microsoft Edge. Gran parte de este código fue tomado de la muestra de captura de fotos que el equipo de desarrollo de Edge produjo en su sitio de prueba.
Para aquellos de ustedes que quieran profundizar un poco más, Eric Bidelman tiene un gran artículo en HTML5 Rocks que trata la historia histórica de esta API..
El método getUserMedia () es un buen punto de partida para comprender las API de Media Capture. los getUserMedia () La llamada toma MediaStreamConstraints como un argumento de entrada, que define las preferencias y / o requisitos para dispositivos de captura y flujos de medios capturados, como la cámara Cara de modo, volumen del micrófono y resolución de video.
Mediante MediaStreamConstraints, También puede elegir el dispositivo capturado específico utilizando su ID del dispositivo, que se puede derivar de la enumerateDevices () método. Una vez que el usuario concede el permiso, el getUserMedia () llamada devolverá una promesa con un objeto MediaStream si el específico MediaStreamConstraints se puede reunir.
¡Todo esto sin necesidad de descargar un plugin! En este ejemplo, nos sumergiremos en la API y crearemos algunos filtros ordenados en el video y las imágenes que capturaremos. ¿Su navegador lo soporta? Bien getUserMedia () ha existido desde Chrome 21, Opera 18 y Firefox 17, y ahora está trabajando en Edge.
La detección de características implica una simple comprobación de la existencia de navigator.getUserMedia. Es un gran proyecto para verificar en cada navegador, por lo que sugeriría simplemente usar Modernizr para verificarlo. Así es como funciona:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navegador); getUM (video: true, función (//… //…Sin Modernizr, como se muestra en esta muestra, tendrías que usar:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (! navigator.getuserMedia) Console.log ('Está utilizando un navegador que no admite la API de captura de medios'); 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 quedaría congelado 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.
Esta nueva funcionalidad puede habilitar 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 webcam, el primer parámetro debe ser video: cierto. Además, para usar tanto el micrófono como la cámara, pase video: verdadero, audio: verdadero.
Aquí es donde las cosas realmente se ponen interesantes. También estamos utilizando el método MediaDevices.enumerateDevices en este ejemplo. 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 ID única en forma de cadena con una ID única (entrada de video: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =), y finalmente una etiqueta para describir el dispositivo, como Cámara HD FaceTime (incorporada). Sin embargo, esta aún es una tecnología experimental y aún no está incluida en CanIUse.com.
En el initalizeVideoStream Como puede ver, estamos obteniendo la etiqueta de video de nuestra página y estableciendo su origen en la transmisión que estamos transmitiendo. La transmisión en sí es un blob. Si el navegador no soporta el srcObject atributo, retrocede para crear una URL fuera del flujo de medios y establece que.
// initializeVideoStream (): la función de devolución de llamada cuando getUserMedia () devuelve correctamente con un objeto mediaStream // 1. Establezca el mediaStream en la etiqueta de video // 2. Use el atributo 'srcObject' para determinar si usar la API basada en el estándar o versión heredada var initializeVideoStream = function (stream) mediaStream = stream; var video = document.getElementById ('videoTag'); if (typeof (video.srcObject)! == 'undefined') video.srcObject = mediaStream; else video.src = URL.createObjectURL (mediaStream); if (webcamList.length> 1) document.getElementById ('switch'). disabled = false; ; No soy muy bueno para tomar fotos, así que a menudo confío en los filtros que me ofrece Instagram. ¿Pero qué pasaría si pudieras aplicar tus propios filtros a tu video o imagen estática? Bien tu puedes!
He creado una función simple para la alimentación 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 al flujo de video // 1. Obtenga una referencia a la etiqueta del video // 2. Mantenga las clases de CSS originales mientras sigue agregando los filtros // 3. Repita todos los filtros var changeCssFilterOnVid = function () var el = document.getElementById ('videoTag'); el.className = 'view - video__video'; var effect = filters [index ++% filters.length] if (effect) el.classList.add (effect); console.log (el.classList); 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 filters = ['grayscale', 'sepia', 'blur', 'invert', 'brightness', 'contrast', "];
Y en el CSS:
/ * imagen * filtros de video * / .grayscale -webkit-filter: grayscale (1); -moz-filter: escala de grises (1); -ms-filter: escala de grises (1); filtro: escala de grises (1); .sepia -webkit-filter: sepia (1); - filtro de leche: sepia (1); -ms-filtro: sepia (1); filtro: sepia (1); .blur -webkit-filter: blur (3px); -moz-filter: desenfoque (3px); -ms-filtro: desenfoque (3px); filtro: desenfoque (3px);
Puede ver más ejemplos de cómo funciona esto y cambiar los valores en tiempo real en la página de prueba de Edge.
Examinando el código, puede ver algunas otras características con las que no está familiarizado de inmediato. Lo primero que me llamó la atención fue navigator.msSaveBlob. El constructor Blob le permite crear y manipular fácilmente un blob (básicamente un archivo) directamente en el cliente. Es soportado en IE 10+.
El método msSaveBlob le permite guardar este objeto blob (en este caso, nuestra imagen instantánea) en el disco. También tiene un método de hermanos, msSaveOrOpenBlob, que también le permite abrir la imagen desde el navegador.
// savePhoto (): función invocada cuando el usuario hace clic en el elemento del lienzo // 1. Si se admite msSaveBlob, obtenga el blob de la foto del lienzo y guarde el archivo de imagen // 2. De lo contrario, configure el atributo de descarga del ancla elemento y descargue el archivo de imagen var savePhoto = function () if (photoReady) var canvas = document.getElementById ('canvasTag'); if (navigator.msSaveBlob) var imgData = canvas.msToBlob ('image / jpeg'); navigator.msSaveBlob (imgData, 'myPhoto.jpg'); else var imgData = canvas.toDataURL ('image / jpeg'); var link = document.getElementById ('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click (); canvas.removeEventListener ('click', savePhoto); document.getElementById ('photoViewText'). innerHTML = "; photoReady = false;;Si el navegador admite el método, reducirá la cantidad de código que debemos escribir para guardar una imagen.
Este es sólo el comienzo. También podemos utilizar WebGL con esto, lo que permite que se apliquen aún más filtros, además de tener un canal de video / audio en tiempo real integrado en entornos altamente interactivos. Tal vez ese sea mi próximo proyecto ...
Además, puede vincularse a la Web Audio API para aplicar la modulación de frecuencia a su salida de audio. Esta muestra del sintonizador de audio web lo ilustra bien. Algunas personas tienen más información sobre el aprendizaje visual, así que también vea este ejemplo de Microsoft.
Finalmente, a medida que los navegadores móviles sigan adoptando más de esta tecnología, podrá utilizar estas API de JavaScript para conectarse al hardware subyacente y hacer que esto funcione en dispositivos móviles, independientemente de la plataforma. Es un buen momento para ser un desarrollador web y, con suerte, después de haber usado esto, entenderá por qué estoy tan emocionado de ser parte de él..
No dude en consultar el código fuente y ver una muestra de trabajo.
Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y tenemos la misión de crear mucho más con Microsoft Edge. Aquí hay algunos para ver:
Y algunas herramientas gratuitas para comenzar: Visual Studio Code, Azure Trial y herramientas de prueba en varios navegadores, todas disponibles para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
