upd

src/components/PixelStreamingWrapper2.tsx

@@ -10,10 +10,12 @@ import {
 
 export interface PixelStreamingWrapperProps {
   initialSettings?: Partial<AllSettings>;
+  onVideoInitialized: () => void;
 }
 
 export const PixelStreamingWrapper2 = ({
   initialSettings,
+  onVideoInitialized,
 }: PixelStreamingWrapperProps) => {
   // A reference to parent div element that the Pixel Streaming library attaches into:
   const videoParent = useRef<HTMLDivElement>(null);
@@ -38,6 +40,10 @@ export const PixelStreamingWrapper2 = ({
         setClickToPlayVisible(true);
       });
 
+      streaming.addEventListener("videoInitialized", () => {
+        onVideoInitialized();
+      });
+
       // Save the library instance into component state so that it can be accessed later:
       setPixelStreaming(streaming);
 

src/components/modals/stream/LoadingModal.tsx

@@ -0,0 +1,27 @@
+import { Trans } from "react-i18next";
+
+function LoadingModal() {
+  return (
+    <div className="flex items-center justify-center w-full h-full bg-opacity-50 backdrop-blur-2xl">
+      <div className={`bg-white rounded-lg p-12 w-[396px]`}>
+        <div className="mb-6">
+          <p className="text-2xl font-semibold">
+            <Trans i18nKey={"pleaseWait"}>Пожалуйста, подождите</Trans>
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <img
+            src="/icons/LoaderPrimary.png"
+            alt=""
+            className="w-8 h-8 animate-spin"
+          />
+          <p className="font-semibold text-[#49A1F5]">
+            <Trans i18nKey={"connection"}>Подключение</Trans>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoadingModal;

src/pages/StreamPage3.tsx

@@ -33,6 +33,7 @@ import { useFullscreen } from "ahooks";
 import InviteModal from "../components/modals/stream/InviteModal";
 import Tooltip from "../components/Tooltip";
 import { toast, ToastContainer } from "react-toastify";
+import LoadingModal from "../components/modals/stream/LoadingModal";
 
 // import MoreIcon from "../components/icons/MoreIcon";
 
@@ -69,6 +70,8 @@ function StreamPage3() {
   const [, setEndAt] = useState<Date>();
   const fullscreenRef = useRef(null);
   const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);
+  const [isVideoInitialized, setIsVideoInitialized] = useState<boolean>(false);
+  const [step, setStep] = useState<number>(1);
 
   async function startCall(remotePeerId: string) {
     if (!peerInstance) return;
@@ -120,7 +123,17 @@ function StreamPage3() {
   }
 
   function initPeer() {
-    const peer = new Peer();
+    const peer = new Peer({
+      config: {
+        iceServers: [
+          {
+            urls: "turn:194.26.138.94:3478", // Replace with your TURN server URL
+            username: "username1", // Replace with your TURN username
+            credential: "password1", // Replace with your TURN credential
+          },
+        ],
+      },
+    });
 
     peer.on("open", (id) => {
       setPeerId(id);
@@ -232,6 +245,11 @@ function StreamPage3() {
     }, 500);
   }
 
+  function handleSetName() {
+    setStep(2);
+    getUserMedia();
+  }
+
   async function getWSUrl() {
     const activeSession = await getActiveSession();
 
@@ -244,7 +262,7 @@ function StreamPage3() {
     setWSUrl(
       `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.name}/${activeSession.cirrusPort}/`
     );
-    setModal(<SetNameModal onAction={getUserMedia} />);
+    setModal(<SetNameModal onAction={handleSetName} />);
 
     checkSessionStatus();
   }
@@ -293,6 +311,16 @@ function StreamPage3() {
     initPeer();
   }, [permission]);
 
+  useEffect(() => {
+    if (step !== 2) return;
+
+    if (!isVideoInitialized) {
+      setModal(<LoadingModal />);
+    } else {
+      setModal(null);
+    }
+  }, [step, isVideoInitialized]);
+
   useEffect(() => {
     if (!peerId) return;
 
@@ -466,6 +494,7 @@ function StreamPage3() {
                   HoveringMouse: true,
                   WaitForStreamer: true,
                 }}
+                onVideoInitialized={() => setIsVideoInitialized(true)}
               />
             )}