Improvements

.gitignore

@@ -75,6 +75,9 @@ typings/
 .env
 .env.test
 
+# mac
+.DS_Store
+
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 

.prettierignore

@@ -1,3 +1,4 @@
 README.md
 
-*.min.js
+*.min.js
+*.min.css

README.md

@@ -2,22 +2,26 @@
 
 Example website for multi-party video/audio/screen conferencing using mediasoup. This project is intended to better understand how mediasoup works with a simple example.
 
-This project is featured on the [mediasoup examples page](https://mediasoup.org/documentation/examples/) with many other examples. Checkout mediasoup at [mediasoup.org](https://mediasoup.org)
+This project is featured on the [mediasoup examples page](https://mediasoup.org/documentation/examples/) with many other examples. Checkout mediasoup at [mediasoup.org](https://mediasoup.org).
 
-# Running the code
+## Running the code
 
 -   run `npm install` then `npm start` to run the application. Then open your browser at `https://localhost:3016` or your own defined port/url in the config file.
+
 -   (optional) edit the `src/config.js` file according to your needs and replace the `ssl/key.pem ssl/cert.pem` certificates with your own.
 
-# Deployment
+## Deployment
 
 -   in `config.js` replace the `announcedIP` with your public ip address of the server and modify the port you want to serve it in.
+
 -   add firewall rules of the port of the webpage (default 3016) and the rtc connections (default udp 10000-10100) for the machine.
 
-# Pull Requests
+## Pull Requests
+
+-   Please run `npm run lint` before to make a PR.
 
--   Please run `npx prettier --write .` before to make a PR.
+## Notes
 
-notes : Best to run the project on a linux system as the mediasoup installation could have issues by installing on windows. If you have a windows system consider installing WSL to be able to run it.
+Best to run the project on a linux system as the mediasoup installation could have issues by installing on windows. 
 
-[installing wsl on windows 10](https://docs.microsoft.com/en-us/windows/wsl/install-win10)
+More details regarding mediasoup requirements can be found [here](https://mediasoup.org/documentation/v3/mediasoup/installation/#requirements).

package.json

@@ -15,16 +15,16 @@
     "docker-stop": "docker stop dirvann-mediasoup-rooms",
     "compile-mediasoup-client": "npx browserify mediasoup-client-compile.js -o public/modules/mediasoupclient.min.js"
   },
-  "author": "",
+  "author": "Dirk Vanbeveren & Miroslav Pejic",
   "license": "ISC",
   "dependencies": {
-    "express": "^4.17.1",
+    "express": "^4.18.2",
     "httpolyglot": "^0.1.2",
-    "mediasoup": "^3.8.2",
-    "mediasoup-client": "^3.6.37",
-    "socket.io": "^4.1.3"
+    "mediasoup": "^3.11.11",
+    "mediasoup-client": "^3.6.82",
+    "socket.io": "^4.6.1"
   },
   "devDependencies": {
-    "prettier": "2.3.2"
+    "prettier": "2.8.4"
   }
 }

public/RoomClient.js

@@ -86,6 +86,8 @@ class RoomClient {
           this.device = device
           await this.initTransports(device)
           this.socket.emit('getProducers')
+          startVideoButton.click()
+          startAudioButton.click()
         }.bind(this)
       )
       .catch((err) => {
@@ -290,9 +292,6 @@ class RoomClient {
               ideal: 1080
             },
             deviceId: deviceId
-            /*aspectRatio: {
-                            ideal: 1.7777777778
-                        }*/
           }
         }
         break
@@ -328,18 +327,17 @@ class RoomClient {
           {
             rid: 'r0',
             maxBitrate: 100000,
-            //scaleResolutionDownBy: 10.0,
-            scalabilityMode: 'S1T3'
+            scalabilityMode: 'L3T3'
           },
           {
             rid: 'r1',
             maxBitrate: 300000,
-            scalabilityMode: 'S1T3'
+            scalabilityMode: 'L3T3'
           },
           {
             rid: 'r2',
             maxBitrate: 900000,
-            scalabilityMode: 'S1T3'
+            scalabilityMode: 'L3T3'
           }
         ]
         params.codecOptions = {
@@ -521,6 +519,11 @@ class RoomClient {
     }
   }
 
+  closeThenProduce(type, deviceId) {
+    this.closeProducer(type)
+    this.produce(type, deviceId)
+  }
+
   pauseProducer(type) {
     if (!this.producerLabel.has(type)) {
       console.log('There is no producer for this type ' + type)
@@ -616,9 +619,10 @@ class RoomClient {
     document.body.appendChild(tmpInput)
     tmpInput.value = window.location.href
     tmpInput.select()
-    document.execCommand('copy')
+    tmpInput.setSelectionRange(0, 99999) // For mobile devices
+    navigator.clipboard.writeText(tmpInput.value)
     document.body.removeChild(tmpInput)
-    console.log('URL copied to clipboard 👍')
+    alert('ROOM URL copied to clipboard 👍')
   }
 
   showDevices() {

public/index.html

@@ -68,10 +68,20 @@
                 <br /><br />
                 <div id="devicesList" class="hidden">
                     <i class="fas fa-microphone"></i> Audio:
-                    <select id="audioSelect" class="form-select" style="width: auto"></select>
+                    <select
+                        id="audioSelect"
+                        class="form-select"
+                        style="width: auto"
+                        onchange="rc.closeThenProduce(RoomClient.mediaType.audio, audioSelect.value)"
+                    ></select>
                     <br />
                     <i class="fas fa-video"></i> Video:
-                    <select id="videoSelect" class="form-select" style="width: auto"></select>
+                    <select
+                        id="videoSelect"
+                        class="form-select"
+                        style="width: auto"
+                        onchange="rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value)"
+                    ></select>
                 </div>
                 <br />
             </div>

public/index.js

@@ -4,6 +4,8 @@ const socket = io()
 
 let producer = null
 
+let isEnumerateDevices = false
+
 nameInput.value = 'user_' + Math.round(Math.random() * 1000)
 
 socket.request = function request(type, data = {}) {
@@ -93,8 +95,6 @@ function addListeners() {
   })
 }
 
-let isEnumerateDevices = false
-
 function initEnumerateDevices() {
   // Many browsers, without the consent of getUserMedia, cannot enumerate the devices.
   if (isEnumerateDevices) return