12

Presentación del Taller WebRTC

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

El 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


<!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

            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);
            }

12 Comentarios

  1. Jorge Luis dice:

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

  2. Dnis dice:

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

  3. kKk dice:

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

  4. kKk dice:

    yaya, ya vi que era, genial gggg

  5. Lester Romero Bernardo dice:

    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

  6. eliecerSR dice:

    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.

  7. yaicel dice:

    Cuando van a publicar el ejemplo que se montó

  8. liusvel dice:

    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 !!!

  9. Carlos_UCI dice:

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

  10. Dave Cuza dice:

    El NodeJS lo pudieran subir aqui

  11. freddyignacio dice:

    ¡Esto es lo máximo!

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.