mediasoup no audio video remote peers

hi
i have local setup for mutiple vuejs applications with mediasoup node server from mediasoup-demo and i have apache server using him as reverse proxy server with vhost to access to the projects and connect them to each others all of them at the same machine

on mediasoup server signaling process working fine but when remote access to room data events triggered but media tracks not working even thier readyState is live and no errors showing at mediasoup server console

i tried to open the required ports at windows firewall also i tried forceTcp
i have noticed ICE candidate grid empty on all nodes


Problem Solved
it was configuration issue thanks to chat GPT

announcedIp should be dns name testing.myDomain.test

Hi, how do you solve this?
I tried to make my local server accessible globally using Cloudflare Tunneling (zero trust), but it only sends a blank video and doesn’t produce any sound. The producer connection state is connected, and the consumer is connected as well.

it seems like your problem a little bit diffrent from mine in my case i was not getting connections at all even data transactions between prees was working

i am working at windows machine so first step i did was opening inbound ports for both protocols
also i defined ssl certs using this tool
mindscms’s gists (github.com)

also here is my v host configs

<VirtualHost *:80 *:443>
 ServerName signal.careerty.net
 ProxyPreserveHost On
 ProxyPass / http://localhost:4443/
 ProxyPassReverse / http://localhost:4443/
 
 RewriteEngine On
 RewriteCond %{HTTP:Upgrade} websocket [NC]
 RewriteRule /(.*) ws://localhost:4443/$1 [P,L]
 
 SSLEngine on
 SSLCertificateFile "cert/signal.careerty.net/server.crt"
 SSLCertificateKeyFile "cert/signal.careerty.net/server.key"
</VirtualHost>

also you need to define hosts on hosts file

on clinent app my url factory function

let protooPort = 4443

if (window.location.hostname === 'test.mediasoup.org') protooPort = 4444

export function getProtooUrl({ roomId, peerId, forceH264, forceVP9 }: { roomId: string, peerId: string, forceH264: boolean, forceVP9: boolean }) {
  const hostname = 'window.location.hostname ' // window.location.hostname
  let url = `wss://signal.careerty.net:4443/?roomId=${roomId}&peerId=${peerId}`
//   let url = `wss://${hostname}:${protooPort}/?roomId=${roomId}&peerId=${peerId}`

  if (forceH264) url = `${url}&forceH264=true`
  else if (forceVP9) url = `${url}&forceVP9=true`
  url=`${url}&forceTcp=true`
  return url
}

finally here is my mediasoup server config fike

/**
 * 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 || 'signal.careerty.net',
	// Signaling settings (protoo WebSocket server and HTTP API server).
	https  :
	{
		listenIp   : '127.0.0.1',
		// 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/server.crt`,
			key  : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/server.key`
		}
	},
	// 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 :
		{
			dtlsCertificateFile : process.env.WORKER_CERT_FULLCHAIN || `${__dirname}/certs/server.crt`,
			dtlsPrivateKeyFile  : process.env.WORKER_CERT_PRIVKEY || `${__dirname}/certs/server.key`,
			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 WebRtcServer options for WebRTC endpoints (mediasoup-client,
		// libmediasoupclient).
		// See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcServerOptions
		// NOTE: mediasoup-demo/server/lib/Room.js will increase this port for
		// each mediasoup Worker since each Worker is a separate process.
		webRtcServerOptions :
		{
			listenInfos :
			[
				{
					protocol    : 'udp',
					ip          : process.env.MEDIASOUP_LISTEN_IP || '127.0.0.1',
					announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP || 'signal.careerty.net',
					port        : 44444
				},
				{
					protocol    : 'tcp',
					ip          : process.env.MEDIASOUP_LISTEN_IP || '127.0.0.1',
					announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP || 'signal.careerty.net',
					port        : 44444
				}
			]
		},
		// mediasoup WebRtcTransport options for WebRTC endpoints (mediasoup-client,
		// libmediasoupclient).
		// See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
		webRtcTransportOptions :
		{
			// listenIps is not needed since webRtcServer is used.
			// However passing MEDIASOUP_USE_WEBRTC_SERVER=false will change it.
			listenIps :
			[
				{
					ip          : process.env.MEDIASOUP_LISTEN_IP || '127.0.0.1',
					announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP || 'signal.careerty.net'
				}
			],
			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 || 'signal.careerty.net'
			},
			maxSctpMessageSize : 262144
		}
	}
};

i hope that could help you

There is no difference between your configuration and mine. I tried setting my announced IP using a domain, and the IP is my local IP like your method. The result is that the producer state only attempts to connect (not connected) and then fails.

When I use only the private IP and do not set my announced IP, the producer state is connected. However, when a new user joins from the same network, the consumer state is connected, and the video is displayed. But when another user joins from a different network, it will display a blank video.

I wonder if it only receives a blank video because the IP is not accessible publicly. I have also deployed my project using a VPS, and it works fine. However, it’s not working on my local server that I published using Cloudflare Zero Trust.

I hope to receive some insights regarding this because I’m not familiar with this kind of stuff.

Thank you for your reply.