Audio Video not working in Demo

Hi Thanks for the awesome work, i just fresh install the demo when i start both server and client, and i connected 2 users with different browsers, and it , Users are visible to each other, but audio video not working between then

Logs : Client

and Server Logs

0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48116071, type: 'bwe' }] +795ms
  mediasoup-demo-server:Room transport "trace" event [transportId:d2091a94-58ce-4155-9b4f-e99508712ca7, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48117281, type: 'bwe' }] +1s
  mediasoup-demo-server:Room transport "trace" event [transportId:f09f20b8-ab2a-42e1-8f12-46f74e588aaf, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48118081, type: 'bwe' }] +800ms
  mediasoup-demo-server:Room transport "trace" event [transportId:d2091a94-58ce-4155-9b4f-e99508712ca7, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48119293, type: 'bwe' }] +1s
  mediasoup-demo-server:Room transport "trace" event [transportId:f09f20b8-ab2a-42e1-8f12-46f74e588aaf, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48120098, type: 'bwe' }] +805ms
  mediasoup:Worker getResourceUsage() +2m
  mediasoup:Channel request() [method:worker.getResourceUsage, id:82] +2m
  mediasoup:Channel request succeeded [method:worker.getResourceUsage, id:82] +4ms
  mediasoup-demo-server:INFO mediasoup Worker resource usage [pid:31463]: { ru_idrss: 0, ru_inblock: 0, ru_isrss: 0, ru_ixrss: 0, ru_majflt: 0, ru_maxrss: 14424, ru_minflt: 5110, ru_msgrcv: 0, ru_msgsnd: 0, ru_nivcsw: 0, ru_nsignals: 0, ru_nswap: 0, ru_nvcsw: 0, ru_oublock: 0, ru_stime: 281, ru_utime: 187 } +2m
  mediasoup:Worker getResourceUsage() +40ms
  mediasoup:Channel request() [method:worker.getResourceUsage, id:1] +33ms
  mediasoup:Channel request succeeded [method:worker.getResourceUsage, id:1] +14ms
  mediasoup-demo-server:INFO mediasoup Worker resource usage [pid:31465]: { ru_idrss: 0, ru_inblock: 0, ru_isrss: 0, ru_ixrss: 0, ru_majflt: 0, ru_maxrss: 8908, ru_minflt: 2287, ru_msgrcv: 0, ru_msgsnd: 0, ru_nivcsw: 0, ru_nsignals: 0, ru_nswap: 0, ru_nvcsw: 0, ru_oublock: 0, ru_stime: 46, ru_utime: 0 } +49ms
  mediasoup:Worker getResourceUsage() +45ms
  mediasoup:Channel request() [method:worker.getResourceUsage, id:1] +31ms
  mediasoup:Channel request succeeded [method:worker.getResourceUsage, id:1] +32ms
  mediasoup-demo-server:INFO mediasoup Worker resource usage [pid:31467]: { ru_idrss: 0, ru_inblock: 0, ru_isrss: 0, ru_ixrss: 0, ru_majflt: 0, ru_maxrss: 8912, ru_minflt: 2290, ru_msgrcv: 0, ru_msgsnd: 0, ru_nivcsw: 0, ru_nsignals: 0, ru_nswap: 0, ru_nvcsw: 0, ru_oublock: 0, ru_stime: 62, ru_utime: 0 } +63ms
  mediasoup:Worker getResourceUsage() +54ms
  mediasoup:Channel request() [method:worker.getResourceUsage, id:1] +22ms
  mediasoup:Channel request succeeded [method:worker.getResourceUsage, id:1] +45ms
  mediasoup-demo-server:INFO mediasoup Worker resource usage [pid:31469]: { ru_idrss: 0, ru_inblock: 0, ru_isrss: 0, ru_ixrss: 0, ru_majflt: 0, ru_maxrss: 8916, ru_minflt: 2290, ru_msgrcv: 0, ru_msgsnd: 0, ru_nivcsw: 0, ru_nsignals: 0, ru_nswap: 0, ru_nvcsw: 0, ru_oublock: 0, ru_stime: 78, ru_utime: 0 } +73ms
  mediasoup-demo-server:INFO:Room logStatus() [roomId:pdqax3ww, protoo Peers:2, mediasoup Transports:5] +2m
  mediasoup-demo-server:Room transport "trace" event [transportId:d2091a94-58ce-4155-9b4f-e99508712ca7, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48121301, type: 'bwe' }] +1s
  mediasoup-demo-server:Room transport "trace" event [transportId:f09f20b8-ab2a-42e1-8f12-46f74e588aaf, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48122104, type: 'bwe' }] +802ms
  mediasoup-demo-server:Room transport "trace" event [transportId:d2091a94-58ce-4155-9b4f-e99508712ca7, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48123316, type: 'bwe' }] +1s
  mediasoup-demo-server:Room transport "trace" event [transportId:f09f20b8-ab2a-42e1-8f12-46f74e588aaf, trace.type:bwe, trace:{ direction: 'out', info: { availableBitrate: 1000000, desiredBitrate: 0, effectiveDesiredBitrate: 0, maxBitrate: 1000000, maxPaddingBitrate: 0, minBitrate: 30000, startBitrate: 1000000, type: 'transport-cc' }, timestamp: 48124116, type: 'bwe' }] +801ms

