Tokbox: Video position is getting displaced when one of the users refreshes page

Question

With my code I was able to setup a video conference between 2 users. Problem is: If one user refreshes the page, the other user is getting the video at the bottom of the page instead of in the div allocated for subscribed video. The reason for this is when one user refreshes the page, only the streamcreated event gets called for the 2nd user and at that time the div is coming as null. I have the following code in page load:

       var session = OT.initSession(apiKey, sessionId)
            .connect(token, function(error) {

                var publisher = OT.initPublisher('divPublish');
                session.publish(publisher);
                console.log("Publishing to session1");
            });


                var session2 = OT.initSession(apiKey, sessionId2);
                session2.connect(token2, function(error) {
                    if (error) {
                        console.log("Error connecting: ", error.name, error.message);
                    } else {
                        console.log("Connected to the session2.");
                    }
                });

                session2.on("streamCreated", function(event) {
                    divSubscribe = document.getElementById('divSubscribe'); // This is coming null
                    session2.subscribe(event.stream, 'divSubscribe');
                    console.log("Subscribing to session2");
                });

score 0 · Answer 1 · answered Mar 27 '17 at 03:53

By default Subscribers and Publishers will replace the element you specify. I think what you want is to insert the subscribers into the "divSubscribe" instead of replacing it. You can do that by setting the insertMode property on the subscribe method to 'append' like so:

session2.subscribe(event.stream, 'divSubscribe', {insertMode: 'append'});

Tokbox: Video position is getting displaced when one of the users refreshes page

1 Answers1