- Desde
- 21 Jul 2013
- Mensajes
- 6
Buenas noches compañeros en esta oportunidad vengo a compartir un código que conseguí hace unos meses, si alguien reconoce la fuente por favor hacerme saber y la pondré en el post
-con getUserMedia podremos obtener el stream de los datos locales en este caso la webcam para ello debemos pesarle 3 valores que serán (el straem a capturar"video", la funcion callback"la captura a iniciado", de nuevo en callback"esta vez en caso de error")
quedando de la siguiente manera:
navigator.getUserMedia({video: true}, onSucessCallback, onFailCallback);
le pasamos los prefijos al getUserMedia de manera que no importaría si los navegadores la función o no
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
con eso hemos capturado un stream para el vídeo ahora para mostrarlo utilizaremos la etiqueta <video > a la cual debemos pasarle la url del vídeo, para eso necesitamos el método windows.URL para crear un url ficticia que contendrá el stream y asignarla a la etiqueta <video >
video.src = window.URL.createObjectURL(localMediaStream);
ahora el codigo un poco mas organizado
Mas adelante pondré mas información referente a la webrtc y las cosas que podremos realizar con ella
-con getUserMedia podremos obtener el stream de los datos locales en este caso la webcam para ello debemos pesarle 3 valores que serán (el straem a capturar"video", la funcion callback"la captura a iniciado", de nuevo en callback"esta vez en caso de error")
quedando de la siguiente manera:
navigator.getUserMedia({video: true}, onSucessCallback, onFailCallback);
le pasamos los prefijos al getUserMedia de manera que no importaría si los navegadores la función o no
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
con eso hemos capturado un stream para el vídeo ahora para mostrarlo utilizaremos la etiqueta <video > a la cual debemos pasarle la url del vídeo, para eso necesitamos el método windows.URL para crear un url ficticia que contendrá el stream y asignarla a la etiqueta <video >
video.src = window.URL.createObjectURL(localMediaStream);
ahora el codigo un poco mas organizado
Insertar CODE, HTML o PHP:
<!DOCTYPE html>
<html>
<video autoplay></video>
<script>
var onErrorCallback = function (e)
{
console.log('Error!', e);
};
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia
({ video: true}, function (localMediaStream)
{
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
}
, onErrorCallback
);
</script>
</html>
Mas adelante pondré mas información referente a la webrtc y las cosas que podremos realizar con ella