and this is my config.js


/**
 * IMPORTANT (PLEASE READ THIS):
 *
 * This is not the "configuration file" of mediasoup. This is the configuration
 * file of the mediasoup-demo app. mediasoup itself is a server-side library, it
 * does not read any "configuration file". Instead it exposes an API. This demo
 * application just reads settings from this file (once copied to config.js) and
 * calls the mediasoup API with those settings when appropriate.
 */

const os = require("os");

module.exports = {
  // Listening hostname (just for `gulp live` task).
  domain: process.env.DOMAIN || "localhost",
  // Signaling settings (protoo WebSocket server and HTTP API server).
  https: {
    listenIp: "0.0.0.0",
    // NOTE: Don't change listenPort (client app assumes 4443).
    listenPort: process.env.PROTOO_LISTEN_PORT || 4443,
    // NOTE: Set your own valid certificate files.
    tls: {
      cert: process.env.HTTPS_CERT_FULLCHAIN || `${__dirname}/cert/cert.pem`,
      key: process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/cert/key.pem`,
    },
  },
  // mediasoup settings.
  mediasoup: {
    // Number of mediasoup workers to launch.
    numWorkers: Object.keys(os.cpus()).length,
    // mediasoup WorkerSettings.
    // See https://mediasoup.org/documentation/v3/mediasoup/api/#WorkerSettings
    workerSettings: {
      logLevel: "warn",
      logTags: [
        "info",
        "ice",
        "dtls",
        "rtp",
        "srtp",
        "rtcp",
        "rtx",
        "bwe",
        "score",
        "simulcast",
        "svc",
        "sctp",
      ],
      rtcMinPort: process.env.MEDIASOUP_MIN_PORT || 40000,
      rtcMaxPort: process.env.MEDIASOUP_MAX_PORT || 49999,
    },
    // mediasoup Router options.
    // See https://mediasoup.org/documentation/v3/mediasoup/api/#RouterOptions
    routerOptions: {
      mediaCodecs: [
        {
          kind: "audio",
          mimeType: "audio/opus",
          clockRate: 48000,
          channels: 2,
        },
        {
          kind: "video",
          mimeType: "video/VP8",
          clockRate: 90000,
          parameters: {
            "x-google-start-bitrate": 1000,
          },
        },
        {
          kind: "video",
          mimeType: "video/VP9",
          clockRate: 90000,
          parameters: {
            "profile-id": 2,
            "x-google-start-bitrate": 1000,
          },
        },
        {
          kind: "video",
          mimeType: "video/h264",
          clockRate: 90000,
          parameters: {
            "packetization-mode": 1,
            "profile-level-id": "4d0032",
            "level-asymmetry-allowed": 1,
            "x-google-start-bitrate": 1000,
          },
        },
        {
          kind: "video",
          mimeType: "video/h264",
          clockRate: 90000,
          parameters: {
            "packetization-mode": 1,
            "profile-level-id": "42e01f",
            "level-asymmetry-allowed": 1,
            "x-google-start-bitrate": 1000,
          },
        },
      ],
    },
    // mediasoup WebRtcTransport options for WebRTC endpoints (mediasoup-client,
    // libmediasoupclient).
    // See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
    webRtcTransportOptions: {
      listenIps: [
        {
          ip: process.env.MEDIASOUP_LISTEN_IP || "127.0.0.1",
          announcedIp: process.env.MEDIASOUP_ANNOUNCED_IP || "127.0.0.1",
        },
      ],
      initialAvailableOutgoingBitrate: 1000000,
      minimumAvailableOutgoingBitrate: 600000,
      maxSctpMessageSize: 262144,
      // Additional options that are not part of WebRtcTransportOptions.
      maxIncomingBitrate: 1500000,
    },
    // mediasoup PlainTransport options for legacy RTP endpoints (FFmpeg,
    // GStreamer).
    // See https://mediasoup.org/documentation/v3/mediasoup/api/#PlainTransportOptions
    plainTransportOptions: {
      listenIp: {
        ip: process.env.MEDIASOUP_LISTEN_IP || "127.0.0.1",
        announcedIp: process.env.MEDIASOUP_ANNOUNCED_IP || "127.0.0.1",
      },
      maxSctpMessageSize: 262144,
    },
  },
};

Thanks for the help,

Check the FAQ in mediasoup website.

announcedip set your localip so in your local network can visit

127.0.0.1 can be only visited on the server side

Hi Poovarasan,
Did you ever get the demo working for you? What did you modify? I have the same issue (no errors in client console or on the server stdout, and my config.js was modified with externally accessible IPs for ip and announcedIp (for webRtcTransportOptions and plainTransportOptions). Still, when the second user joins the room, there is no audio/video of the other participant, except the following info:

audio

id: 60e54780-eb1d-4f66-8ac9-79c533c1f275
codec: opus
score:10, producerScore:0, producerScores:[0]

video

id: ed389479-169a-4ddd-835e-9ba02b060b36
codec: VP8
resolution: 0x0
current spatial-temporal layers: undefined undefined
preferred spatial-temporal layers: 2 2 [ down ] [ up ]
priority: 1 [ down ] [ up ]
[ request keyframe ]
score:10, producerScore:0, producerScores:[0,0,0]

I tried different combinations of client/server connections ( user1 from server machine, user2 from another machine; user1 and user2 from two different remote machines; user1 and user2 from two different browsers on the same remote machine; user1 from desktop and user2 from iPhone; etc.), but none made any difference. I double checked the FAQ and the instructions on the examples page and reinstalled everything from scratch couple of times too.
If you fixed this problem, please let me know what you did.
Thanks,
Reddy

I fixed by changing announce ip from 127.0.0.1 to my Lan ip 192.168.xx.xx

Poovarasan,

Thanks for your quick reply. I have locally and remotely reachable IPs in my server/config.js and opened required firewall ports as well. I tested the access with telnet/tnc from each computer involved, so network connectivity is also not a problem. I have self-signed certs and are imported into the browsers as well. Here is my server/config.js file:

const os = require('os');

module.exports =
{
    // Listening hostname (just for `gulp live` task).
    domain : process.env.DOMAIN || 'localhost',
    // Signaling settings (protoo WebSocket server and HTTP API server).
    https  :
    {
        listenIp   : '192.168.1.175',
        // NOTE: Don't change listenPort (client app assumes 4443).
        listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
        // NOTE: Set your own valid certificate files.
        tls        :
        {
            cert : process.env.HTTPS_CERT_FULLCHAIN || `${__dirname}/certs/fullchain.pem`,
            key  : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/privkey.pem`
        }
    },
    // mediasoup settings.
    mediasoup :
    {
        // Number of mediasoup workers to launch.
        numWorkers : Object.keys(os.cpus()).length,
        // mediasoup WorkerSettings.
        // See https://mediasoup.org/documentation/v3/mediasoup/api/#WorkerSettings
        workerSettings :
        {
            logLevel : 'debug',
            logTags  :
            [
                'info',
                'ice',
                'dtls',
                'rtp',
                'rtcp',
                'rtx',
                'bwe',
                'score',
                'simulcast',
                'svc',
                'sctp'
            ],
            rtcMinPort : process.env.MEDIASOUP_MIN_PORT || 40000,
            rtcMaxPort : process.env.MEDIASOUP_MAX_PORT || 49999
        },
        // mediasoup Router options.
        // See https://mediasoup.org/documentation/v3/mediasoup/api/#RouterOptions
        routerOptions :
        {
            mediaCodecs :
            [
                {
                    kind      : 'audio',
                    mimeType  : 'audio/opus',
                    clockRate : 48000,
                    channels  : 2
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/VP8',
                    clockRate  : 90000,
                    parameters :
                    {
                        'x-google-start-bitrate' : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/VP9',
                    clockRate  : 90000,
                    parameters :
                    {
                        'profile-id'             : 2,
                        'x-google-start-bitrate' : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/h264',
                    clockRate  : 90000,
                    parameters :
                    {
                        'packetization-mode'      : 1,
                        'profile-level-id'        : '4d0032',
                        'level-asymmetry-allowed' : 1,
                        'x-google-start-bitrate'  : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/h264',
                    clockRate  : 90000,
                    parameters :
                    {
                        'packetization-mode'      : 1,
                        'profile-level-id'        : '42e01f',
                        'level-asymmetry-allowed' : 1,
                        'x-google-start-bitrate'  : 1000
                    }
                }
            ]
        },
        // mediasoup WebRtcTransport options for WebRTC endpoints (mediasoup-client,
        // libmediasoupclient).
        // See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
        webRtcTransportOptions :
        {
            listenIps :
            [
                {
                    ip          : process.env.MEDIASOUP_LISTEN_IP || '192.168.1.175',
                    announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP || '192.168.1.175'
                }
            ],
            initialAvailableOutgoingBitrate : 1000000,
            minimumAvailableOutgoingBitrate : 600000,
            maxSctpMessageSize              : 262144,
            // Additional options that are not part of WebRtcTransportOptions.
            maxIncomingBitrate              : 1500000
        },
        // mediasoup PlainTransport options for legacy RTP endpoints (FFmpeg,
        // GStreamer).
        // See https://mediasoup.org/documentation/v3/mediasoup/api/#PlainTransportOptions
        plainTransportOptions :
        {
            listenIp :
            {
                ip          : process.env.MEDIASOUP_LISTEN_IP || '192.168.1.175',
                announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP || '192.168.1.175'
            },
            maxSctpMessageSize : 262144
        }
    }
};

I have browser console output same as yours and server side log has no errors (I increased log level to ‘debug’). With all these, chat is disabled, audio and video of 2nd participant is not shown.

I appreciate if you would be able to point where could be the problem.

Thanks,
Reddy

I finally got the demo working from windows desktop browsers (not able to get it work with iOS or Linux yet). I am making a list of things I had to do in the last four days. I will share that soon in case others get stuck and need some pointers.

Thanks,
Reddy

1 Like
# Linux OS: OpenSUSE Leap 15.2

# To make the MediaSoup install command succeed, you need to do the following:
zypper install nodejs12 # installs NodeJS v12 (node.js >=10.00 is required)

# The following packages are required to compile MediaSoup C++.
# Packages in [...] are optional - only needed if you want to debug C++
# or develop extensions or integrate/customize MediaSoup code
zypper install python3 make cmake clang gcc gcc-c++ [libstdc++-devel gdb]

# MediaSoup Installation command:
npm install mediasoup@3 --save # you must complete below prereqs before this

# Now you are ready to proceed with MediaSoup-Demo
# https://github.com/versatica/mediasoup-demo
# Follow all the instructions through "Run it locally" section
# It says "Enjoy" at the end, but I could not because it did not work yet.
# Here is what more I had to do
# My linux browsers (firefox and chromium on OpenSUSE) are not ready for this demo
# So, I had to test the demo from browsers on other machines.
# First and foremost: Make sure you edit server/config.js file with correct values
# Correct values depend on your environment, but here is a guide:
# (1) Certificates: Make sure your certificates (either self-signed or purchased from CA)
# are in the correct location and server/config.js points to it and the permissions
# on the cert filesare good
# (2) Update all the "ip" and "announcedIp" values are filled with an IP address and
# make sure that IP address is accessible from all the client machines
# (3) Default ports in the server/config.js are 4443 for https and 3000 for client and
# 40000-49999 in workerSettings, so "open" these ports through firewall as below:
# firewall-cmd --zone=public --add-port 4443/tcp
# firewall-cmd --zone=public --add-port 3000/tcp
# firewall-cmd --zone=public --add-port 40000-49999/tcp
# do the same with 'udp' in place of tcp (depending on your network)
# From each machine where you want to run the browser client, test connectivity:
# You can use 'tnc' or 'telnet' in windows powershell/command prompt
# If you used self-signed certs, you need to import them into your browser first
# Otherwise, you will see 'Failed to GET' or 'Cannot GET' or some other weird message
# when you open the client URL (https://IP:3000/info=true) in the browser
# so, open (https://IP:4443/) and allow the self-signed certficate by proceeding.
# After these steps, You may be able to get the conferencing successfully, but
# if not, you will need to change the 'logLevel: debug' in the server/config.js and restart
# the server and on the client browser press CTRL+SHIFT+i to enable debugger and goto console
# to see the messages. These might give you a clue about what else is failing. Good luck.