I am working on a Vite-TS based React application and a Janus Gateway WebRTC server with Record&Play plugin; the application peer ideally initiates everything, provides a media stream, and the remote peer changes the stream into .mjr recordings.
I am using react-webcam, simple-peer, webrtc-adapter, and react-use-websocket packages to prop up the application's WebRTC parts and its supported features. The underlying websocket connection from the app is implemented with a hook from react-use-websocket. There is a sample HTML file dispatched by Janus server that completes all handshakes, processes, functions competently. But, the component can't seem to complete the ICE server connection and to get the Janus server.
Checked through the webrtc-internals console. Some resources suggested a firewall/NAT configuration issue, but the sample HTML file is working just fine through the same ICE server lists, dev environment, and so on. The connection initially stalled after a local SDP offer is generated in simple-peer's signal section. Minor breakthrough showed up by sending peer.signal() along with the outgoing websocket messages. Now, the connection are stalling and failing while the webrtc-internals logs show a connecting phase. The most I've gotten as an error message is 'ICE Failed'
Any kind of input is sorely welcome. Please help.
Posted the code and the internals-log in this gist here: https://gist.github.com/sidharthk9/79122fa47f0fc6fb8829f05474f2a794
Here's the server log:
Creating new session. Creating new handle in session. Creating ICE agent (ICE Full mode, controlled). [WARN] Skipping unsupported application media line. [WARN] ICE failed for component 1 in stream 1, but let's give it some time... (trickle pending, answer received, alert not set).
Ditched the simple-peer package for the browser's built-in RTCPeerConnection. Handled everything with peerConnection's exposed functions and conditions. Everything works and the feature is in production now.