¿Cómo acceder a audio y vídeo cuando se codifica con javascript

¿Cómo se accede audio y vídeo cuando se codifica con javascript? Antes de HTML5, el único camino para una página Web para utilizar una cámara conectada a un ordenador o integrado en un ordenador era mediante el uso de plugins, como Flash.

Uno de los principales objetivos de HTML5 es eliminar la necesidad de plugins, con sus constantes cambios y problemas de seguridad. Desde que se propuso por primera vez HTML5, ha habido varios intentos de definir un estándar para el uso de entrada de las cámaras.

El mejor y más nuevo API para permitir video en vivo y comunicaciones de audio a través de los navegadores web se llama WebRTC (Real Time Web Comunicaciones).

Video: Acceder a la cámara y el micrófono con HTML5

En el corazón de WebRTC es navigator.getUserMedia (), que hace exactamente lo que implicaría su nombre: Se pone de medios (audio y vídeo) del usuario (así, desde el dispositivo del usuario, en concreto).

getUserMedia se admite actualmente en Chrome, Opera y Firefox. Si desea utilizarlo en otros navegadores, como Safari o Internet Explorer, tendrá que utilizar una herramienta llamada polyfill.

El primer parámetro de getUserMedia es un objeto con propiedades que indican qué tipo de medio que desea acceder. Por ejemplo, si desea tener acceso a vídeo y audio, se utiliza el siguiente objeto como primer parámetro:

{Vídeo: verdad, audio: true}

Los otros parámetros que getUserMedia toma son una devolución de llamada éxito y una respuesta de error. He aquí un ejemplo de uso getUserMedia.

Examine las líneas clave del código:

window.addEventListener ( ‘DOMContentLoaded’, function () {

Un detector de eventos que espera hasta que el DOM se carga antes de ejecutar el resto del código es

var v = document.getElementById ( ‘v’) -

La línea anterior crea una nueva variable, llamada V, para almacenar una referencia al elemento de vídeo con una id =“v”:

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) -

getUserMedia es una tecnología experimental todavía no está completamente estandarizado. Debido a esto, los navegadores web tienen diferentes implementaciones de la misma, que se indican mediante el uso de prefijos de proveedores. Esta declaración establece el valor de la norma navegador.getUserMedia oponerse a la versión proveedor prefijo reconocido por el navegador actual del usuario. Por lo tanto, cuando se está usando Firefox y llamada navigator.getUserMedia, en realidad se está llamando navigator.mozGetUserMedia:

si (navigator.getUserMedia) {

que comprueba para ver si el navegador del usuario soporta getUserMedia:

navigator.getUserMedia (

Llama a getUserMedia método:

Video: Learn javascript variables using the Web Audio API

{Vídeo: verdad, audio: false}

El primer parámetro es un revelador objeto que los medios de comunicación que desea acceder:

Video: como activar javascript samsung galaxy s3 i9300 español Full HD

función (corriente) {

La devolución de llamada se ejecuta si el éxito de la solicitud getUserMedia tiene éxito. Se toma un solo argumento:

var url = window.URL || window.webkitURL-v.src = url? url.createObjectURL (stream): racionalizado

Las dos líneas precedentes suavizar las diferencias entre cómo los diferentes navegadores manejan el objeto de flujo de medios de comunicación. La segunda línea cuenta con nuestro amigo, el operador ternario! Esta declaración establece la src propiedad del elemento de vídeo a cualquiera url.createObjectUrl (stream) o para transmitir, dependiendo de qué método se apoya en el navegador:

Video: Curso HTML, CSS y JS - 14. Insertar Audio y Vídeo a la Web

v.play () -

Finalmente, el vídeo se reproduce. Si admite el ordenador getUserMedia y usted tiene una cámara, verá vídeo de sí mismo (o lo que la cámara está apuntando a) en este punto:

función (error) {alert ( ‘Algo salió mal (código de error.‘+ error.code + ‘)’) - Regresar-}

El código anterior es una devolución de llamada de error. Si el navegador no soporte getUserMedia (), pero el usuario no permite que el navegador para acceder a la cámara, esta función se ejecutará e imprimir un mensaje de error específico:

else {alert ( ‘Lo siento, el navegador que está utilizando no es compatible getUserMedia’) - retorno -} -

El código anterior es la más condición. Si el navegador del usuario no soporta getUserMedia (), Se mostrará esta alerta:

Si el navegador del usuario hace de soporte getUserMedia, el usuario tiene una cámara, y que permita que la aplicación acceda a la cámara, la aplicación mostrará vídeo en directo en la ventana del navegador.