Show mediasoup and mediasoup-client versions

Author: ibc

app/lib/RoomClient.js

@@ -252,6 +252,9 @@ export default class RoomClient
 
 	async join()
 	{
+		store.dispatch(
+			stateActions.setMediasoupClientVersion(mediasoupClient.version));
+
 		const protooTransport = new protooClient.WebSocketTransport(this._protooUrl);
 
 		this._protoo = new protooClient.Peer(protooTransport);
@@ -603,6 +606,16 @@ export default class RoomClient
 
 			switch (notification.method)
 			{
+				case 'mediasoup-version':
+				{
+					const { version } = notification.data;
+
+					store.dispatch(
+						stateActions.setMediasoupVersion(version));
+
+					break;
+				}
+
 				case 'producerScore':
 				{
 					const { producerId, score } = notification.data;

app/lib/components/Room.jsx

@@ -27,6 +27,10 @@ class Room extends React.Component
 			onRoomLinkCopy
 		}	= this.props;
 
+		const mediasoupClientVersion = room.mediasoupClientVersion === '__MEDIASOUP_CLIENT_VERSION__'
+			? 'dev'
+			: room.mediasoupClientVersion;
+
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
@@ -37,8 +41,10 @@ class Room extends React.Component
 						<p className={classnames('text', room.state)}>{room.state}</p>
 					</div>
 
-					<div className='mediasoup-client-handler-name'>
-						<p className='text'><span className='label'>handler: </span>{room.mediasoupClientHandler}</p>
+					<div className='info'>
+						<p className='text'><span className='label'>server:&nbsp;&nbsp;</span>{room.mediasoupVersion}</p>
+						<p className='text'><span className='label'>client:&nbsp;&nbsp;</span>{mediasoupClientVersion}</p>
+						<p className='text'><span className='label'>handler:&nbsp;&nbsp;</span>{room.mediasoupClientHandler}</p>
 					</div>
 
 					<div className='room-link-wrapper'>

app/lib/index.jsx

@@ -141,10 +141,14 @@ async function run()
 			case 'throttleSecret':
 			case 'e2eKey':
 			case 'consumerReplicas':
+			{
 				break;
+			}
 
 			default:
+			{
 				delete roomUrlParser.query[key];
+			}
 		}
 	}
 	delete roomUrlParser.hash;

app/lib/redux/STATE.md

@@ -5,6 +5,8 @@
   room :
   {
     url             : 'https://demo.mediasoup.org/?roomId=d0el8y34',
+    mediasoupVersion       : null,
+    mediasoupClientVersion : null
     state           : 'connected', // new/connecting/connected/closed
     activeSpeakerId : 'alice',
     statsPeerId     : null,

app/lib/redux/reducers/room.js

@@ -2,6 +2,8 @@ const initialState =
 {
 	url                    : null,
 	state                  : 'new', // new/connecting/connected/disconnected/closed,
+	mediasoupVersion       : null,
+	mediasoupClientVersion : null,
 	mediasoupClientHandler : undefined,
 	activeSpeakerId        : null,
 	statsPeerId            : null,
@@ -36,6 +38,20 @@ const room = (state = initialState, action) =>
 			return { ...state, mediasoupClientHandler };
 		}
 
+		case 'SET_MEDIASOUP_VERSION':
+		{
+			const { version } = action.payload;
+
+			return { ...state, mediasoupVersion: version };
+		}
+
+		case 'SET_MEDIASOUP_CLIENT_VERSION':
+		{
+			const { version } = action.payload;
+
+			return { ...state, mediasoupClientVersion: version };
+		}
+
 		case 'SET_ROOM_ACTIVE_SPEAKER':
 		{
 			const { peerId } = action.payload;

app/lib/redux/stateActions.js

@@ -22,6 +22,22 @@ export const setRoomMediasoupClientHandler = (mediasoupClientHandler) =>
 	};
 };
 
+export const setMediasoupVersion = (version) =>
+{
+	return {
+		type    : 'SET_MEDIASOUP_VERSION',
+		payload : { version }
+	};
+};
+
+export const setMediasoupClientVersion = (version) =>
+{
+	return {
+		type    : 'SET_MEDIASOUP_CLIENT_VERSION',
+		payload : { version }
+	};
+};
+
 export const setRoomActiveSpeaker = (peerId) =>
 {
 	return {

app/stylus/components/Room.styl

@@ -88,41 +88,42 @@
 		}
 	}
 
-	> .mediasoup-client-handler-name {
+	> .info {
 		position: fixed;
 		z-index: 100;
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		border-radius: 25px;
-		background-color: $COLOR_BG_1;
 
 		+desktop() {
 			top: 55px;
 			left: 20px;
-			height: 18px;
 			width: 124px;
 		}
 
 		+mobile() {
 			top: 40px;
-			left: 10px;
 			height: 18px;
 			width: 110px;
 		}
 
-		> .text {
+		> p.text {
+			height: 18px;
+			left: 10px;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
 			flex: 100 0 auto;
 			user-select: none;
 			pointer-events: none;
 			text-align: center;
 			font-family: 'Roboto';
 			font-weight: 400;
 			color: rgba(#fff, 0.75);
+			border-radius: 25px;
+			background-color: $COLOR_BG_1;
+			margin-bottom: 2px;
 
 			+desktop() {
-				font-size: 10px;
+				font-size: 11px;
 			}
 
 			+mobile() {

server/lib/Room.js

@@ -1,4 +1,5 @@
 const EventEmitter = require('events').EventEmitter;
+const mediasoup = require('mediasoup');
 const protoo = require('protoo-server');
 // const rtp = require('rtp.js');
 const throttle = require('@sitespeed.io/throttle');
@@ -224,6 +225,10 @@ class Room extends EventEmitter
 			logger.error('protooRoom.createPeer() failed:%o', error);
 		}
 
+		// Notify mediasoup version to the peer.
+		peer.notify('mediasoup-version', { version: mediasoup.version })
+			.catch(() => {});
+
 		// Use the peer.data object to store mediasoup related objects.
 
 		// Not joined after a custom protoo 'join' request is later received.