Acesso Web Cam

[Gilberto Jr 26]

Bom dia;

 

Eu tenho uma webcam no meu notebook. Gostaria que as pessoas me vissem.

 

Eu coloque esse aplicativo jquery com swf dentro do meu site e na minha maquina que tem a camera funciona.

 

o link é esse http://www.tecnogalli.com.br/webcam/gilbertojr.swf só que as outras maquinas não esta funcionando.

 

O que estou fazendo de errado?

 

Queria também arruma um jeito de desligar a webcam também. Hoje ela esta desligada quando eu entro no link que postei acima ela liga. Depois mesmo eu saindo da pagina ela continua ligada.

 

Att;

[Gustavo Emygdio Barboza 24]

Nesse caso Gilberto é stream procure saber sobre o windows media encoder ou ustream vera que não terá como disponibilizar sem um servidor para isso... devido nossa taxa de upload ser pequena... a idéia básica que esses servidor feito para isso captura de sua máquina e ele disponibiliza para as demais pessoas..

[Gilberto Jr 26]

Bom dia;

 

Entendi, pensei que fosse possível somente com esses swf que postei o link acima.

 

Att;

[xanburzum 169]

Dae Gilberto eu estou usando bastante a API, navigator.getUserMedia() do HTML 5, com ela vc consegue permite aos aplicativos da web acessar a câmera e o microfone do usuário.

[Gilberto Jr 26]

Mas com esse API os outros usuário consegui me visualizar na web cam?

 

Att;

[xanburzum 169]

sim sem problemas

[Gilberto Jr 26]

Eu tentei achar um exemplo dessa API aqui para incrementar e não achei.

 

Você poderia me mandar um exemplo de como fica no html 5?

 

Att;

[xanburzum 169]

captura de mídia HTML

Primeira tentativa do DAP de padronizar a captura de mídia na web. Ela funciona sobrepondo <input type="file"> e adicionando novos valores para o parâmetro accept.

Os usuários possam fazer uma captura de tela por conta própria com a webcam usando capture=camera:

<input type="file" accept="image/*;capture=camera">

A gravação de um vídeo ou áudio é semelhante:

<input type="file" accept="video/*;capture=camcorder">

<input type="file" accept="audio/*;capture=microphone">

o elemento <device>, que se tornou o antecessor de getUserMedia().

O Opera foi um dos primeiros navegadores a criar implementações iniciais de captura de vídeo com base no elemento <device>. o WhatWG decidiu usar a tag <device> em outro projeto, dessa vez, uma API JavaScript chamada navigator.getUserMedia(). Uma semana depois, o Opera criou novas versões que incluíam suporte para a especificação getUserMedia() atualizada. Mais tarde nesse mesmo ano, a Microsoft se juntou ao projeto lançando um Lab for IE9 com suporte para a nova especificação.

Veja como seria o <device>:

<device type="media" onchange="update(this.data)"></device>

<video autoplay></video>

<script>

function update(stream) {

document.querySelector('video').src = stream.url;

}

</script>

WebRTC

O elemento <device> acabou se tornando o método de Dodo.

getUserMedia() está relacionado ao WebRTC porque é a porta de acesso para esse conjunto de APIs. Ele fornece o meio para acessar o fluxo da câmera/microfone local do usuário.

Com navigator.getUserMedia(), podemos finalmente trabalhar com a entrada da webcam e do microfone sem um plug-in. O acesso da câmera agora está a uma chamada, não a uma instalação de distância. Ele ocorre diretamente no navegador. Já se interessou?

Ativando

A API getUserMedia() ainda é muito recente, e somente Google e Opera têm versões de desenvolvedor que a incluem. No Google Chrome 18+, a API pode ser ativada em about:flags.

 

Ativação de getUserMedia() na página about:flags do Google Chrome.

Para o Opera, faça download das versões experimentais para Android e computador.

Detecção de recursos

A detecção de recursos é uma simples verificação da existência de navigator.getUserMedia:

function hasGetUserMedia() {

  // Note: Opera builds are unprefixed.

  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||

            navigator.mozGetUserMedia || navigator.msGetUserMedia);

}

if (hasGetUserMedia()) {

  // Good to go!

} else {

  alert('getUserMedia() is not supported in your browser');

}

Obtenção de acesso a um dispositivo de entrada

Para usar a webcam ou o microfone, precisamos solicitar permissão. O primeiro parâmetro de getUserMedia() serve para especificar o tipo de mídia que você deseja acessar. Por exemplo, para solicitar a webcam, o primeiro parâmetro deverá ser "video". Para usar o microfone e a câmera, transmita "video, audio":

<video autoplay></video>

 

<script>

var onFailSoHard = function(e) {

console.log('Reeeejected!', e);

};

 

// Not showing vendor prefixes.

navigator.getUserMedia('video, audio', function(localMediaStream) {

var video = document.querySelector('video');

video.src = window.URL.createObjectURL(localMediaStream);

 

// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.

// See crbug.com/110938.

video.onloadedmetadata = function(e) {

// Ready to go. Do some stuff.

};

}, onFailSoHard);

</script>

 

OK. O que está acontecendo aqui? A captura de mídia é um exemplo perfeito de novas APIs HTML5 funcionando juntas. Ela funciona junto com os outros elementos HTML5, <audio> e <video>. Observe que não estamos definindo um atributo src nem incluindo elementos <source> no elemento <video>. Em vez de direcionar o vídeo para um URL de um arquivo de mídia, estamos direcionando-o para um URL de blob obtido a partir de um objeto LocalMediaStream que representa a webcam.

Também estou instruindo o <video> a ser reproduzido automaticamente; caso contrário, ele seria congelado no primeiro quadro. A adição de controles também funciona conforme esperado.

