muaz-khan / WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
https://www.webrtc-experiment.com/
MIT License
11.74k stars 3.95k forks source link

demo doesn't initialize remote connection #20

Open ebredy opened 11 years ago

ebredy commented 11 years ago

So I have two laptops at home both using the latest chrome at home. I tried your demo to simulate a one-to-one connection using video+audio but I had difficulties getting them to initialize the remote connections. Is this an issue on your end or does this plugin prevent the same connection from happening that shares the same router?

muaz-khan commented 11 years ago

Are you using RTCMultiConnection ---- socket.io specific one-to-one video chat ---- or ---- video chat using WebSockets for signliang?

Can you share your code here?

These experiments can fail only if:

  1. NAT traversing failed
  2. Signaling issue (I'm using firebase which can fail if limit exceeds i.e. number of concurrent requests and storage size)
  3. Or a bug in code! (Sometimes a small bug causes entire experiment to fail)

Timing also matters. Well, timing issue rarely occurs.

I tested all experiments on many laptops that were using same modem...and all of them worked all the time.

ebredy commented 11 years ago

Well I'm not doing my own code. I'm using the all in one test. I open a session on one laptop and then send the share session link to the other laptop. they are both using the chrome browser and they both show the local connection but not the remote connection. Here is the link I'm uainf: https://webrtc-experiment.appspot.com/RTCMultiConnection/#904192 . I have not implemented this on my webserver as I wanted to see if your plugin worked first before trying it. I was using someone's else plugin and I even installed a node.js server and their plugin was also having the same issue where the local worked but not the remote. Since I'm testing your demos and they work for you I want to eliminate as much possibility as possible to see what the real issue might be. I don't think its option 3 where did is a bug in the code unless your code has a bug that is unknown to you which leaves option 1 and 2.

What is NAT traversing failed? How can I check in regards to my NAT settings to ensure that it works? What indication can I double check so as error logs to see if it is working or not.

Option 2 signaling issues in regards to the number of concurrent requests and storage size. well I've being using the one to one session. I tested it earlier this morning which was 8:30 AM Eastern time. is the total number of concurrent connection might be causing this issue or is it per session?

Last but not least you mention timing issues. Is that a possibility? I'm willing to do a screen sharing via skype to help me debug this issue and see it first hand. Thanks in advance.

My SKype username: extremephp

muaz-khan commented 11 years ago

All-in-One demo has some bugs. Try some other RTCMultiConnection specific demos.

Try this one: Users ejection and presence detection

ebredy commented 11 years ago

@muaz-khan: I'm still having the same issue where I can't view a local and remote session two different local laptops using the same modem/wireless router. I know its possible with webrtc based plugins because it worked for https://apprtc.appspot.com/. what is it that they do different from you? Are you using a stun /ice server? Is it some options you are not setting that they are? I would have used them but you seem to update your stuff quickly and you have documentation. I'm willing to pay to get your undivided attention to help me understand and get this working.

ebredy commented 11 years ago

I'm also noticing that this is failing: https://smart-ip.net/geoip-json?callback=messenger.userinfo when I click to view javascript console in chrome. Are you using this as a turn or ice server?

muaz-khan commented 11 years ago

For Chrome, I'm using multiple ICE servers (i.e. both STUN and TURN). This can be the actual issue.

Are you tried video-conferencing experiment too? That experiment only uses STUN.

Samrt-ip-NET call is not for NAT traversing. It is just for users' location detection. It is used only if someone tries to send direct message.

ebredy commented 11 years ago

I have this code example from one of your tutorial and I'm trying to get it to work. I need to know what to set so individuals can share the same session and for the local video stream to be set:

See next comment for code example.

muaz-khan commented 11 years ago

Code example from previous comment (by @ebredy):

<div id="conversation" class="row-fluid"></div>
<script src="https://bit.ly/socket-io"></script>
<script src="https://bit.ly/RTCPeerConnection-v1-5"></script>
<div class="span6">
     <h2 align="left">Local</h2>

    <div id="local">
        <video width="100%" height="100%" id="localVideo" autoplay="autoplay" muted="true" />
    </div>
</div>
<div class="span6">
     <h2 align="left">Remote</h2>

    <div id="remote">
        <video width="100%" height="100%" id="remoteVideo" autoplay="autoplay" muted="true" />
    </div>
</div>
</div>
<div class="row-fluid">
    <center>
        <div id="status"></div>
    </center>
</div>
<script>
    $(document).ready(function () {
        var localVideo = $('#localVideo');
        var remoteVideo = $('#remoteVideo');
        var socket = io.connect('http://pubsub.pubnub.com/webrtc-app', {
            publish_key: 'demo',
            subscribe_key: 'demo',
            //  ssl : true,                   /* <<< for HTTPS */
            channel: 'WebRTC App'
        });

        socket.on('connect', onconnect);
        socket.on('message', oncallback);

        function onconnect() {
            transmitRequest();
        }

        var userID = 'offerer';
        /* unique ID to identify this user */
        var foundParticipant = false;

        function transmitRequest() {
            socket.send({
                userID: userID,
                type: 'request to join'
            });

            // Transmit "join request" until participant found
            !foundParticipant && setTimeout(transmitRequest, 1000);
        }

        function oncallback(response) {
            // Don't get his own messages
            if (response.userID == userID) return;

            // if participant found
            if (response.participant) {
                foundParticipant = true;

                // create offer and send him offer sdp
                createOffer();
            }

            // answer sdp sent to you: complete handshake
            if (response.firstPart || response.secondPart) {
                processAnswerSDP(response);
            }
        }

        var peer;

        function createOffer() {
            peer = RTCPeerConnection({

                /* function(offer_sdp) {}, */
                onOfferSDP: sendOfferSDP,

                onICE: function (candidate) {
                    socket && socket.send({
                        userID: userID,
                        candidate: {
                            sdpMLineIndex: candidate.sdpMLineIndex,
                            candidate: JSON.stringify(candidate.candidate)
                        }
                    });
                },
                onRemoteStream: function (stream) {
                    if (stream) remoteVideo.src =
                            webkitURL.createObjectURL(stream);
                },
                attachStream: clientStream
            });
        }

        // send offer sdp

        function sendOfferSDP(sdp) {
            var sdp = JSON.stringify(sdp);

            /* because sdp size is larger than what pubnub supports for single request...
            /* that's why it is splitted in two parts */
            var firstPart = sdp.substr(0, 700),
                secondPart = sdp.substr(701, sdp.length - 1);

            /* transmitting first sdp part */
            socket.send({
                userID: userID,
                firstPart: firstPart
            });

            /* transmitting second sdp part */
            socket.send({
                userID: userID,
                secondPart: secondPart
            });
        }

        var answerSDP = {};

        // got answer sdp, process it

        function processAnswerSDP(response) {
            if (response.firstPart) {
                answerSDP.firstPart = response.firstPart;
                if (answerSDP.secondPart) {
                    var fullSDP = JSON.parse(answerSDP.firstPart +
                        answerSDP.secondPart);
                    peer.addAnswerSDP(fullSDP);
                }
            }

            if (response.secondPart) {
                answerSDP.secondPart = response.secondPart;
                if (answerSDP.firstPart) {
                    var fullSDP = JSON.parse(answerSDP.firstPart +
                        answerSDP.secondPart);
                    peer.addAnswerSDP(fullSDP);
                }
            }
        }

        var userID = 'answerer';

        socket && socket.send({
            participant: true,
            userID: userID
        });

        //Here is the function that creates "answer sdp":

        function createAnswer(offer_sdp) {
            peer = RTCPeerConnection({
                /* you need to pass offer sdp sent by offerer */
                offerSDP: offer_sdp,
                onAnswerSDP: sendAnswerSDP,
                onICE: onICE,
                onRemoteStream: onRemoteStream,
                attachStream: clientStream
            });
        }
        //For answerer: socket "callback" function will be like this:

        function oncallback(response) {
            if (response.userID == userID) return;

            // you can show a "join" button or you can send participant
            request
            if (response.type && response.type == 'request to join') {}

            // offer sdp sent to you by offerer
            if (response.firstPart || response.secondPart) {
                processAnswerSDP(response);
            }
        }
    });
</script>
ebredy commented 11 years ago

I'm confused. what changes did you make?

On Thu, May 2, 2013 at 11:13 PM, Muaz Khan notifications@github.com wrote:

Code example from previous comment (by @ebredy https://github.com/ebredy ):

Local

Remote

``` — Reply to this email directly or view it on GitHubhttps://github.com/muaz-khan/WebRTC-Experiment/issues/20#issuecomment-17376765 .
muaz-khan commented 11 years ago

Here is a working one-to-one video chatting demo using same code (i.e. socket.io over pubnub for signaling). Source code | Demo

Here is another demo using same code however using socket.io over node.js for signaling. Source code

ebredy commented 11 years ago

nope still doesn't work for me. I can start the session from one laptop. when I send the link to the other laptop I can't view the first session as remote. I don't seem to have a problem with https://apprtc.appspot.com/ . what are they doing that is different from you?

On Fri, May 3, 2013 at 2:35 AM, Muaz Khan notifications@github.com wrote:

Here is a working one-to-one video chatting demo using same code (i.e. socket.io over pubnub for signaling). Source codehttps://github.com/muaz-khan/WebRTC-Experiment/tree/master/socket.io| Demo https://webrtc-experiment.appspot.com/socket.io/

— Reply to this email directly or view it on GitHubhttps://github.com/muaz-khan/WebRTC-Experiment/issues/20#issuecomment-17380383 .

muaz-khan commented 11 years ago

Can you test experiments from this page? http://webrtc-signaling.jit.su/

  1. http://webrtc-signaling.jit.su/video-conferencing/index.html
  2. http://webrtc-signaling.jit.su/webrtc-broadcasting/index.html

Can you print out chrome://webrtc-internals logs?

If I better understood your point; you're using a single (wireless) modem; two notebooks are connected that are manufactured by same company e.g. TOSHIBA, DELL, HP, etc. ?

I tested all experiments over two different notebooks; one is manufactured by TOSHIBA and other is by DELL. Both notebooks are using same/single ADSL/LandLine modem; and it works.