@reactoo/watchtogether-sdk-js 2.5.19 → 2.5.22

package/src/modules/wt-room.js

@@ -5,7 +5,7 @@ import emitter from './wt-emitter';
 import {generateUUID} from "./wt-utils";
 
 class Room {
-	
+
 	constructor(debug) {
 		this.debug = debug;
 		this.sessions = [];
@@ -22,16 +22,16 @@ class Room {
 		// Let's get it started
 		this.whenInitialized = this.initialize();
 	}
-	
+
 	initialize() {
 		return this.safariVp8TestPromise
 			.then(() => this);
 	}
-	
+
 	createSession(constructId = null, type = 'reactooroom', options = {}) {
 		return new RoomSession(constructId, type, {debug: this.debug, ...options});
 	}
-	
+
 	static testSafariVp8() {
 		return new Promise(resolve => {
 			if (adapter.browserDetails.browser === 'safari' &&
@@ -61,7 +61,7 @@ class Room {
 			} else resolve(false);
 		});
 	}
-	
+
 	static isWebrtcSupported() {
 		return window.RTCPeerConnection !== undefined && window.RTCPeerConnection !== null &&
 			navigator.mediaDevices !== undefined && navigator.mediaDevices !== null &&
@@ -70,9 +70,9 @@ class Room {
 }
 
 class RoomSession {
-	
+
 	static noop() {
-	
+
 	}
 
 	static randomString(len) {
@@ -84,11 +84,11 @@ class RoomSession {
 		}
 		return randomString;
 	}
-	
+
 	//TODO: solve
 	// #eventList = ['error', 'kicked', 'addLocalParticipant', ,'addRemoteInstructor','addRemoteParticipant','addRemoteTalkback', 'addRemoteObserver', 'removeRemoteInstructor', 'removeLocalParticipant', 'removeRemoteParticipant', 'removeRemoteTalkback', 'removeRemoteObserver', 'localMuted', 'localHasVideo', 'localHasAudio', 'data', 'iceState', 'connectionState', 'joined', 'joining', 'dataChannel', 'disconnect', 'observerIds', 'talkbackIds', 'instructorId', 'published', 'publishing', 'remoteTrackMuted', 'streamingStatus', 'streaming', 'streamStarting'];
 	//
-	
+
 	static sessionTypes =  {
 		'reactooroom': 'janus.plugin.reactooroom',
 		'streaming': 'janus.plugin.streaming'
@@ -116,11 +116,11 @@ class RoomSession {
 			videoWall: [],
 		},
 	};
-	
+
 	constructor(constructId = null, type = 'reactooroom', options = {}) {
 
 		Object.assign(this, emitter());
-
+		this.defaultDataChannelLabel = 'JanusDataChannel'
 		this.server = null;
 		this.iceServers = null;
 		this.token = null;
@@ -147,7 +147,7 @@ class RoomSession {
 		// double click prevention
 		this.connectingPromise = null;
 		this.disconnectingPromise = null;
-		
+
 		this._ipv6Support = false;
 		this._retries = 0;
 		this._maxRetries = 3;
@@ -177,7 +177,7 @@ class RoomSession {
 		}
 
 	}
-	
+
 	// Check if this browser supports Unified Plan and transceivers
 	// Based on https://codepen.io/anon/pen/ZqLwWV?editors=0010
 	static checkUnifiedPlan() {
@@ -288,7 +288,7 @@ class RoomSession {
 		}
 		return eventName
 	}
-	
+
 	sendMessage(handleId, message = {body: 'Example Body'}, dontWait = false, dontResolveOnAck = false) {
 		return this._send({
 			"janus": "message",
@@ -311,7 +311,7 @@ class RoomSession {
 				}
 			})
 	}
-	
+
 	_send(request = {}, ignoreResponse = false, dontResolveOnAck = false) {
 		let transaction = RoomSession.randomString(12);
 		let requestData = {
@@ -320,7 +320,7 @@ class RoomSession {
 			token: this.token, ...((this.sessionId && {'session_id': this.sessionId}) || {})
 		};
 		let timeouId = null;
-		
+
 		return new Promise((resolve, reject) => {
 			let parseResponse = (event) => {
 				let json = JSON.parse(event.data);
@@ -338,13 +338,13 @@ class RoomSession {
 					}
 				}
 			};
-			
+
 			if (ignoreResponse) {
 				if (this.ws && this.ws.readyState === 1) {
 					this.ws.send(JSON.stringify(requestData));
 				}
 				resolve();
-				
+
 			} else {
 				if (this.ws && this.ws.readyState === 1) {
 					this.ws.addEventListener('message', parseResponse);
@@ -359,12 +359,12 @@ class RoomSession {
 			}
 		})
 	}
-	
+
 	_connectionClosed() {
 		if (this.disconnectingPromise || this.connectingPromise) {
 			return;
 		}
-		
+
 		if (this._retries < this._maxRetries) {
 			setTimeout(() => {
 				this._retries++;
@@ -378,18 +378,18 @@ class RoomSession {
 			} else if (this.sessiontype === 'streaming') {
 				this.stopStream();
 			}
-			
+
 			this.emit('error', {type: 'error', id: 4, message: 'Lost connection to WebSockets', data: null});
 		}
 	}
-	
+
 	_wipeListeners() {
 		if (this.ws) {
 			this.ws.removeEventListener('close', this.__connectionClosedBoundFn);
 			this.ws.removeEventListener('message', this.__handleWsEventsBoundFn);
 		}
 	}
-	
+
 	_startKeepAlive() {
 		this._send({"janus": "keepalive"})
 			.then(json => {
@@ -406,27 +406,27 @@ class RoomSession {
 				this.emit('error', {type: 'warning', id: 6, message: 'keepalive dead', data: e});
 				this._connectionClosed();
 			});
-		
+
 		this._keepAliveId = setTimeout(() => {
 			this._startKeepAlive();
 		}, 30000);
 	}
-	
+
 	_stopKeepAlive() {
 		clearTimeout(this._keepAliveId);
 	}
 
 	_handleWsEvents(event) {
-		
+
 		let json = JSON.parse(event.data);
 		var sender = json["sender"];
 		var type = json["janus"];
-		
+
 		let handle = this._getHandle(sender);
 		if (!handle) {
 			return;
 		}
-		
+
 		if (type === "trickle") {
 			let candidate = json["candidate"];
 			let config = handle.webrtcStuff;
@@ -451,9 +451,9 @@ class RoomSession {
 			this._log('detached on', handle.handleId);
 			this._removeParticipant(handle.handleId, null, true);
 		} else if (type === "media") {
-			this._log('Media event:', handle.handleId, json["type"], json["receiving"]);
+			this._log('Media event:', handle.handleId, json["type"], json["receiving"], json["mid"]);
 		} else if (type === "slowlink") {
-			this._log('Slowlink', handle.handleId, json["uplink"], json["nacks"]);
+			this._log('Slowlink', handle.handleId, json["uplink"], json["lost"], json["mid"]);
 		} else if (type === "event") {
 			//none universal
 		} else if (type === 'timeout') {
@@ -463,16 +463,16 @@ class RoomSession {
 		} else {
 			this._log(`Unknown event: ${type} on session: ${this.sessionId}`);
 		}
-		
-		
+
+
 		// LOCAL
-		
+
 		if (sender === this.handleId) {
 			if (type === "event") {
 				var plugindata = json["plugindata"] || {};
 				var msg = plugindata["data"] || {};
 				var jsep = json["jsep"];
-				
+
 				let result = msg["result"] || null;
 				let event = msg["videoroom"] || null;
 				let list = msg["publishers"] || {};
@@ -480,7 +480,7 @@ class RoomSession {
 				//let joining = msg["joining"];
 				let unpublished = msg["unpublished"];
 				let error = msg["error"];
-				
+
 				if (event === "joined") {
 					this.id = msg["id"];
 					this.privateId = msg["private_id"];
@@ -517,11 +517,11 @@ class RoomSession {
 						}
 					}
 				} else if (event === "event") {
-					
+
 					if (msg["streams"] !== undefined && msg["streams"] !== null) {
 						this._log('Got my own streams back', msg["streams"]);
 					}
-					
+
 					for (let f in list) {
 						let userId = list[f]["display"];
 						let streams = list[f]["streams"] || [];
@@ -551,7 +551,7 @@ class RoomSession {
 								})
 						}
 					}
-					
+
 					if (leaving === 'ok') {
 						this._log('leaving', this.handleId, 'this is us');
 						this._removeParticipant(this.handleId);
@@ -564,7 +564,7 @@ class RoomSession {
 						this._log('leaving', leaving);
 						this._removeParticipant(null, leaving);
 					}
-					
+
 					if (unpublished === 'ok') {
 						this._log('unpublished', this.handleId, 'this is us');
 						this._removeParticipant(this.handleId, null, false); // we do just hangup
@@ -572,7 +572,7 @@ class RoomSession {
 						this._log('unpublished', unpublished);
 						this._removeParticipant(null, unpublished, true); // we do hangup and detach
 					}
-					
+
 					if (error) {
 						this.emit('error', {
 							type: 'error',
@@ -582,7 +582,7 @@ class RoomSession {
 						});
 					}
 				}
-				
+
 				// Streaming related
 				else if (result && result["status"]) {
 					this.emit('streamingStatus', result["status"]);
@@ -594,9 +594,9 @@ class RoomSession {
 						this._isStreaming = true;
 					}
 				}
-				
+
 				if (jsep !== undefined && jsep !== null) {
-					
+
 					if (this.sessiontype === 'reactooroom') {
 						this._webrtcPeer(this.handleId, jsep)
 							.catch(err => {
@@ -608,7 +608,7 @@ class RoomSession {
 								this.emit('error', err);
 							});
 					}
-					
+
 				}
 			} else if (type === "webrtcup") {
 				this._log('Configuring bitrate: ' + this.initialBitrate);
@@ -622,17 +622,17 @@ class RoomSession {
 				}
 			}
 		}
-		
+
 		//REMOTE
-		
+
 		else {
-			
+
 			let plugindata = json["plugindata"] || {};
 			let msg = plugindata["data"] || {};
 			let jsep = json["jsep"];
 			let event = msg["videoroom"];
 			let error = msg["error"];
-			
+
 			if (event === "attached") {
 				this._log('Remote have successfully joined Room', msg);
 				this.emit(this._getAddParticipantEventName(handle.handleId), {
@@ -648,11 +648,11 @@ class RoomSession {
 					hasVideoTrack: false
 				});
 			}
-			
+
 			if (error) {
 				this.emit('error', {type: 'warning', id: 8, message: 'remote participant error', data: [sender, msg]});
 			}
-			
+
 			if (jsep) {
 				this._publishRemote(handle.handleId, jsep)
 					.catch(err => {
@@ -661,24 +661,24 @@ class RoomSession {
 			}
 		}
 	}
-	
+
 	_handleDataEvents(handleId, type, data) {
-		
+
 		let handle = this._getHandle(handleId);
-		
+
 		if (type === 'state') {
-			this._log(` - Data channel status - `, `UID: ${handleId}`, `STATUS: ${data}`, `ME: ${handleId === this.handleId}`)
+			this._log(` - Data channel status - `, `UID: ${handleId}`, `STATUS: ${JSON.stringify(data)}`, `ME: ${handleId === this.handleId}`)
 			if (handle) {
 				let config = handle.webrtcStuff;
-				config.dataChannelOpen = data === 'open';
+				config.dataChannelOpen = this.defaultDataChannelLabel === data?.label && data?.state === 'open';
 			}
-			
+
 			if (handleId === this.handleId) {
-				this._isDataChannelOpen = data === 'open';
-				this.emit('dataChannel', data === 'open');
+				this._isDataChannelOpen = this.defaultDataChannelLabel === data?.label && data?.state === 'open';
+				this.emit('dataChannel', this.defaultDataChannelLabel === data?.label && data?.state === 'open');
 			}
 		}
-		
+
 		if (type === 'error') {
 
 			this.emit('error', {
@@ -687,21 +687,23 @@ class RoomSession {
 				message: 'data event warning',
 				data: [handleId, data]
 			});
-			
+
 			if (handle) {
 				let config = handle.webrtcStuff;
-				config.dataChannelOpen = false;
+				if(this.defaultDataChannelLabel === data.label) {
+					config.dataChannelOpen = false;
+				}
 			}
-			if (handleId === this.handleId) {
+			if (handleId === this.handleId && this.defaultDataChannelLabel === data.label) {
 				this._isDataChannelOpen = false;
 				this.emit('dataChannel', false);
 			}
 		}
-		
+
 		if (handleId === this.handleId && type === 'message') {
-			
+
 			let d = null;
-			
+
 			try {
 				d = JSON.parse(data)
 			} catch (e) {
@@ -710,19 +712,19 @@ class RoomSession {
 			}
 			this.emit('data', d);
 		}
-		
+
 	}
-	
+
 	//removeHandle === true -> hangup, detach, removeHandle === false -> hangup
 	_removeParticipant(handleId, rfid, removeHandle = true) {
 		let handle = this._getHandle(handleId, rfid);
-		
+
 		if (!handle) {
 			return Promise.resolve();
 		} else {
 			handleId = handle.handleId;
 		}
-		
+
 		return this._send({"janus": "hangup", "handle_id": handleId,}, true)
 			.then(() => (removeHandle ? this._send({
 				"janus": "detach",
@@ -738,10 +740,12 @@ class RoomSession {
 				}
 				handle.webrtcStuff.stream = null;
 				if (handle.webrtcStuff.dataChannel) {
-					handle.webrtcStuff.dataChannel.onmessage = null;
-					handle.webrtcStuff.dataChannel.onopen = null;
-					handle.webrtcStuff.dataChannel.onclose = null;
-					handle.webrtcStuff.dataChannel.onerror = null;
+					Object.keys(handle.webrtcStuff.dataChannel).forEach(label => {
+						handle.webrtcStuff.dataChannel[label].onmessage = null;
+						handle.webrtcStuff.dataChannel[label].onopen = null;
+						handle.webrtcStuff.dataChannel[label].onclose = null;
+						handle.webrtcStuff.dataChannel[label].onerror = null;
+					})
 				}
 				if (handle.webrtcStuff.pc) {
 					handle.webrtcStuff.pc.onicecandidate = null;
@@ -766,7 +770,7 @@ class RoomSession {
 					trickle: true,
 					iceDone: false,
 				};
-				
+
 				if (handleId === this.handleId) {
 					this._isDataChannelOpen = false;
 					this._isPublished = false;
@@ -780,12 +784,12 @@ class RoomSession {
 					let handleIndex = this._participants.findIndex(p => p.handleId === handleId);
 					this._participants.splice(handleIndex, 1);
 				}
-				
+
 				return true;
 			});
-		
+
 	}
-	
+
 	_createParticipant(userId = null, rfid = null) {
 		return this._send({
 			"janus": "attach",
@@ -812,7 +816,7 @@ class RoomSession {
 			return handle;
 		})
 	}
-	
+
 	_joinRoom(roomId, pin, userId) {
 		return this.sendMessage(this.handleId, {
 			body: {
@@ -820,7 +824,7 @@ class RoomSession {
 			}
 		}, false, true)
 	}
-	
+
 	_watchStream(id) {
 		return this.sendMessage(this.handleId, {
 			body: {
@@ -828,7 +832,7 @@ class RoomSession {
 			}
 		}, false, true)
 	}
-	
+
 	_leaveRoom(dontWait = false) {
 		return this._hasJoined
 			? this.sendMessage(this.handleId, {body: {"request": "leave"}}, dontWait)
@@ -838,15 +842,15 @@ class RoomSession {
 				})
 			: Promise.resolve();
 	}
-	
+
 	// internal reconnect
-	
+
 	_reconnect() {
-		
+
 		if (this.connectingPromise) {
 			return this.connectingPromise;
 		}
-		
+
 		if (this.ws) {
 			this._wipeListeners();
 			if (this.ws.readyState === 1) {
@@ -877,7 +881,7 @@ class RoomSession {
 						reject({type: 'error', id: 11, message: 'reconnection error', data: error})
 					});
 			};
-			
+
 			// this is called before 'close' event callback so it doesn't break reconnect loop
 			this.ws.onerror = (e) => {
 				this.connectingPromise = null;
@@ -887,13 +891,13 @@ class RoomSession {
 		});
 		return this.connectingPromise;
 	}
-	
+
 	connect(roomId, pin, server, iceServers, token, userId, webrtcVersion = 0, initialBitrate = 0, isMonitor, recordingFilename) {
-		
+
 		if (this.connectingPromise) {
 			return this.connectingPromise;
 		}
-		
+
 		this.emit('joined', false);
 		if (this.ws) {
 			this._wipeListeners();
@@ -951,12 +955,12 @@ class RoomSession {
 		});
 		return this.connectingPromise;
 	}
-	
+
 	disconnect() {
 		if (this.disconnectingPromise) {
 			return this.disconnectingPromise;
 		}
-		
+
 		this._stopKeepAlive();
 		this.disconnectingPromise = Promise.all(this._participants.map(p => this._removeParticipant(p.handleId)))
 			.finally(() => {
@@ -976,13 +980,13 @@ class RoomSession {
 			})
 		return this.disconnectingPromise;
 	}
-	
+
 	startStream(streamId, server, iceServers, token, userId) {
-		
+
 		if (this.connectingPromise) {
 			return this.connectingPromise
 		}
-		
+
 		this.emit('streaming', false);
 		if (this.ws) {
 			this._wipeListeners();
@@ -995,7 +999,7 @@ class RoomSession {
 		this.token = token;
 		this.streamId = streamId;
 		this.userId = userId;
-		
+
 		this.connectingPromise = new Promise((resolve, reject) => {
 			this.emit('streamStarting', true);
 			this.ws = new WebSocket(this.server, 'janus-protocol');
@@ -1036,7 +1040,7 @@ class RoomSession {
 		});
 		return this.connectingPromise;
 	}
-	
+
 	stopStream() {
 		if (this.disconnectingPromise) {
 			return this.disconnectingPromise;
@@ -1062,13 +1066,13 @@ class RoomSession {
 				this.disconnectingPromise = null;
 				return Promise.resolve('Disconnected');
 			});
-		
+
 		return this.disconnectingPromise;
 	}
-	
-	
+
+
 	destroy() {
-		
+
 		if (this.sessiontype === 'reactooroom') {
 			return this.disconnect()
 				.then(() => {
@@ -1083,7 +1087,7 @@ class RoomSession {
 				})
 		}
 	}
-	
+
 	_enableDebug() {
 		this._log = console.log.bind(console);
 	}
@@ -1091,7 +1095,7 @@ class RoomSession {
 	_getHandle(handleId, rfid = null) {
 		return this._participants.find(p => p.handleId === handleId || (rfid && p.rfid === rfid));
 	}
-	
+
 	_getStats(type = null) {
 		return Promise.all(this._participants.map(participant => {
 			let mediaTrack = null;
@@ -1105,7 +1109,7 @@ class RoomSession {
 				.catch(e => Promise.resolve({handle: participant, stats: e}))
 		}))
 	}
-	
+
 	_sendTrickleCandidate(handleId, candidate) {
 		return this._send({
 			"janus": "trickle",
@@ -1113,9 +1117,9 @@ class RoomSession {
 			"handle_id": handleId
 		})
 	}
-	
+
 	_webrtc(handleId, enableOntrack = false) {
-		
+
 		let handle = this._getHandle(handleId);
 		if (!handle) {
 			this.emit('error', {
@@ -1125,13 +1129,13 @@ class RoomSession {
 				data: [handleId, 'create rtc connection']
 			});
 		}
-		
+
 		let config = handle.webrtcStuff;
 		if (!config.pc) {
 			let pc_config = {"iceServers": this.iceServers, "iceTransportPolicy": 'all', "bundlePolicy": undefined};
-			
+
 			pc_config["sdpSemantics"] = this.isUnifiedPlan ? "unified-plan" : "plan-b";
-			
+
 			let pc_constraints = {
 				"optional": [{"DtlsSrtpKeyAgreement": true}]
 			};
@@ -1142,9 +1146,9 @@ class RoomSession {
 				// This is Edge, enable BUNDLE explicitly
 				pc_config.bundlePolicy = "max-bundle";
 			}
-			
+
 			this._log('new RTCPeerConnection', pc_config, pc_constraints);
-			
+
 			config.pc = new RTCPeerConnection(pc_config, pc_constraints);
 			config.pc.onconnectionstatechange = () => {
 				if (config.pc.connectionState === 'failed') {
@@ -1157,10 +1161,11 @@ class RoomSession {
 						id: handle.handleId,
 						userId: handle.userId,
 						stream: config.stream,
+						track: null,
 						optional: true,
 						constructId: this.constructId,
 						metaData: this.options.metaData,
-						adding: true,
+						adding: false,
 						hasAudioTrack: !!(config.stream && config.stream.getAudioTracks().length),
 						hasVideoTrack: !!(config.stream && config.stream.getVideoTracks().length)
 					})
@@ -1177,10 +1182,11 @@ class RoomSession {
 						id: handle.handleId,
 						userId: handle.userId,
 						stream: config.stream,
+						track: null,
 						optional: true,
 						constructId: this.constructId,
 						metaData: this.options.metaData,
-						adding: true,
+						adding: false,
 						hasAudioTrack: !!(config.stream && config.stream.getAudioTracks().length),
 						hasVideoTrack: !!(config.stream && config.stream.getVideoTracks().length)
 					})
@@ -1201,30 +1207,31 @@ class RoomSession {
 						"sdpMid": event.candidate.sdpMid,
 						"sdpMLineIndex": event.candidate.sdpMLineIndex
 					};
-					
+
 					this._sendTrickleCandidate(handleId, candidate)
 						.catch(e => {
 							this.emit('error', e);
 						});
 				}
 			};
-			
+
 			if (enableOntrack) {
 				config.pc.ontrack = (event) => {
-					
-					// if(!event.streams)
-					//     return;
-					
+
+					if(!event.streams)
+						return;
+
 					//config.stream = event.streams[0];
-					
+
 					if (!config.stream) {
 						config.stream = new MediaStream();
 					}
-					
 					if (event.track) {
+						let mid = event.transceiver ? event.transceiver.mid : event.track.id;
 						config.stream.addTrack(event.track);
 						this.emit(this._getAddParticipantEventName(handle.handleId), {
 							tid: generateUUID(),
+							mid,
 							id: handle.handleId,
 							userId: handle.userId,
 							stream: config.stream,
@@ -1235,32 +1242,51 @@ class RoomSession {
 							hasAudioTrack: !!(config.stream && config.stream.getAudioTracks().length),
 							hasVideoTrack: !!(config.stream && config.stream.getVideoTracks().length)
 						});
-						
+
 						if (event.track.onended)
 							return;
-						
+
 						event.track.onended = (ev) => {
+
+							let mid = ev.target.id;
+							if(this.isUnifiedPlan) {
+								let transceiver = config.pc.getTransceivers().find(
+									t => t.receiver.track === ev.target);
+								mid = transceiver.mid;
+							}
+
 							if (config.stream) {
 								config.stream && config.stream.removeTrack(ev.target);
 								this.emit(this._getAddParticipantEventName(handle.handleId), {
 									tid: generateUUID(),
 									id: handle.handleId,
+									mid,
 									userId: handle.userId,
 									stream: config.stream,
 									track: ev.target,
 									constructId: this.constructId,
 									metaData: this.options.metaData,
 									adding: false,
+									removing: true,
 									hasAudioTrack: !!(config.stream && config.stream.getAudioTracks().length),
 									hasVideoTrack: !!(config.stream && config.stream.getVideoTracks().length)
 								});
 							}
 						};
-						
+
 						event.track.onmute = (ev) => {
 							this._log('remoteTrackMuted', 'onmute');
+
+							let mid = ev.target.id;
+							if(this.isUnifiedPlan) {
+								let transceiver = config.pc.getTransceivers().find(
+									t => t.receiver.track === ev.target);
+								mid = transceiver.mid;
+							}
+
 							this.emit('remoteTrackMuted', {
 								id: handle.handleId,
+								mid,
 								userId: handle.userId,
 								stream: config.stream,
 								kind: ev.target.kind,
@@ -1268,11 +1294,20 @@ class RoomSession {
 								muted: true
 							});
 						};
-						
+
 						event.track.onunmute = (ev) => {
 							this._log('remoteTrackMuted', 'onunmute');
+
+							let mid = ev.target.id;
+							if(this.isUnifiedPlan) {
+								let transceiver = config.pc.getTransceivers().find(
+									t => t.receiver.track === ev.target);
+								mid = transceiver.mid;
+							}
+
 							this.emit('remoteTrackMuted', {
 								id: handle.handleId,
+								mid,
 								userId: handle.userId,
 								stream: config.stream,
 								kind: ev.target.kind,
@@ -1280,55 +1315,71 @@ class RoomSession {
 								muted: false
 							});
 						};
-						
+
 					}
-					
+
 				};
 			}
 		}
-		
-		let defaultDataChannelLabel = 'JanusDataChannel';
-		
+
 		if (!config.dataChannel || !config.dataChannelOpen) {
-			
+
+			config.dataChannel = {};
+
 			var onDataChannelMessage = (event) => {
 				this._handleDataEvents(handleId, 'message', event.data);
 			};
 			var onDataChannelStateChange = (event) => {
-				this._handleDataEvents(handleId, 'state', config.dataChannel.readyState);
+				let label = event.target.label;
+				let protocol = event.target.protocol;
+				let state = config.dataChannel[label] ? config.dataChannel[label].readyState : "null";
+				this._handleDataEvents(handleId, 'state', {state, label} );
 			};
+			//TODO: check this
 			var onDataChannelError = (error) => {
-				this._handleDataEvents(handleId, 'error', error);
+				this._handleDataEvents(handleId, 'error', {label: error?.channel?.label, error});
 			};
-			// Until we implement the proxying of open requests within the Janus core, we open a channel ourselves whatever the case
-			config.dataChannel = config.pc.createDataChannel(defaultDataChannelLabel, {ordered: true});
-			config.dataChannel.onmessage = onDataChannelMessage;
-			config.dataChannel.onopen = onDataChannelStateChange;
-			config.dataChannel.onclose = onDataChannelStateChange;
-			config.dataChannel.onerror = onDataChannelError;
-			
+
+			const createDataChannel = (label, protocol, incoming) => {
+				let options =  {ordered: true};
+				if(!incoming) {
+					if(protocol) {
+						options = {...options, protocol}
+					}
+					config.dataChannel[label] = config.pc.createDataChannel(label, options);
+				}
+				else {
+					config.dataChannel[label] = incoming;
+				}
+
+				config.dataChannel[label].onmessage = onDataChannelMessage;
+				config.dataChannel[label].onopen = onDataChannelStateChange;
+				config.dataChannel[label].onclose = onDataChannelStateChange;
+				config.dataChannel[label].onerror = onDataChannelError;
+			}
+
+			createDataChannel(this.defaultDataChannelLabel, null,  null)
 			config.pc.ondatachannel = function (event) {
-				//TODO: implement this
-				console.log('Janus is creating data channel');
+				createDataChannel(event.channel.label, event.channel.protocol, event.channel)
 			};
 		}
 	}
-	
+
 	_webrtcPeer(handleId, jsep) {
-		
+
 		let handle = this._getHandle(handleId);
 		if (!handle) {
 			return Promise.reject({type: 'warning', id: 15, message: 'id non-existent', data: [handleId, 'rtc peer']});
 		}
-		
+
 		var config = handle.webrtcStuff;
-		
+
 		if (jsep !== undefined && jsep !== null) {
 			if (config.pc === null) {
 				this._log("No PeerConnection: if this is an answer, use createAnswer and not _webrtcPeer");
 				return Promise.resolve(null);
 			}
-			
+
 			return config.pc.setRemoteDescription(jsep)
 				.then(() => {
 					config.remoteSdp = jsep.sdp;
@@ -1351,20 +1402,20 @@ class RoomSession {
 			return Promise.reject({type: 'warning', id: 22, message: 'rtc peer', data: [handleId, 'invalid jsep']});
 		}
 	}
-	
+
 	_iceRestart(handleId) {
-		
+
 		let handle = this._getHandle(handleId);
 		if (!handle) {
 			return;
 		}
 		var config = handle.webrtcStuff;
-		
+
 		// Already restarting;
 		if (config.isIceRestarting) {
 			return;
 		}
-		
+
 		if (this.handleId === handleId) {
 			this._log('Performing local ICE restart');
 			config.isIceRestarting = true;
@@ -1399,11 +1450,11 @@ class RoomSession {
 				config.isIceRestarting = false;
 			});
 		}
-		
+
 	}
-	
+
 	_createAO(type = 'offer', handleId, iceRestart = false, [audioSend, audioRecv, videoSend, videoRecv]) {
-		
+
 		let handle = this._getHandle(handleId);
 		if (!handle) {
 			return Promise.reject({
@@ -1413,16 +1464,16 @@ class RoomSession {
 				data: [handleId, 'createAO', type]
 			});
 		}
-		
+
 		let methodName = null;
 		if (type === 'offer') {
 			methodName = 'createOffer'
 		} else {
 			methodName = 'createAnswer'
 		}
-		
+
 		var config = handle.webrtcStuff;
-		
+
 		// https://code.google.com/p/webrtc/issues/detail?id=3508
 		var mediaConstraints = {};
 		if (this.isUnifiedPlan) {
@@ -1445,7 +1496,7 @@ class RoomSession {
 					}
 				}
 			}
-			
+
 			// Handle audio (and related changes, if any)
 			if (!audioSend && !audioRecv) {
 				// Audio disabled: have we removed it?
@@ -1528,7 +1579,7 @@ class RoomSession {
 				}
 			}
 		} else {
-			
+
 			if (adapter.browserDetails.browser === "firefox" || adapter.browserDetails.browser === "edge") {
 				mediaConstraints = {
 					offerToReceiveAudio: audioRecv,
@@ -1543,11 +1594,11 @@ class RoomSession {
 				};
 			}
 		}
-		
+
 		if (iceRestart) {
 			mediaConstraints["iceRestart"] = true;
 		}
-		
+
 		return config.pc[methodName](mediaConstraints)
 			.then(function (response) {
 				config.mySdp = response.sdp;
@@ -1565,21 +1616,21 @@ class RoomSession {
 					// Don't do anything until we have all candidates
 					return Promise.resolve(null);
 				}
-				
+
 				// JSON.stringify doesn't work on some WebRTC objects anymore
 				// See https://code.google.com/p/chromium/issues/detail?id=467366
 				var jsep = {
 					"type": response.type,
 					"sdp": response.sdp
 				};
-				
+
 				return _p.then(() => jsep)
 			}, (e) => {
 				return Promise.reject({type: 'warning', id: 25, message: methodName, data: [handleId, e]})
 			});
-		
+
 	}
-	
+
 	_publishRemote(handleId, jsep) {
 		let handle = this._getHandle(handleId);
 		if (!handle) {
@@ -1590,11 +1641,11 @@ class RoomSession {
 				data: [handleId, 'publish remote participant']
 			})
 		}
-		
+
 		this._webrtc(handleId, true);
-		
+
 		let config = handle.webrtcStuff;
-		
+
 		if (jsep) {
 			return config.pc.setRemoteDescription(jsep)
 				.then(() => {
@@ -1636,19 +1687,19 @@ class RoomSession {
 					message: 'setRemoteDescription',
 					data: [handleId, e]
 				}));
-			
+
 		} else {
 			return Promise.resolve();
 		}
-		
+
 	}
-	
+
 	//Public methods
-	
+
 	publishLocal(stream, {keepAudio = false, keepVideo = false} = {}) {
-		
+
 		this.emit('publishing', true);
-		
+
 		let handle = this._getHandle(this.handleId);
 		if (!handle) {
 			return Promise.reject({
@@ -1658,24 +1709,24 @@ class RoomSession {
 				data: null
 			})
 		}
-		
+
 		this._webrtc(this.handleId);
-		
+
 		let config = handle.webrtcStuff;
-		
+
 		if (stream) {
 			if (!config.stream) {
 				config.stream = stream;
 				stream.getTracks().forEach(function (track) {
 					config.pc.addTrack(track, stream);
 				});
-				
+
 			} else {
-				
+
 				/* UPDATE Audio */
-				
+
 				let replaceAudio = stream.getAudioTracks().length;
-				
+
 				if (replaceAudio || !keepAudio) {
 					//this will stop existing tracks
 					let oldAudioStream = config.stream.getAudioTracks()[0];
@@ -1688,7 +1739,7 @@ class RoomSession {
 						}
 					}
 				}
-				
+
 				if (config.pc.getSenders() && config.pc.getSenders().length) {
 					if (replaceAudio && this.isUnifiedPlan) {
 						//using replace
@@ -1701,7 +1752,7 @@ class RoomSession {
 						}
 					}
 				}
-				
+
 				if (replaceAudio) {
 					config.stream.addTrack(stream.getAudioTracks()[0]);
 					var audioTransceiver = null;
@@ -1718,19 +1769,19 @@ class RoomSession {
 							}
 						}
 					}
-					
+
 					if (audioTransceiver && audioTransceiver.sender) {
 						audioTransceiver.sender.replaceTrack(stream.getAudioTracks()[0]);
 					} else {
 						config.pc.addTrack(stream.getAudioTracks()[0], stream);
 					}
-					
+
 				}
-				
+
 				/* UPDATE Video */
-				
+
 				let replaceVideo = stream.getVideoTracks().length;
-				
+
 				if (replaceVideo || !keepVideo) {
 					let oldVideoStream = config.stream.getVideoTracks()[0];
 					if (oldVideoStream) {
@@ -1742,7 +1793,7 @@ class RoomSession {
 						}
 					}
 				}
-				
+
 				if (config.pc.getSenders() && config.pc.getSenders().length) {
 					if (replaceVideo && this.isUnifiedPlan) {
 						//using replace
@@ -1755,7 +1806,7 @@ class RoomSession {
 						}
 					}
 				}
-				
+
 				if (replaceVideo) {
 					config.stream.addTrack(stream.getVideoTracks()[0]);
 					var videoTransceiver = null;
@@ -1781,17 +1832,17 @@ class RoomSession {
 				}
 			}
 		}
-		
+
 		let hasAudio = !!(stream && stream.getAudioTracks().length > 0);
 		let hasVideo = !!(stream && stream.getVideoTracks().length > 0);
 		let isAudioMuted = !stream || stream.getAudioTracks().length === 0 || !stream.getAudioTracks()[0].enabled;
 		let isVideoMuted = !stream || stream.getVideoTracks().length === 0 || !stream.getVideoTracks()[0].enabled;
-		
+
 		this.isAudioEnabed = hasAudio;
 		this.isVideoEnabled = hasVideo;
 		this.isAudioMuted = isAudioMuted;
 		this.isVideoMuted = isVideoMuted;
-		
+
 		return this._createAO('offer', this.handleId, false, [hasAudio, false, hasVideo, false])
 			.then((jsep) => {
 				if (!jsep) {
@@ -1828,7 +1879,54 @@ class RoomSession {
 			})
 			.then(r => {
 				this._isPublished = true;
-				this.emit('addLocalParticipant', {tid:generateUUID(), id: handle.handleId, userId: handle.userId, stream: config.stream});
+				if(config.stream) {
+					let tracks = config.stream.getTracks();
+					tracks.forEach(track => {
+						// used as a flag to not emit tracks that been already emitted
+						if(!track.onended) {
+							this.emit('addLocalParticipant', {
+								tid: generateUUID(),
+								id: handle.handleId,
+								userId: handle.userId,
+								track,
+								stream: config.stream,
+								adding: true,
+								constructId: this.constructId,
+								metaData: this.options.metaData,
+								hasAudioTrack: hasAudio,
+								hasVideoTrack: hasVideo
+							});
+							track.onended = (ev) => {
+								this.emit('addLocalParticipant', {
+									tid:generateUUID(),
+									id: handle.handleId,
+									userId: handle.userId,
+									track: ev.target,
+									stream: config.stream,
+									adding: false,
+									removing: true,
+									constructId: this.constructId,
+									metaData: this.options.metaData,
+									hasAudioTrack: hasAudio,
+									hasVideoTrack: hasVideo
+								});
+							}
+						}
+					})
+				} else {
+					this.emit('addLocalParticipant', {
+						tid: generateUUID(),
+						id: handle.handleId,
+						userId: handle.userId,
+						stream: null,
+						adding: false,
+						constructId: this.constructId,
+						metaData: this.options.metaData,
+						hasAudioTrack: hasAudio,
+						hasVideoTrack: hasVideo
+					});
+				}
+
 				this.emit('published', {status: true, hasStream: !!config.stream});
 				this.emit('publishing', false);
 				this.emit('localHasVideo', hasVideo);
@@ -1842,7 +1940,7 @@ class RoomSession {
 				return Promise.reject(e);
 			})
 	}
-	
+
 	unpublishLocal(dontWait = false) {
 		return this._isPublished
 			? this.sendMessage(this.handleId, {body: {"request": "unpublish"}}, dontWait)
@@ -1853,8 +1951,8 @@ class RoomSession {
 				})
 			: Promise.resolve()
 	}
-	
-	toggleAudio(value = null) {
+
+	toggleAudio(value = null, mid) {
 		let handle = this._getHandle(this.handleId);
 		if (!handle) {
 			return Promise.reject({type: 'error', id: 21, message: 'no local id, connect first', data: null})
@@ -1862,7 +1960,7 @@ class RoomSession {
 		let config = handle.webrtcStuff;
 		if (this.isUnifiedPlan) {
 			let transceiver = config.pc.getTransceivers()
-				.find(t => t.sender && t.sender.track && t.receiver.track.kind === "audio" && t.stopped === false);
+				.find(t => t.sender && t.sender.track && t.receiver.track.kind === "audio" && t.stopped === false && (mid ? t.mid === mid : true));
 			if (transceiver) {
 				transceiver.sender.track.enabled = value !== null ? !!value : !transceiver.sender.track.enabled;
 			}
@@ -1873,51 +1971,51 @@ class RoomSession {
 			}
 			this.isAudioMuted = config.stream.getAudioTracks().length === 0 || !config.stream.getAudioTracks()[0].enabled;
 		}
-		this.emit('localMuted', {type: 'audio', value: this.isAudioMuted});
+		this.emit('localMuted', {type: 'audio', value: this.isAudioMuted, mid});
 	}
-	
-	toggleVideo() {
+
+	toggleVideo(value = null, mid) {
 		let handle = this._getHandle(this.handleId);
 		if (!handle) {
 			return Promise.reject({type: 'error', id: 21, message: 'no local id, connect first', data: null})
 		}
 		let config = handle.webrtcStuff;
-		
+
 		if (this.isUnifiedPlan) {
 			let transceiver = config.pc.getTransceivers()
-				.find(t => t.sender && t.sender.track && t.receiver.track.kind === "video" && t.stopped === false);
+				.find(t => t.sender && t.sender.track && t.receiver.track.kind === "video" && t.stopped === false && (mid ? t.mid === mid : true));
 			if (transceiver) {
-				transceiver.sender.track.enabled = !transceiver.sender.track.enabled;
+				transceiver.sender.track.enabled = value !== null ? !!value : !transceiver.sender.track.enabled;
 			}
 			this.isVideoMuted = !transceiver || !transceiver.sender.track.enabled;
 		}
 		else {
 			if (config.stream && config.stream.getVideoTracks().length) {
-				config.stream.getVideoTracks()[0].enabled = !config.stream.getVideoTracks()[0].enabled;
+				config.stream.getVideoTracks()[0].enabled = value !== null ? !!value : !config.stream.getVideoTracks()[0].enabled;
 			}
 			this.isVideoMuted = config.stream.getVideoTracks().length === 0 || !config.stream.getVideoTracks()[0].enabled;
 		}
-		this.emit('localMuted', {type: 'video', value: this.isVideoMuted});
+		this.emit('localMuted', {type: 'video', value: this.isVideoMuted, mid});
 	}
-	
+
 	setInstructorId(instructorId = null) {
 		this._instuctorId = instructorId;
 		this.emit('instructorId', this._instuctorId);
 		return this._instuctorId;
 	}
-	
+
 	setObserverIds(observerIds = []) {
 		this._observerIds = observerIds;
 		this.emit('observerIds', this._observerIds);
 		return this._observerIds;
 	}
-	
+
 	setTalkbackIds(talkbackIds = []) {
 		this._talkbackIds = talkbackIds;
 		this.emit('talkbackIds', this._talkbackIds);
 		return this._talkbackIds;
 	}
-	
+
 }
 
 export default Room;