RTCPeerConnectionIceErrorEvent with react-client-sdk "STUN server address is incompatible."

[Codename-404]

Hi, I was following your instruction but, I am always getting this error when trying to share screen. "STUN server address is incompatible."
Also when I was trying to add multiple peers, it's keeps connecting, but never connects.
Looking forward to hearing from you ~
Thank you ~

isTrusted
: 
true
address
: 
"[0:0:0:x:x:x:x:x]"
bubbles
: 
false
cancelBubble
: 
false
cancelable
: 
false
composed
: 
false
currentTarget
: 
RTCPeerConnection {localDescription: RTCSessionDescription, currentLocalDescription: RTCSessionDescription, pendingLocalDescription: null, remoteDescription: RTCSessionDescription, currentRemoteDescription: RTCSessionDescription, …}
defaultPrevented
: 
false
errorCode
: 
701
errorText
: 
"STUN server address is incompatible."
eventPhase
: 
0
hostCandidate
: 
"[0:0:0:x:x:x:x:x]:63273"
port
: 
63273
returnValue
: 
true
srcElement
: 
RTCPeerConnection {localDescription: RTCSessionDescription, currentLocalDescription: RTCSessionDescription, pendingLocalDescription: null, remoteDescription: RTCSessionDescription, currentRemoteDescription: RTCSessionDescription, …}
target
: 
RTCPeerConnection {localDescription: RTCSessionDescription, currentLocalDescription: RTCSessionDescription, pendingLocalDescription: null, remoteDescription: RTCSessionDescription, currentRemoteDescription: RTCSessionDescription, …}
timeStamp
: 
136413.20000004768
type
: 
"icecandidateerror"
url
: 
"stun:192.168.43.144:50015"
[[Prototype]]
: 
RTCPeerConnectionIceErrorEvent```

[mickel8]

Hi @Codename-404, it's pretty hard to say anything basing on your log. Do you have any adblockers, vpns or anything that can impact your network configuration? Could you please share your code or try to run our jellyfish_videoroom app?

[Codename-404]

Hi @mickel8 ~
Thank you for your response.
I can of course share my code, it was the same as the simple react demo, I was just trying out the sdks.
I also tried downloading the example package and with the live dashboard. The same error.
I found that, on the dashboard, when I start a new room it connects me to my_ip:5002, as soon as it does that it starts showing error,
"Error while connecting to server websocket, consider changing to secure connection." and
"Cannot connect to Jellyfish server".
However I can still create rooms, add peers, and the server shows the logs. But it doesn't share any tracks.

My code below,

import React, { useEffect, useState } from "react";
import {
  create,
  SCREEN_SHARING_MEDIA_CONSTRAINTS,
} from "@jellyfish-dev/react-client-sdk";
import VideoPlayer from "./VideoPlayer";
import axios from "axios";
import apiUrls from "@/app/utils/client/data/apiUrls";

export const {
  useStatus, // Hook to check the status of the connection
  useConnect, // Hook to connect to the server
  useDisconnect, // Hook to disconnect from the server
  JellyfishContextProvider, // Context provider
  useTracks, // Hook to get the tracks from the server
  useApi,
} = create();

export function LiveStreamPage({ roomId, peer_id, peer_token }) {
  const [token, setToken] = useState("");
  // Use the built-in hook to check the status of the connection
  const status = useStatus();
  const connect = useConnect();
  const disconnect = useDisconnect();
  const tracks = useTracks();

  const webrtcApi = useApi();

  function startScreenSharing() {
    // Get screen sharing MediaStream
    navigator.mediaDevices
      .getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS)
      .then((screenStream) => {
        // Add local MediaStream to webrtc
        screenStream
          .getTracks()
          .forEach((track) =>
            webrtcApi.addTrack(track, screenStream, { type: "screen" })
          );
      });
  }

  const joinRoom = async () => {
    console.log("coming roomId", roomId);

    if (!roomId) {
      console.log("roomId not valid");
      return;
    }

    if (!peer_id && !peer_token) {
      console.log("Getting peer data");
      const joinRoomRes = await axios.get(`${apiUrls.joinRoom}/${roomId}`);

      console.log("joinRoomRes", joinRoomRes);

      const { peer_id: peerId, peer_token: peerToken } = joinRoomRes.data;

      peer_id = peerId;
      peer_token = peerToken;
    }

    if (!peer_id && !peer_token) {
      console.log("peer data still not valid");
      return;
    }

    console.log("connecting with peer data", { peer_id, peer_token });
    connect({
      peerMetadata: { name: "John Doe" }, // example metadata
      token: peer_token,
      // websocketUrl: ws://localhost:5002/socket/peer/websocket
    });
  };

  useEffect(() => {
    joinRoom();
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <input
        value={token}
        onChange={(e) => setToken(() => e?.target?.value)}
        placeholder="token"
      />
      <div style={{ display: "flex", flexDirection: "row", gap: "8px" }}>
        <button
          className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
          disabled={token === "" || status === "joined"} // simple check to avoid errors
          onClick={() => {
            connect({
              peerMetadata: { name: "John Doe" }, // example metadata
              token: token,
            });
          }}
        >
          Connect
        </button>
        <button
          className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
          disabled={status !== "joined"}
          onClick={() => {
            disconnect();
          }}
        >
          Disconnect
        </button>
        <button
          className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
          disabled={status !== "joined"}
          onClick={() => {
            startScreenSharing();
          }}
        >
          Start screen share
        </button>
        <span className="span-status">Status: {status}</span>
      </div>
      <p>total tracks {Object.values(tracks).length}</p>
      <div
        className="w-full grow bg-green-400"
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center", // To align items in the center
          gap: "20px",
        }}
      >
        {Object.values(tracks).map(({ stream, trackId }) => (
          <VideoPlayer key={trackId} stream={stream} /> // pass the stream to the component
        ))}
      </div>
    </div>
  );
}

[Codename-404]

Alright, so it seems to be an issue with how I started the docker container. I followed the documentation initially, did not work. I tried the docker-compose-dev.yaml file from jellyfish_videoroom, and now it works.
I question, is it possible to change the display of hls stream through api? or it's better to change something in the jellyfish server file?