Update server

README.md

@@ -22,20 +22,18 @@
 2. Run the `npm start:prod` command to start the server in production mode.
 (To connect to the terminal, use `pm2 log video-server`)
 
-
-### Web client
+---
 
 - The server will start by default on port 3000, and the ssl certificates will have to be configured
 - The web client can be accessed using the /sfu path
-ex: https://HOST/sfu/?assetId=1&&accountId=1&producer=true&dest_asset_id=75&assetName=Adi
+ex: http://localhost:3000/sfu/?assetId=1&&accountId=1&producer=true&assetName=Adi&assetType=linx
 assetId = asset id of the unit on which you are doing the test
 accountId = account id of the unit on which you are doing the test
 producer = it will always be true because you are the producer
 (it's possible to put false, but then you have to have another client with producer true)
 assetName = asset name of the unit on which you are doing the test
-dest_asset_id= the addressee with whom the call is made
-- To make a call using this client, you need a microphone and permission to use it
-- For any changes related to the client, the command `npm run watch' will have to be used to generate the bundle.js used by the web client
+assetType = asset type of the unit on which you are doing the test
 
 ### Demo project
   The demo project used initially and then modified for our needs `https://github.com/jamalag/mediasoup2`
+

app.js

@@ -12,7 +12,7 @@ try {
   console.log('https support is disabled!');
 }
 const mediasoup = require('mediasoup');
-console.log('---------🔴🔴---------');
+
 let worker
 /**
  * videoCalls

build.sh

@@ -43,4 +43,6 @@ fi
 
 ## POST BUILD
 
-cd -
+cd -
+
+

public/bundle.js

@@ -20373,6 +20373,7 @@ console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId',
 console.log('🟩 config', config)
 
 let socket, hub
+let doIHaveAudio = false
 let device
 let rtpCapabilities
 let producerTransport
@@ -20487,6 +20488,8 @@ const streamSuccess = (stream) => {
 
   videoParams = {
     track: videoTrack,
+    // codec : device.rtpCapabilities.codecs.find((codec) => codec.mimeType.toLowerCase() === 'video/vp9'),
+    // codec : 'video/vp9',
     ...videoParams
   }
 
@@ -20497,30 +20500,96 @@ const streamSuccess = (stream) => {
 
   console.log('[streamSuccess] videoParams', videoParams, ' | audioParams', audioParams);
   goConnect()
+  // console.log('[streamSuccess]');
+  // localVideo.srcObject = stream
+  // const track = stream.getVideoTracks()[0]
+  // videoParams = {
+  //   track,
+  //   ...videoParams
+  // }
+  // goConnect()
 }
 
 const getLocalStream = () => {
   console.log('[getLocalStream]');
-  navigator.mediaDevices.getUserMedia({
-    audio: true,
-    video: {
-      qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
-      vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
-      hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
-    }
-  })
-  .then(streamSuccess)
-  .catch(error => {
-    console.log(error.message)
-  })
 
   navigator.permissions.query(
     { name: 'microphone' }
-  ).then((permissionStatus) =>{
-    console.log('🟨 [PERMISSION] permissionStatus', permissionStatus); // granted, denied, prompt
-    // It will block the code from execution and display "Permission denied" if we don't have microphone permissions
+  ).then(function(permissionStatus) {
+
+      console.log('🟨 [PERMISSION] onchange', permissionStatus.state); // granted, denied, prompt
+
+      // If he has entered before, the saved access is already saved
+      if (permissionStatus === 'grated') {
+        doIHaveAudio = true;
+      }
+
+      // 🟨 [PERMISSION] onchange denied
+      // If it is the first time client enter and give permission
+      permissionStatus.onchange = function() {
+        console.log('🟨 [PERMISSION] onchange', this.state);
+        if (this.state === 'granted') {
+          doIHaveAudio = true;
+          navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: {
+              qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+              vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+              hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+            }
+          })
+          .then(streamSuccess)
+          .catch(error => {
+            console.log(error.message)
+          })
+        } else /*if (this.state === 'denied') */ {
+          doIHaveAudio = false;
+          console.log('Getting user permission');
+          navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: {
+              qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+              vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+              hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+            }
+          })
+          .then(streamSuccess)
+          .catch(error => {
+            console.log(error.message)
+          })
+        }
+        // navigator.mediaDevices.getUserMedia({
+        //   audio: true,
+        //   video: {
+        //     qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+        //     vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+        //     hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+        //   }
+        // })
+        // .then(streamSuccess)
+        // .catch(error => {
+        //   console.log(error.message)
+        // })
+      }
+
   })
 
