Como acessar áudio e vídeo quando a codificação com javascript

Como você acessar áudio e vídeo quando a codificação com javascript? Antes do HTML5, o único caminho para uma página da web para usar uma câmera conectada a um computador ou construída em um computador era através do uso de plugins, como o Flash.

Um dos principais objetivos da HTML5 é eliminar a necessidade de plugins, com as suas constantes atualizações e questões de segurança. Desde HTML5 foi proposto pela primeira vez, houve várias tentativas de definir um padrão para usar a entrada de câmeras.

A API mais recente e maior para ativar o vídeo ao vivo e comunicações de áudio através de navegadores web é chamada WebRTC (Web Real Time Communications).

No coração do WebRTC é navigator.getUserMedia (), que faz exatamente o que seu nome implica: Fica mídia (áudio e vídeo) do usuário (bem, do dispositivo do usuário, especificamente).

getUserMedia é suportado no Chrome, Opera e Firefox. Se você quiser usá-lo em outros navegadores, como o Safari ou Internet Explorer, você precisará usar uma ferramenta chamada uma polyfill.

O primeiro parâmetro de getUserMedia é um objeto com propriedades que indicam o tipo de mídia que você deseja acessar. Por exemplo, se você deseja acessar vídeo e áudio, você usaria o seguinte objeto como o primeiro parâmetro:

{Vídeo: true, áudio: true}

Os outros parâmetros que getUserMedia leva são uma chamada de retorno sucesso e um retorno de chamada de erro. Aqui está um uso amostra de getUserMedia.

Examine as linhas principais do código:

window.addEventListener ( 'DOMContentLoaded', function () {

Um ouvinte de evento que espera até que o DOM é carregado antes de executar o resto do código é

var v = document.getElementById ( 'v') -

A linha anterior cria uma nova variável, chamada v, para manter uma referência para o elemento de vídeo com uma ID =# 147-v# 148-:

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

getUserMedia é uma tecnologia experimental ainda não está totalmente normalizado. Devido a isso, os navegadores da web têm diferentes implementações de TI, o que eles indicam usando prefixos de fornecedores. Esta instrução define o valor da norma navegador.getUserMedia opor-se à versão fornecedor prefixada suportado pelo navegador atual do usuário. Assim, quando você estiver usando o Firefox e chamada navigator.getUserMedia, na verdade você está chamando navigator.mozGetUserMedia:

Se (navigator.getUserMedia) {

que verifica para ver se o navegador do usuário suporta getUserMedia:

navigator.getUserMedia (

Ligar para getUserMedia método:

{Vídeo: true, áudio: false}

O primeiro parâmetro é um revelador objeto que mídia que deseja acessar:

function (stream) {

O retorno de chamada de sucesso é executado se o pedido de getUserMedia bem-sucedida. Leva um único argumento:

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

As duas linhas anteriores suavizar as diferenças entre a forma como diferentes navegadores lidar com o objeto de fluxo de mídia. A segunda linha apresenta o nosso amigo, o operador ternário! Esta declaração define o src propriedade do elemento de vídeo para qualquer url.createObjectUrl (stream) ou para transmitir, dependendo de qual o método é suportado pelo navegador:

v.play () -

Finalmente, o vídeo é reproduzido. Se o computador suportar getUserMedia e você tem uma câmera, você verá vídeo de si mesmo (ou o que a câmera está apontando para) neste momento:

function (erro) {alert ( 'Algo deu errado (código de erro.' + error.code + ')') - regresso-}

O código anterior é um retorno de erro. Se o navegador tem suporte getUserMedia (), mas o usuário não permite que o navegador para acessar a câmera, esta função irá executar e imprimir uma mensagem de erro específica:

else {alert ( 'Desculpe, o navegador que você está usando doesn ' t apoio getUserMedia ') - retorno -} -

O código anterior é a outro condição. Se o navegador do usuário não suporta getUserMedia (), este alerta será exibido:

Se o navegador do usuário suporta getUserMedia, o usuário tem uma câmera, e permitem que o aplicativo para acessar a câmera, o aplicativo irá exibir vídeo ao vivo na janela do navegador.