Como acessar áudio e vídeo quando codificar com javascript

Como você acessar áudio e vídeo quando codificação com javascript? Antes do HTML5, o único caminho para uma página 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 suas atualizações constantes e problemas 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 permitir que o vídeo ao vivo e comunicações de áudio através de navegadores web é chamado 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 utilizador (bem, a partir de 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ê vai precisar usar uma ferramenta chamada uma polyfill.

O primeiro parâmetro 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 é

Video: Video & audio: javascript hover to play video

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

A linha anterior cria uma nova variável, chamado v, para manter uma referência para o elemento de vídeo com um id =“v”:

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

getUserMedia é uma tecnologia experimental ainda não totalmente normalizada. Devido a isso, os navegadores web têm diferentes implementações do mesmo, que indicam usando prefixos de fornecedores. Esta declaração define o valor do padrão navegador.getUserMedia opor-se a versão fornecedor prefixado 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:

if (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:

função (fluxo) {

O callback sucesso é executado se o pedido de getUserMedia bem-sucedido. Leva um único argumento:

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

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

Video: javascript Programming Tutorial | Audio and Video HTML5 APIs

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 é uma chamada de resposta 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 não suporta getUserMedia’) - retorno -} -

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

Video: Audio Workshop 1 Play Pause Mute Buttons javascript Tutorial

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.