OpenTok/Tokbox multiple copies of same subscriber intermittently in Angular 4
I'm intermittently seeing multiple copies of the same subscriber intermittently, but not the publisher and can't work out why...or, annoyingly, how to reproduce the problem.
I have an Laravel 5.4 api using https://github.com/tomcorbett/opentok-laravel to generate session and token, which seems to work fine (has same problem when using manual/static session and token). The Angular 4 client code is below - note that I have inserted some extra code to try to prevent multiple subscriptions to the same user/multiple publications (although not sue there's any evidence of the latter) but doesn't seem to be working - any thoughts on how to prevent multiple subscriptions to the same user gratefully received.
setupOpentok() {
let sessionId: string = this.club.opentok_session_id;
//TODO - change rather inelegant way of getting token
let token: string = this.user.pivot.opentok_token;
this.openTokSession = OT.initSession(myGlobals.opentokApiKey, sessionId);
this.openTokSession.on('streamCreated', (event: any) => {
//Added code to only add stream to appropriate div if this user not already subscribed to
let alreadySubscribed: boolean = false;
for (let userId of this.subscribers) {
if (userId === event.stream.connection.data) {
alreadySubscribed = true;
break; //we have our token so leave loop
}
}
if(!alreadySubscribed) {
var subscriberProperties = {
insertMode: 'append',
width: '100%',
height: '100%'
};
//create a child of vidFeeds with unique id using userId from token
var subscriberDiv = document.createElement('div');
subscriberDiv.id = 'subscriberDiv_' + event.stream.connection.data;
var vidFeedsDiv = document.getElementById('vidFeeds');
vidFeedsDiv.appendChild(subscriberDiv);
var subscriber = this.openTokSession.subscribe(event.stream,
subscriberDiv.id,
subscriberProperties,
(error: any) => {
if (error) {
console.log(error);
} else {
this.subscribers.push(Number(event.stream.connection.data));
}
}
);
subscriber.element.style.display = 'inline-block';
}
});
this.openTokSession.on("sessionDisconnected", (event:any) => {
if(typeof(event.stream) !== 'undefined') {
console.log("Stream disconnected - " + event.stream.connection.data);
let counter: number = 0;
let disconnectedId: number;
for (let userId of this.subscribers) {
if (userId === event.stream.connection.data) {
disconnectedId = counter;
break;
}
counter++;
}
this.subscribers.splice(counter, 1); //clearing reference so we can reload when it reconnects
}
});
this.openTokSession.on("streamDestroyed", (event:any) => {
if(typeof(event.stream) !== 'undefined') {
console.log("Stream destroyed - " + event.stream.connection.data);
let counter: number = 0;
let disconnectedId: number;
for (let userId of this.subscribers) {
if (userId === event.stream.connection.data) {
disconnectedId = counter;
break;
}
counter++;
}
this.subscribers.splice(counter, 1); //clearing reference so we can reload when it reconnects
}
});
let nickNameToShow = this.auth.userProfile.nickname;
this.openTokSession.connect(token, (error: any) => {
if(!this.publisher){ //trying to prevent multiple copies of video streams - there should only be one publisher per session
//create a child of vidFeeds with unique id using userId from token
var publisherDiv = document.createElement('div');
publisherDiv.id = 'publisherDiv';
var vidFeedsDiv = document.getElementById('vidFeeds');
vidFeedsDiv.appendChild(publisherDiv);
this.publisher = OT.initPublisher(publisherDiv.id, {
name: nickNameToShow,
insertMode: 'append',
width: '100%',
height: '100%'
}
);
//that.getUserDataForVideo(that.auth.userProfile.id, false); //it's a publisher
this.publisher.element.style.display = 'inline-block';
this.openTokSession.publish(this.publisher);
}
});
}
对不起，浪费任何人的时间，但我认为我会发布最终解决这个问题的方法，以最终解决同一用户的多个副本：
this.openTokSession.on('streamCreated', (event: any) => {
//only add stream to appropriate div if this user not already subscribed to
let alreadySubscribed: boolean = false;
//before reconnecting check whether there's already a subscriber with same connection Id
var subscribers = this.openTokSession.getSubscribersForStream(event.stream);
for (let subscriber of subscribers) {
if(subscriber.stream.connection.connectionId === event.stream.connection.connectionId){
alreadySubscribed=true;
}
}
if(!alreadySubscribed) {
var subscriberProperties = {
insertMode: 'append',
width: '100%',
height: '100%'
};
//create a child of vidFeeds with unique id using userId from token
var subscriberDiv = document.createElement('div');
subscriberDiv.id = 'subscriberDiv_' + event.stream.connection.data;
var vidFeedsDiv = document.getElementById('vidFeeds');
vidFeedsDiv.appendChild(subscriberDiv);
var subscriber = this.openTokSession.subscribe(event.stream,
subscriberDiv.id,
subscriberProperties,
(error: any) => {
if (error) {
console.log(error);
} else {
}
}
);
}
});