not working in nextjs14

[Piyushsomething]

i been using it in node express where its been working perfectly fine with that loadPlayer of rtsp but when i read the docs and try implementing in frontend with nextjs nothing is showing, but in network tab its visble the websockets are working perfectly but player is not working

Kindly provide me a fix for this my code

"use client";
import React, { useRef, useEffect } from "react";
import { loadPlayer } from "rtsp-relay/browser";

const DaylightStream = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;

    if (!canvas) {
      throw new Error("Canvas ref is null");
    }

    loadPlayer({
      url: "ws://localhost:2000/api/stream/camera3",
      canvas,
    });
  }, []);

  return (
    <div>
      <h1>Daylight Stream</h1>
      <div className="border-8 border-black">
        <canvas
          style={{ width: "100%", height: "100%", border: "1px solid blue" }}
          ref={canvasRef}
        />
      </div>
    </div>
  );
};

export default DaylightStream;

my network tab for help

Also the console is clean nothing is showing .

[Piyushsomething]

oh i got this resolved by using this concept instead of useEffect

"use client";
import React, { useRef, useEffect, useState } from "react";
import { loadPlayer } from "rtsp-relay/browser";

const DaylightStream = () => {
  const [player, setPlayer] = useState(null);
  const [isPaused, setPaused] = useState(false);
  const canvas = useRef(null);

  const handleStartStreamClick = async () => {
    if (!canvas.current) throw new Error("Ref is null");

    const Player = await loadPlayer({
      url: "ws://localhost:2000/api/stream/camera3",
      canvas: canvas.current,

    });
    setPlayer(Player);
  };

  const handlePauseStreamClick = () => {
    player.pause();
    setPaused(true);
  };

  const handleResumeStreamClick = () => {
    player.play();
    setPaused(false);
    console.log(player);
  };

  return (
    <div>
      <h1>Daylight Stream</h1>
      <div className="border-8 border-black">
        <canvas ref={canvas} />
      </div>
      <div>
        <button
          className="btn"
          onClick={handleStartStreamClick}
          disabled={player}
        >
          Start Stream
        </button>
        <button
          className="btn"
          onClick={handlePauseStreamClick}
          disabled={!player || isPaused}
        >
          Pause Stream
        </button>
        <button
          className="btn"
          onClick={handleResumeStreamClick}
          disabled={!player || !isPaused}
        >
          Resume Stream
        </button>
      </div>
    </div>
  );
};

export default DaylightStream;