Add framework for SSE support (replaces #3)

examples/server-owned/src/index.js

@@ -43,10 +43,20 @@ import { JanusWhepServer } from '../../../src/whep.js';
 
 	// Create a test endpoint using a static token
 	let endpoint = server.createEndpoint({ id: 'abc123', mountpoint: 1, token: 'verysecret' });
-	endpoint.on('new-subscriber', function() {
-		console.log(this.id + ': Endpoint has a new subscriber');
+	endpoint.on('new-subscriber', function(uuid) {
+		console.log(this.id + ': Endpoint has a new subscriber (' + uuid + ')');
+		endpoint.notifySubscribers({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
 	});
-	endpoint.on('subscriber-gone', function() {
-		console.log(this.id + ': Endpoint subscriber left');
+	endpoint.on('subscriber-sse', function(uuid, events) {
+		if(events) {
+			console.log(this.id + ': Subscriber ' + uuid + ' subscribed to SSE:', events);
+			this.getSubscriber({ uuid: uuid }).notify({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
+		} else {
+			console.log(this.id + ': Subscriber ' + uuid + ' unsubscribed from SSE');
+		}
+	});
+	endpoint.on('subscriber-gone', function(uuid) {
+		console.log(this.id + ': Endpoint subscriber left (' + uuid + ')');
+		endpoint.notifySubscribers({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
 	});
 }());

examples/server-shared/src/index.js

@@ -42,13 +42,23 @@ import { JanusWhepServer } from '../../../src/whep.js';
 	await server.start();
 
 	// Create a test endpoint using a callback function to validate the token
-	let endpoint = server.createEndpoint({ id: 'abc123', mountpoint: 1, token: function(authtoken) {
+	let endpoint = server.createEndpoint({ id: 'abc123', sse: ['viewercount'], mountpoint: 1, token: function(authtoken) {
 		return authtoken === 'verysecret';
 	}});
-	endpoint.on('new-subscriber', function() {
-		console.log(this.id + ': Endpoint has a new subscriber');
+	endpoint.on('new-subscriber', function(uuid) {
+		console.log(this.id + ': Endpoint has a new subscriber (' + uuid + ')');
+		endpoint.notifySubscribers({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
 	});
-	endpoint.on('subscriber-gone', function() {
-		console.log(this.id + ': Endpoint subscriber left');
+	endpoint.on('subscriber-sse', function(uuid, events) {
+		if(events) {
+			console.log(this.id + ': Subscriber ' + uuid + ' subscribed to SSE:', events);
+			this.getSubscriber({ uuid: uuid }).notify({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
+		} else {
+			console.log(this.id + ': Subscriber ' + uuid + ' unsubscribed from SSE');
+		}
+	});
+	endpoint.on('subscriber-gone', function(uuid) {
+		console.log(this.id + ': Endpoint subscriber left (' + uuid + ')');
+		endpoint.notifySubscribers({ event: 'viewercount', data: ''+endpoint.countSubscribers() });
 	});
 }());

examples/web/index.js

@@ -77,9 +77,24 @@ async function subscribeToEndpoint() {
 		console.log('Got SDP:', sdp);
 		resource = request.getResponseHeader('Location');
 		console.log('WHEP resource:', resource);
-		// TODO Parse ICE servers
-		// let ice = request.getResponseHeader('Link');
-		let iceServers = [{urls: "stun:stun.l.google.com:19302"}];
+		// FIXME Parse Link headers (for ICE servers and/or SSE)
+		let iceServers = [];
+		let links = request.getResponseHeader('Link');
+		let l = links.split('<');
+		for(let i of l) {
+			if(!i || i.length === 0)
+				continue;
+			if(i.indexOf('ice-server') !== -1) {
+				// TODO Parse TURN attributes
+				let url = i.split('>')[0];
+				iceServers.push({ urls: url });
+			} else if(i.indexOf('urn:ietf:params:whep:ext:core:server-sent-events') !== -1) {
+				// TODO Parse event attribute
+				let url = i.split('>')[0];
+				let events = [ 'active', 'inactive', 'layers', 'viewercount' ];
+				startSSE(url, events);
+			}
+		}
 		// Create PeerConnection, if needed
 		createPeerConnectionIfNeeded(iceServers);
 		// Pass the SDP to the PeerConnection
@@ -222,7 +237,6 @@ function createPeerConnectionIfNeeded(iceServers) {
 		console.log('Handling Remote Track', event);
 		if(!event.streams)
 			return;
-		console.warn(event.streams[0].getTracks());
 		if($('#whepvideo').length === 0) {
 			$('#video').removeClass('hide').show();
 			$('#videoremote').append('<video class="rounded centered" id="whepvideo" width="100%" height="100%" autoplay playsinline/>');
@@ -233,3 +247,41 @@ function createPeerConnectionIfNeeded(iceServers) {
 		$('#whepvideo').get(0).volume = 1;
 	};
 }
+
+// Helper function to subscribe to events via SSE
+function startSSE(url, events) {
+	console.log('Starting SSE:', url);
+	$.ajax({
+		url: backend + url,
+		type: 'POST',
+		contentType: 'application/json',
+		data: JSON.stringify(events)
+	}).error(function(xhr, textStatus, errorThrown) {
+		bootbox.alert(xhr.status + ": " + xhr.responseText);
+	}).success(function(res, textStatus, request) {
+		// Done, access the Location header
+		let sse = request.getResponseHeader('Location');
+		console.log('SSE Location:', sse);
+		let source = new EventSource(sse);
+		source.addEventListener('active', message => {
+			updateSSE('active', message.data);
+		});
+		source.addEventListener('inactive', message => {
+			updateSSE('inactive', message.data);
+		});
+		source.addEventListener('viewercount', message => {
+			updateSSE('viewercount', message.data);
+		});
+		source.addEventListener('layer', message => {
+			updateSSE('layer', message.data);
+		});
+	});
+}
+
+function updateSSE(event, data) {
+	console.log('SSE: ' + event + ' = ' + data);
+	if($('#sse-' + event).length === 0)
+		$('.panel-title').append('<span id="sse-' + event + '" class="label label-default pull-right"></span>');
+	$('#sse-' + event).text(event + ': ' + data);
+
+}

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "janus-whep-server",
 	"description": "Simple Janus-based WHEP server library",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"type": "module",
 	"keywords": [
 		"whep",