+
+  // navigator.mediaDevices.getUserMedia({
+  //   audio: true,
+  //   video: {
+  //     qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+  //     vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+  //     hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+  //   }
+  // })
+  // .then((streamSuccess) => {
+
+  //   return streamSuccess
+  // })
+  // .catch(error => {
+  //   console.log(error.message)
+  // })
 }
 
 const goConnect = () => {
@@ -20537,6 +20606,7 @@ const goCreateTransport = () => {
 // server side to send/recive media
 const createDevice = async () => {
   try {
+    console.log('[createDevice] 1 device', device);
     device = new mediasoupClient.Device()
 
     // https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-load
@@ -20547,7 +20617,7 @@ const createDevice = async () => {
     })
 
     console.log('Device RTP Capabilities', device.rtpCapabilities)
-    console.log('[createDevice] device', device);
+    console.log('[createDevice] 2 device', device);
     
     // once the device loads, create transport
     goCreateTransport()
@@ -20619,7 +20689,7 @@ const createSendTransport = () => {
       console.log('[produce] parameters', parameters)
 
       try {
-        // Tell the server to create a Producer
+        // tell the server to create a Producer
         // with the following parameters and produce
         // and expect back a server side producer id
         // see server's socket.on('transport-produce', ...)
@@ -20645,16 +20715,14 @@ const connectSendTransport = async () => {
 
   console.log('[connectSendTransport] producerTransport');
 
-  // We now call produce() to instruct the producer transport
+  // we now call produce() to instruct the producer transport
   // to send media to the Router
   // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
   // this action will trigger the 'connect' and 'produce' events above
   
-  // Produce video
-  producerVideo = await producerTransport.produce(videoParams)
   console.log('videoParams', videoParams);
+  producerVideo = await producerTransport.produce(videoParams)
   console.log('producerVideo', producerVideo);
-
   producerVideo.on('trackended', () => {
     console.log('track ended')
     // close video track
@@ -20665,20 +20733,22 @@ const connectSendTransport = async () => {
     // close video track
   })    
   
-  // Produce audio
-  producerAudio = await producerTransport.produce(audioParams)
-  console.log('audioParams', audioParams);
-  console.log('producerAudio', producerAudio);
-
-  producerAudio.on('trackended', () => {
-    console.log('track ended')
-    // close audio track
-  })
-
-  producerAudio.on('transportclose', () => {
-    console.log('transport ended')
-    // close audio track
-  })
+  console.log('doIHaveAudio', doIHaveAudio);
+  // Video is mandatory, but audio may not be included
+  // if (doIHaveAudio) {
+    console.log('audioParams', audioParams);
+    producerAudio = await producerTransport.produce(audioParams)
+    console.log('producerAudio', producerAudio);
+    producerAudio.on('trackended', () => {
+      console.log('track ended')
+      // close video track
+    })
+  
+    producerAudio.on('transportclose', () => {
+      console.log('transport ended')
+      // close video track
+    })
+  // }
 
   const answer = {
     origin_asset_id: ASSET_ID,
@@ -20688,7 +20758,7 @@ const connectSendTransport = async () => {
     origin_asset_type_name: ASSET_TYPE,
     origin_asset_name: ASSET_NAME,
     video_call_id: callId,
-    answer: 'accepted', // answer: accepted/rejected
+    answer: 'accepted', // answer: 'rejected'
   };
   console.log('SEND answer', answer);
 
@@ -20704,7 +20774,7 @@ const connectSendTransport = async () => {
 
 const createRecvTransport = async () => {
   console.log('createRecvTransport');
-  // See server's socket.on('consume', sender?, ...)
+  // see server's socket.on('consume', sender?, ...)
   // this is a call from Consumer, so sender = false
   await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
     // The server sends back params needed 
@@ -20716,13 +20786,13 @@ const createRecvTransport = async () => {
 
     console.log('[createRecvTransport] params', params)
 
-    // Creates a new WebRTC Transport to receive media
+    // creates a new WebRTC Transport to receive media
     // based on server's consumer transport params
     // https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-createRecvTransport
     consumerTransport = device.createRecvTransport(params)
 
     // https://mediasoup.org/documentation/v3/communication-between-client-and-server/#producing-media
-    // This event is raised when a first call to transport.produce() is made
+    // this event is raised when a first call to transport.produce() is made
     // see connectRecvTransport() below
     consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
       try {
@@ -20756,7 +20826,7 @@ const resetCallSettings = () => {
 
 const connectRecvTransport = async () => {
   console.log('connectRecvTransport');
-  // For consumer, we need to tell the server first
+  // for consumer, we need to tell the server first
   // to create a consumer based on the rtpCapabilities and consume
   // if the router can consume, it will send back a set of params as below
   await socket.emit('consume', {
@@ -20768,7 +20838,7 @@ const connectRecvTransport = async () => {
       return
     }
 
-    // Then consume with the local consumer transport
+    // then consume with the local consumer transport
     // which creates a consumer
     consumer = await consumerTransport.consume({
       id: params.id,

public/index.js

@@ -15,6 +15,7 @@ console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId',
 console.log('🟩 config', config)
 
 let socket, hub
+let doIHaveAudio = false
 let device
 let rtpCapabilities
 let producerTransport
@@ -129,6 +130,8 @@ const streamSuccess = (stream) => {
 
   videoParams = {
     track: videoTrack,
+    // codec : device.rtpCapabilities.codecs.find((codec) => codec.mimeType.toLowerCase() === 'video/vp9'),
+    // codec : 'video/vp9',
     ...videoParams
   }
 
@@ -139,30 +142,96 @@ const streamSuccess = (stream) => {
 
   console.log('[streamSuccess] videoParams', videoParams, ' | audioParams', audioParams);
   goConnect()
+  // console.log('[streamSuccess]');
+  // localVideo.srcObject = stream
+  // const track = stream.getVideoTracks()[0]
+  // videoParams = {
+  //   track,
+  //   ...videoParams
+  // }
+  // goConnect()
 }
 
 const getLocalStream = () => {
   console.log('[getLocalStream]');
-  navigator.mediaDevices.getUserMedia({
-    audio: true,
-    video: {
-      qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
-      vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
-      hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
-    }
-  })
-  .then(streamSuccess)
-  .catch(error => {
-    console.log(error.message)
-  })
 
   navigator.permissions.query(
     { name: 'microphone' }
-  ).then((permissionStatus) =>{
-    console.log('🟨 [PERMISSION] permissionStatus', permissionStatus); // granted, denied, prompt
-    // It will block the code from execution and display "Permission denied" if we don't have microphone permissions
+  ).then(function(permissionStatus) {
+
+      console.log('🟨 [PERMISSION] onchange', permissionStatus.state); // granted, denied, prompt
+
+      // If he has entered before, the saved access is already saved
+      if (permissionStatus === 'grated') {
+        doIHaveAudio = true;
+      }
+
+      // 🟨 [PERMISSION] onchange denied
+      // If it is the first time client enter and give permission
+      permissionStatus.onchange = function() {
+        console.log('🟨 [PERMISSION] onchange', this.state);
+        if (this.state === 'granted') {
+          doIHaveAudio = true;
+          navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: {
+              qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+              vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+              hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+            }
+          })
+          .then(streamSuccess)
+          .catch(error => {
+            console.log(error.message)
+          })
+        } else /*if (this.state === 'denied') */ {
+          doIHaveAudio = false;
+          console.log('Getting user permission');
+          navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: {
+              qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+              vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+              hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+            }
+          })
+          .then(streamSuccess)
+          .catch(error => {
+            console.log(error.message)
+          })
+        }
+        // navigator.mediaDevices.getUserMedia({
+        //   audio: true,
+        //   video: {
+        //     qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+        //     vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+        //     hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+        //   }
+        // })
+        // .then(streamSuccess)
+        // .catch(error => {
+        //   console.log(error.message)
+        // })
+      }
+
   })
 
+
+  // navigator.mediaDevices.getUserMedia({
+  //   audio: true,
+  //   video: {
+  //     qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
+  //     vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
+  //     hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+  //   }
+  // })
+  // .then((streamSuccess) => {
+
+  //   return streamSuccess
+  // })
+  // .catch(error => {
+  //   console.log(error.message)
+  // })
 }
 
 const goConnect = () => {
@@ -179,6 +248,7 @@ const goCreateTransport = () => {
 // server side to send/recive media
 const createDevice = async () => {
   try {
+    console.log('[createDevice] 1 device', device);
     device = new mediasoupClient.Device()
 
     // https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-load
@@ -189,7 +259,7 @@ const createDevice = async () => {
     })
 
     console.log('Device RTP Capabilities', device.rtpCapabilities)
-    console.log('[createDevice] device', device);
+    console.log('[createDevice] 2 device', device);
     
     // once the device loads, create transport
     goCreateTransport()
@@ -261,7 +331,7 @@ const createSendTransport = () => {
       console.log('[produce] parameters', parameters)
 
       try {
-        // Tell the server to create a Producer
+        // tell the server to create a Producer
         // with the following parameters and produce
         // and expect back a server side producer id
         // see server's socket.on('transport-produce', ...)
@@ -287,16 +357,14 @@ const connectSendTransport = async () => {
 
   console.log('[connectSendTransport] producerTransport');
 
-  // We now call produce() to instruct the producer transport
+  // we now call produce() to instruct the producer transport
   // to send media to the Router
   // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
   // this action will trigger the 'connect' and 'produce' events above
   
-  // Produce video
-  producerVideo = await producerTransport.produce(videoParams)
   console.log('videoParams', videoParams);
+  producerVideo = await producerTransport.produce(videoParams)
   console.log('producerVideo', producerVideo);
-
   producerVideo.on('trackended', () => {
     console.log('track ended')
     // close video track
@@ -307,20 +375,22 @@ const connectSendTransport = async () => {
     // close video track
   })    
   
-  // Produce audio
-  producerAudio = await producerTransport.produce(audioParams)
-  console.log('audioParams', audioParams);
-  console.log('producerAudio', producerAudio);
-
-  producerAudio.on('trackended', () => {
-    console.log('track ended')
-    // close audio track
-  })
-
-  producerAudio.on('transportclose', () => {
-    console.log('transport ended')
-    // close audio track
-  })
+  console.log('doIHaveAudio', doIHaveAudio);
+  // Video is mandatory, but audio may not be included
+  // if (doIHaveAudio) {
+    console.log('audioParams', audioParams);
+    producerAudio = await producerTransport.produce(audioParams)
+    console.log('producerAudio', producerAudio);
+    producerAudio.on('trackended', () => {
+      console.log('track ended')
+      // close video track
+    })
+  
+    producerAudio.on('transportclose', () => {
+      console.log('transport ended')
+      // close video track
+    })
+  // }
 
   const answer = {
     origin_asset_id: ASSET_ID,
@@ -330,7 +400,7 @@ const connectSendTransport = async () => {
     origin_asset_type_name: ASSET_TYPE,
     origin_asset_name: ASSET_NAME,
     video_call_id: callId,
-    answer: 'accepted', // answer: accepted/rejected
+    answer: 'accepted', // answer: 'rejected'
   };
   console.log('SEND answer', answer);
 
@@ -346,7 +416,7 @@ const connectSendTransport = async () => {
 
 const createRecvTransport = async () => {
   console.log('createRecvTransport');
-  // See server's socket.on('consume', sender?, ...)
+  // see server's socket.on('consume', sender?, ...)
   // this is a call from Consumer, so sender = false
   await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
     // The server sends back params needed 
@@ -358,13 +428,13 @@ const createRecvTransport = async () => {
 
     console.log('[createRecvTransport] params', params)
 
-    // Creates a new WebRTC Transport to receive media
+    // creates a new WebRTC Transport to receive media
     // based on server's consumer transport params
     // https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-createRecvTransport
     consumerTransport = device.createRecvTransport(params)
 
     // https://mediasoup.org/documentation/v3/communication-between-client-and-server/#producing-media
-    // This event is raised when a first call to transport.produce() is made
+    // this event is raised when a first call to transport.produce() is made
     // see connectRecvTransport() below
     consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
       try {
@@ -398,7 +468,7 @@ const resetCallSettings = () => {
 
 const connectRecvTransport = async () => {
   console.log('connectRecvTransport');
-  // For consumer, we need to tell the server first
+  // for consumer, we need to tell the server first
   // to create a consumer based on the rtpCapabilities and consume
   // if the router can consume, it will send back a set of params as below
   await socket.emit('consume', {
@@ -410,7 +480,7 @@ const connectRecvTransport = async () => {
       return
     }
 
-    // Then consume with the local consumer transport
+    // then consume with the local consumer transport
     // which creates a consumer
     consumer = await consumerTransport.consume({
       id: params.id,