Differentiate Initiator & Participants in Opentok - angularjs

Question

I am using Node + Angular to create Multiple Video Chat. Creating sessions and tokens on server side and use them to connect with others in client side. I have defined the userType while generating Token. Now, what I want is that only 'organizers' will be able to initiate the video and 'users' can only subscribe to the video. I am able to differentiate it on the level of subscribers, but not in publishers.
Here : streamCreated() is working well but sessionConnected() is not working as I am not able to put it into subContainer
var publisher = OT.initPublisher('publisher',{name:'MyGroup'});
// Attach event handlers
session.on({
// This function runs when session.connect() asynchronously completes
sessionConnected: function(event) {
// Publish the publisher we initialzed earlier (this will trigger 'streamCreated' on other
// clients)
if(JSON.parse(session.connection.data).userType === 'organizer'){
var subContainer = document.createElement('div');
document.getElementById('initiator-container').appendChild(subContainer);
}else{
var subContainer = document.createElement('div');document.getElementById('publisher').appendChild(subContainer);
}
session.publish(publisher,subContainer);
},
// This function runs when another client publishes a stream (eg. session.publish())
streamCreated: function(event) {
// Create a container for a new Subscriber, assign it an id using the streamId, put it inside
if(JSON.parse(event.stream.connection.data).userType == 'organizer'){
// set it as initiator
// initiator-container
var subContainer = document.createElement('div');
subContainer.id = 'stream-' + event.stream.streamId;
document.getElementById('initiator-container').appendChild(subContainer);
var subscriberProperties = {height: 486,width:'100%'};
// Subscribe to the stream that caused this event, put it inside the container we just made
session.subscribe(event.stream, subContainer,subscriberProperties);
}else{
// participants
var subContainer = document.createElement('div');
subContainer.id = 'stream-' + event.stream.streamId;
document.getElementById('subscribers').appendChild(subContainer);
// Subscribe to the stream that caused this event, put it inside the container we just made
session.subscribe(event.stream, subContainer);
}
},
streamDestroyed: function(event){
console.log("Stream " + event.stream.name + " ended. " + event.reason);
},
// stream property changed
streamPropertyChanged: function(event){
console.log(event)
}
});
// Connect to the Session using the 'apiKey' of the application and a 'token' for permission
session.connect(token);
Anyone with possible solution?

Answer 1

I'm not sure exactly what you're trying to do but it seems like you want to put the Publishers and Subscribers in different containers depending on what the userType is in the connection data.
The issue is doing this in the session.publish call but it's actually the initPublisher call that is inserting the publisher. I think you want to wait and create your Publisher after you are connected so that you know what type of user you are. So move the initPublisher call into sessionConnected like this:
session.on('streamCreated', function(event) {
var elementId = JSON.parse(session.connection.data).userType === 'organizer' ? 'publisher' : 'initiator-container';
var publisher = OT.initPublisher(elementId, {insertMode: 'append'});
session.publish(publisher);
});
Also insertMode is your friend. It will make inserting these elements a bit easier.