Troubles with OpenTok 1:1 conversations

I am trying to do a 1:1 opentok converation across browsers.

There's two roles:
one publisher that invites and one invitee. The aim is to have these two have a 1:1 conversation.

The session is correctly being made and the invitee connects to the stream. The invitee receives the videostream of the publisher and adds it to its container. he then starts publishing to the same session.
So the invitee now has both videos visible.(yay)...

However, the publisher only gets to see his own video. I am not at all able to detect the invitee's published stream.

Heres the publishers function:

function startVideoHost(sessionId, apiKey, token) {
    var replacementElementId = "localVideo";
   if (OT.checkSystemRequirements() == 1) {
    publisher = OT.initPublisher(replacementElementId);
    publisher.on({
        streamCreated: function (event) {
            $('.videoWindow').show();
            console.log("Publisher started streaming.");
        },
        streamDestroyed: function (event) {
            console.log("Publisher stopped streaming. Reason: "
               + event.reason);
        }
    });

// this is kinda where id hope the publisher would detect the guest stream

     session = OT.initSession(apiKey, sessionId);
    session.on("streamCreated", function(event) {
    session.subscribe(event.stream, remoteVideos);
  });
    session.connect(token, function (error) {
        if (session.capabilities.publish == 1) {
            session.publish(publisher);
        } else {
            console.log("You cannot publish an audio-video stream.");
        }
    });
} else {
    console.log("The client does not support WebRTC.");
}
}

And heres the invitees function:

function startVideoGuest(sessionId, apiKey, token) {
    if (OT.checkSystemRequirements() == 1) {
    var session = OT.initSession(apiKey, sessionId);
    session.on("streamCreated", function(event) {
    session.subscribe(event.stream, remoteVideos);
  });
  session.connect(token, function(error) {
    if (error) {
      console.log("Error connecting: ", error.code, error.message);
    } else {
        $('.videoWindow').show();
        var replacementElementId = "localVideo";
        publisher = OT.initPublisher(replacementElementId);
        publisher.on({
            streamCreated: function (event) {
            console.log("Publisher started streaming.");
        },
        streamDestroyed: function (event) {
            console.log("Publisher stopped streaming. Reason: "
               + event.reason);
        }
    });
        console.log("Connected to the session.");
    }
  });
}

}

Does anyone have any idea why im not getting the invitees videostream back to the publisher?

Solution

One issue I can see is that the 'invitee' calls OT.initPublisher() which triggers the invitees webcam to start recording video and displaying that stream in the invitee's DOM, but the invitee never actually publishes that webcam to the session. That is why the invitee can see the video in their browser, but the 'host' never sees that video in the session.

One solution is to call session.publish(publisher) inside the session.connect callback, of your function startVideoGuest. I have amended your code below:

//.....
streamDestroyed: function (event) {
        console.log("Publisher stopped streaming. Reason: "
           + event.reason);
    }
});
    console.log("Connected to the session.");
    //I have added the line below
    session.publish(publisher);
//......

One clarification: any time a client in a session sends video and/or audio, they are a publisher. As it seems you require your 'invitee' to send video to the 'host', the 'invitee' is also a publisher, and must call session.publish. Clients can be both publishers and subscribers at the same time. They are optional attributes, not exclusive roles.