12

WEBRtc: Video y audio sin plugins.

27Ene
Escrito por en API, Desarrollo web, Firefox, Javascript, Uncategorized

logo-webrtcWebRTC (Web Real-Time Communication) es una definición -de un conjunto de APIs- creada por la World Wide Web Consortium (W3C), con el objetivo de permitir a los navegadores ejecutar aplicaciones para vídeo llamada, vídeo chat y compartición de ficheros P2P sin necesidad de plugins.

La definición de la W3C todavía no esta terminada, por lo que puede estar sujeta a grandes cambios. Aun así ya existen experimentaciones tempranas, ejemplo de ello es el soporte para este tipo de comunicación en tiempo real que brindan los navegadores y Google Chrome, Mozilla Firefox y Opera Browser.

Se espera que la evolución de esta especificación se base en:

  • La definición de un conjunto de protocolos que permitan la comunicación en tiempo real en los navegadores.
  • Problemas de privacidad que surgen al exponer nuevas capacidades.
  • Discusiones técnicas en la implementación de canales de datos
  • Experiencias ganadas por experimentaciones tempranas
  • Retroalimentación recibida de los usuarios

Mozilla no se ha quedado atrás, y en la versión de Firefox 18, ya está implementada la API mozGetUserMedia() que permite acceder a la webcam y al micrófono y la API mozRTCPeerConnection() que permite la conexión peer to peer, todo usando javascript. Para los que tengan webcam les dejo a continuación un ejemplo de acceder a la misma desde Firefox.

NOTA: Primero debemos acceder al about:config y poner en true las siguientes preferencias.

media.navigator.enabled
media.navigator.permission.disabled

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
    <title>Probando WEBRtc</title>
</head>
<body>
    <div id="main">
        <br><br>
        <div style="display: block;" id="startbuttons">
            <input value="Video" onclick="startVideo();" type="button">
        </div>
        <div id="images">
        <div id="content"></div>
        <div id="frames"></div>
        </div>
            <div style="display: none;" id="stopbuttons">
            <input value="Stop" onclick="stopMedia();" type="button">
        </div>
    </div>
 
    <script type="application/javascript">
    var video_status = false;
    var video = document.createElement("video");
    video.setAttribute("width", 300);
    video.setAttribute("height", 300);
 
    var video_status = false;
 
    var start = document.getElementById("startbuttons");
    var stop = document.getElementById("stopbuttons");
 
    var content = document.getElementById("content");
 
    var saved_stream = null;
    var capturing = false;
 
    function startVideo() {
        video_status = true;
        startMedia({video:true});
    }
 
    function stopMedia() {
        if (video_status) {
            video.mozSrcObject = null;
            content.removeChild(video);
            capturing = false;
            video_status = false;
        }
        saved_stream = null;
        stop.style.display = "none";
        start.style.display = "block";
    }
 
    function startMedia(param) {
        stop.style.display = "block";
        start.style.display = "none";
        try {
            window.navigator.mozGetUserMedia(param, function(stream) {
        if (video_status) {
            content.appendChild(video);
            video.mozSrcObject = stream;
            video.play();
        }
        }, function(err) {
            alert("Ocurrió un error al cargar el video.");
            stopMedia();
        });
        } catch(e) {
            alert("Ocurrió la siguiente excepción: "+ e);
            stopMedia();
        }
    }
    </script>
 
</body>
</html>
Etiquetado en:

12 Comentarios

  1. liusvel dice:
    enero 28, 2013 a las 7:05 pm

    Este articulo esta muy bueno gracias , no sabia que ya est se estaba implementando de manera nativa en los buscadores y la verdad que constituye un paso de avance , solo quisiera de ser posible algun ejemplo de como usar esta funcion mozRTCPeerConnection() que permite la conexión peer to peer .

    Responder
    • abraham dice:
      enero 28, 2013 a las 8:20 pm

      El ejemplo lo tengo, lo que pasa que no lo he podido probar porque se necesita de un servidor, y la aplicación que tengo para eso esta hecha en node.js y no se como correrla. si lo deseas te puedo mandar el ejemplo.

      Responder
      • liusvel dice:
        enero 28, 2013 a las 9:45 pm

        Si el ejemplo me gustaría probarlo además ya he estado probando ese servidor y se +- como funciona , por favor envíamela a mi correo de ser posible.

        Responder
  2. Yordanis dice:
    febrero 7, 2013 a las 8:25 am

    Mandamelo a mi también(ymleon) para ver si entre todos logramos algo.

    Responder
  3. Victor Manuel dice:
    febrero 7, 2013 a las 8:31 am

    Esta super tocao eso, tambien me gustaria que me lo mandaran a mi correo, para cacharrearlo… saludos. victor@otegr.co.cu

    Responder
  4. Raykinho CR7 dice:
    febrero 8, 2013 a las 9:38 pm

    Gracias ,por haberme mandado este sitio.

    Responder
  5. F@lcón dice:
    febrero 25, 2013 a las 9:37 pm

    Tengo una video conferencia de Node.js hecha por su creador Ryan Dahl para el que le pueda interesar, mi usuario es jlfalcon

    Responder
  6. F@lcón dice:
    marzo 29, 2013 a las 12:10 am

    Para la gente interna de la UCI miren esta conferencia.

    https://10.12.120.250/ftp/Inform%c3%a1tica/Video%20Tutoriales/Node.js/Introduction%20to%20Node.js%20with%20Ryan%20Dahl(720p_H.264-AAC).mp4

    Saludos

    Responder
  7. F@lcón dice:
    marzo 29, 2013 a las 12:12 am

    Mala mía me falto el .mp4 al final

    https://10.12.120.250/ftp/Inform%C3%A1tica/Video%20Tutoriales/Node.js/Introduction%20to%20Node.js%20with%20Ryan%20Dahl(720p_H.264-AAC).mp4

    Saludos

    Responder
  8. Gustavo dice:
    enero 23, 2014 a las 4:11 pm

    Saludos a mi también me gustaría que me lo enviaran a mi corre para poder conocer mejor el tema.

    Responder

Dejar un comentario