12

Presentación del Taller WebRTC

29Mar
Escrito por en Code Snippets, Desarrollo web, HTML5, Javascript, Web, WebRTC

logo-webrtcEl taller sobre WebRTC fue una oportunidad donde muchos aprendieron y otros compartieron sus experiencias. Para los que no pudieron asistir y les interese el tema, voy a dejar la presentación del mismo. Además de un código que permite acceder a nuestra webcam y capturar fotos, usando una de las apis propuestas en el estándar.

Descargar Presentación Taller WebRTC

Pagina.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <script src='webrtc.js'></script>
        <title>Probando WEBRtc</title>
    </head>
    <body>
        <div id="main">
            <video id="video" width="800" height="600"></video>
            <button onclick="draw()" value="Tomar foto">Tomar Foto</button>
        </div>
    </body>
</html>

webrtc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.addEventListener('DOMContentLoaded', function() {
    'use strict';
    var video = document.getElementById('video');
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL;
 
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true}, successCallback, errorCallback);
    } else {
        console.log('getUserMedia no soportado en el navegador.');
        // Mostrar una alerta en el navegador
    }
    function successCallback(stream) {
 
        if (video.mozSrcObject !== undefined) {
            video.mozSrcObject = stream;
        } else {
            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        };
        video.play();
    }
    function errorCallback(error) {
        console.log('An error occurred: [CODE ' + error.code + ']');
        // Display a friendly "sorry" message to the user
    }
 
});
function draw() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width  = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    document.getElementById('main').appendChild(canvas);
}
Etiquetado en:

12 Comentarios

  1. Jorge Luis dice:
    marzo 29, 2013 a las 4:32 pm

    Se pondrá disponible el servidor escrito en node.js?

    Responder
  2. Dnis dice:
    marzo 29, 2013 a las 8:09 pm

    por favor me pueden decir el nombre del pluging de wordpress de la nube de etiqueta

    Responder
  3. kKk dice:
    marzo 29, 2013 a las 10:27 pm

    debo estar haciendo algo mal, pues no me funcionó lo del webrtc.js

    Responder
  4. kKk dice:
    marzo 29, 2013 a las 10:31 pm

    yaya, ya vi que era, genial gggg

    Responder
  5. Lester Romero Bernardo dice:
    marzo 30, 2013 a las 7:16 am

    Está genial. Resuelve muchos problemas de portabilidad y funcionalidad de las aplicaciones web que requieren o usan de alguna manera estas tecnologías. Gracias por pensar en los externos de los UCI.

    Saludos

    Responder
  6. eliecerSR dice:
    marzo 30, 2013 a las 10:51 am

    Pudieran compartir con la comunidad el servidor de NodeJS que se usa para conectarse con WebRTC, y si es posible pudieran escribir un articulo de como se configura.

    Saludos.

    Responder
  7. yaicel dice:
    marzo 30, 2013 a las 8:22 pm

    Cuando van a publicar el ejemplo que se montó

    Responder
  8. liusvel dice:
    marzo 30, 2013 a las 9:47 pm

    Esta aplicación debe ser compatible con firefox y chrome , pero solamente me funciona en firefox , sabe alguien como hacer que el acceso a esta api sea compatible en ambos navegadores ??? , por cierto muy buena la presentacion del taller webrtc , solo faltaria extender el servicio a toda la comunidad universitaria con un sitio destinado a las video-conferencias !!!

    Responder
  9. Carlos_UCI dice:
    marzo 31, 2013 a las 12:58 am

    me pincho bien, bastante buena esa opcion…cuando comienza a usarse en la universidad?? ojala sea pronto

    Responder
  10. Dave Cuza dice:
    abril 1, 2013 a las 8:29 am

    El NodeJS lo pudieran subir aqui

    Responder
  11. freddyignacio dice:
    abril 28, 2013 a las 3:45 pm

    ¡Esto es lo máximo!

    Responder

Dejar un comentario