在Angular 4中间歇性地OpenTok / Tokbox多份同一订阅者
我间歇性地看到同一用户的多个副本，但不是发布者，并且不能解决为什么......或者令人讨厌的是，如何重现问题。
我有一个Laravel 5.4 API使用https://github.com/tomcorbett/opentok-laravel生成会话和令牌，这似乎工作正常（使用手动/静态会话和令牌时也有相同的问题）。 Angular 4客户端代码如下 - 请注意，我已经插入了一些额外的代码，以防止对同一用户/多个出版物进行多次订阅（尽管没有起诉任何后者的任何证据），但似乎没有工作 - 任何关于如何防止多次订阅感激地收到同一用户的想法。
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 {
}
}
);
}
});
上一篇: OpenTok/Tokbox multiple copies of same subscriber intermittently in Angular 4