Observação: há um bug no Google Chrome porque a transmissão de apenas "audio" não funciona: crbug.com/112367. O elemento <audio> também não funcionaria no Opera.

O Opera e o Chrome implementam versões diferentes da especificação. Isso deixa o uso prático um pouco mais "desafiador" do que normalmente seria.

No Chrome:

Esse snippet funciona no Chrome 18+ (ative em about:flags):

navigator.webkitGetUserMedia('audio, video', function(localMediaStream) {

var video = document.querySelector('video');

video.src = window.webkitURL.createObjectURL(localMediaStream);

}, onFailSoHard);

No Opera:

As versões de desenvolvedor do Opera funcionam com uma versão atualizada da especificação. Esse snippet funciona no Opera:

navigator.getUserMedia({audio: true, video: true}, function(localMediaStream) {

video.src = localMediaStream;

}, onFailSoHard);

As principais diferenças são:

• getUserMedia() não tem prefixo.
• Um objeto é transmitido como o primeiro argumento em vez de uma lista de strings.
• video.src é definido diretamente como o objeto LocalMediaStream em vez de um URL de blob. Soube que o Opera acabará atualizando isso para exigir um URL de blob.

Nos dois:

Se desejar que algo funcione em vários navegadores (mas isso é muito delicado), tente fazer isso:

var video = document.querySelector('video');

 

if (navigator.getUserMedia) {

navigator.getUserMedia({audio: true, video: true}, function(stream) {

video.src = stream;

}, onFailSoHard);

} else if (navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia('audio, video', function(stream) {

video.src = window.webkitURL.createObjectURL(stream);

}, onFailSoHard);

} else {

video.src = 'somevideo.webm'; // fallback.

}

Segurança

No futuro, os navegadores podem lançar uma barra de informações chamando getUserMedia(), o que daria aos usuários a opção de conceder ou negar o acesso à câmera ou ao microfone. Infelizmente, a especificação não traz muitos detalhes sobre segurança. No momento, ninguém implementa uma barra de permissão.

Fornecimento de fallback

Para usuários que não têm suporte para getUserMedia(), uma opção seria executar fallback para um arquivo de vídeo já existente se a API não fosse compatível e/ou a chamada falhasse por algum motivo:

// Not showing vendor prefixes or code that works cross-browser:

function fallback(e) {

  video.src = 'fallbackvideo.webm';

}

function success(stream) {

  video.src = window.URL.createObjectURL(stream);

}

if (!navigator.getUserMedia) {

  fallback();

} else {

  navigator.getUserMedia({video: true}, success, fallback);

}

Como fazer capturas de tela

O método ctx.drawImage(video, 0, 0) da API <canvas> simplifica o desenho de quadros de <video> no <canvas>. Obviamente, agora que temos a entrada de vídeo via getUserMedia(), ficou fácil criar um aplicativo para tirar foto com vídeo em tempo real:

<video autoplay></video>

<img src="">

<canvas style="display:none;"></canvas>

var video = document.querySelector('video');

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var localMediaStream = null;

function snapshot() {

  if (localMediaStream) {

    ctx.drawImage(video, 0, 0);

    // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.

    document.querySelector('img').src = canvas.toDataURL('image/webp');

  }

}

video.addEventListener('click', snapshot, false);

// Not showing vendor prefixes or code that works cross-browser.

navigator.getUserMedia({video: true}, function(stream) {

  video.src = window.URL.createObjectURL(stream);

  localMediaStream = stream;

}, onFailSoHard);

Aplicação de efeitos Filtros do CSS

Usando os filtros do CSS, podemos aplicar alguns efeitos de nós ao <video> conforme ele é capturado:

<style>

video {

  width: 307px;

  height: 250px;

  background: rgba(255,255,255,0.5);

  border: 1px solid #ccc;

}

.grayscale {

  +filter: grayscale(1);

}

.sepia {

  +filter: sepia(1);

}

.blur {

  +filter: blur(3px);

}

...

</style>

<video autoplay></video>

<script>

var idx = 0;

var filters = ['grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate',

               'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', ''];

function changeFilter(e) {

  var el = e.target;

  el.className = '';

  var effect = filters[idx++ % filters.length]; // loop through filters.

  if (effect) {

    el.classList.add(effect);

  }

}

document.querySelector('video').addEventListener('click', changeFilter, false);

</script>

Como usar getUserMedia com a API de áudio da web

Esta seção discute os possíveis aprimoramentos e extensões futuros para a API atual.

Um dos meus sonhos é criar o AutoTune no navegador tendo apenas apenas a tecnologia da web aberta. Não estamos muito longes dessa realidade. Já temos getUserMedia() para entrada de microfone. Use a API de áudio da web para obter efeitos em tempo real e pronto. Ainda falta a integração dos dois (crbug.com/112404), embora haja uma proposta preliminar nos trabalhos para que isso aconteça.

Algum dia, a execução da entrada de microfone na API de áudio da web poderia ser parecida com:

var context = new window.webkitAudioContext();

 

navigator.webkitGetUserMedia({audio: true}, function(stream) {

var microphone = context.createMediaStreamSource(stream);

var filter = context.createBiquadFilter();

 

// microphone -> filter -> destination.

microphone.connect(filter);

filter.connect(context.destination);

}, onFailSoHard);

[Gustavo Emygdio Barboza 24]

Já tinha visto sobre essa api mas não vi onde repasso o IP e a porta para que seja direcionada de qual webcam seja buscada... do jeito que esta vai aparecer a webcam do PC local não de um PC em específico... sem um programa acho que não terá sucesso... procure sobre o windows media encoder e veja também como configurar o servidor virtual do seu roteador para apontar para sua máquina... e fazer as devidas liberações no firewall....