P2P Vidéo Confrencing à l'aide de HTML5 ou Javascript

Je suis en train de construire des vidéoconférences à l'aide de html5 et javascript jusqu'à maintenant, je suis capable de diffuser de la capture de mon appareil photo et l'afficher sur toile

voici le code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>  
<style>

    nav .search {
        display: none;
    }

    .demoFrame header,
    .demoFrame .footer,
    .demoFrame h1,
    .demoFrame .p {
        display: none !important;
    }

    h1 {
        font-size: 2.6em;
    }

    h2, h3 {
        font-size: 1.7em;
    }

    .left {
        width: 920px !important;
        padding-bottom: 40px;
        min-height: auto !important;
        padding-right: 0;
        float: left;
    }

    div.p {
        font-size: .8em;
        font-family: arial;
        margin-top: -20px;
        font-style: italic;
        padding: 10px 0;
    }

    .footer {
        padding: 20px;
        margin: 20px 0 0 0;
        background: #f8f8f8;
        font-weight: bold;
        font-family: arial;
        border-top: 1px solid #ccc;
    }

    .left > p:first-of-type { 
        background: #ffd987; 
        font-style: italic; 
        padding: 5px 10px; 
        margin-bottom: 40px;
    }

    .demoAds {
        position: absolute;
        top: 0;
        right: 0;
        width: 270px;
        padding: 10px 0 0 10px;
        background: #f8f8f8;
    }
    .demoAds a {
        margin: 0 10px 10px 0 !important;
        display: inline-block !important;
    }

    #promoNode { 
        margin: 20px 0; 
    }

    @media only screen and (max-width : 1024px) {
        .left {
            float: none;
        }

        body .one .bsa_it_ad {
            position: relative !important;
        }
    }
</style>    <style>
        video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
        #canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
    </style>
</head>
<body>



<!-- Add the HTML header -->
<div id="page">




<!-- holds content, will be frequently changed -->
<div id="contentHolder">

    <!-- start the left section if not the homepage -->
    <section class="left">

    <!--
        Ideally these elements aren't created until it's confirmed that the 
        client supports video/camera, but for the sake of illustrating the 
        elements involved, they are created with markup (not JavaScript)
    -->
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap" class="sexyButton">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>

        //Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            //Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true, "audio" : true },
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            //Put video listeners into place
            if(navigator.getUserMedia) { //Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { //WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            //Trigger photo take
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 640, 480);
            });
        }, false);

    </script>

</section>

<style>
body .one .bsa_it_ad { background: #f8f8f8; border: none; font-family: inherit; width: 200px; position: absolute; top: 0; right: 0; text-align: center; border-radius: 8px; }
body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; margin: 0 0 5px; }
body .one .bsa_it_ad .bsa_it_i img { padding: 10px; border: none; margin: 0 auto; }
body .one .bsa_it_ad .bsa_it_t { padding: 6px 0; }
body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
body .one .bsa_it_p { display: none; }
body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; margin: 12px 15px 0; text-align: right; }
</style>

</div>

</body>
</html>

aujourd'hui je veux diffuser de la vidéo pour faire une conférence entre deux personnes, je sais que je dois utiliser webRTC ou websocket mais je ne sais pas comment commencer à écrire du code pour cela.
toute aide ou suggestion serait très utile.

même problème avec moi

OriginalL'auteur Rajendra Khabiya | 2013-07-09

  1. 5

    HTML5rocks a un excellent tutoriel sur le.

    WebRTC tutoriel

    Pour résumer ci-dessous sont les étapes impliquées:-

    1. Obtenir des flux audio, vidéo ou de données.
    2. Obtenir des informations de réseau telles que l'adresse IP et le port, et l'échange avec d'autres WebRTC clients (connu sous le nom de pairs) pour activer la connexion, même à travers Nat et pare-feu.
      Coordonner "signalisation" de communication pour signaler des erreurs et de lancer ou fermer les sessions.
    3. Échange d'informations sur les médias et le client capacités, tels que la résolution et les codecs.
    4. Communiquer le streaming audio, vidéo ou de données. D'acquisition et de communication de données en continu,

      WebRTC implémente l'Api suivantes.
      MediaStream: obtenir l'accès à des flux de données, tels que la part de l'utilisateur de la caméra et du microphone. RTCPeerConnection: audio ou vidéo appelant, avec des équipements de chiffrement et de gestion de la bande passante. RTCDataChannel: peer-to-peer communication de données générique.
    avez-vous une démo ou un lien de travail pour cela, nous avons je peux trouver un peu de code
    apprtc.appspot.com/?r=89345120 découvrez ce.. vous pouvez voir la source... aussi sur github, vous pouvez trouver de nombreux là-bas..

    OriginalL'auteur Jack Daniel's

  2. 1

    Vous êtes évidemment ne demandant qu'JavaScript ici, mais si vous êtes un .NET ou Mono dev vous pouvez installer le package nuget XSockets.De l'échantillon.WebRTC, qui fournira un JavaScript vidéo de la conférence pour vous... et aussi de lire ce guide http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc

    OriginalL'auteur Uffe