Steaming application with simple peer error

Question

I am currently building a streaming application using Laravel 9, react Js, Laravel echo, pusher and simple peer but I am facing an issue on the viewer side of the application I am not able to get the streamer video and audio this is the error i am currently getting

Uncaught Error: Connection failed. at p._onConnectionStateChange (simplepeer.min.js:6:91542) at _pc.onconnectionstatechange (simplepeer.min.js:6:81452) _onConnectionStateChange @ simplepeer.min.js:6 _pc.onconnectionstatechange @ simplepeer.min.js:6

the video and audio working on the viewer side of the application

enter code here

import React,{useEffect, useRef, useState} from 'react'
import ReactDOM from 'react-dom';
import axios from 'axios'
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
import Peer from  'simple-peer/simplepeer.min.js';
export default function Viewer() {
    const [broadcasterId, setBroadcasterId] = useState(null)
    const vidRef = useRef();
    window.Pusher = Pusher;
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: import.meta.env.VITE_PUSHER_APP_KEY,
        wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
        wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
        wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
        forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
        enabledTransports: ['ws', 'wss'],
        cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER
    });

    const handleViewer =()=>{
        initializeStreamingChannel()
        initializeSignalOfferChannel()
    }

    function initializeStreamingChannel(){
       let streamingPresenceChannel = window.Echo.join(`streaming-channel.${streamId}`)

    }


    function initializeSignalOfferChannel(){
       window.Echo.private(`stream-signal-channel.${myid}`).listen('StreamOffer',
        ({data}) => {
            setBroadcasterId(data.broadcaster);
            createViewerPeer(data.offer, data.broadcaster);

          }
        )

    }



    function createViewerPeer(offer, broadcaster){
        console.log(offer)
           let peer = new Peer({
            initiator: false,
            trickle: false,
            config: {
              iceServers: [
                {
                  urls:['stun:stun1.1.google.com:19302', 'stun:stun2.1.google.com:19302']
                },
                // {
                //   urls: this.turn_url,
                //   username: this.turn_username,
                //   credential: this.turn_credential,
                // },
              ],
            },

           });
           peer.addTransceiver("video", { direction: "recvonly" });
           peer.addTransceiver("audio", { direction: "recvonly" });
           handlePeerEvents(peer, offer, broadcaster)
    }

    function handlePeerEvents(peer, offer, broadcaster){

        peer.on("signal", (data) => {
            let formData = new FormData();
            formData.append("broadcaster",  broadcaster)
            formData.append("answer", data)
            axios.post("http://127.0.0.1:8000/stream-answer", formData)
              .then((res) => {
                console.log(res);
              })
              .catch((err) => {
                console.log(err);
              });
          });


          peer.on("stream", (stream) => {
            console.log(stream)
            // display remote stream
            vidRef.current.srcObject = stream
       
          });

          peer.on("track", (track, stream) => {
            console.log("onTrack");
          });

          peer.on("connect", () => {
            console.log("Viewer Peer connected");
          });


          peer.on("close", () => {
            console.log("Viewer Peer closed");
            peer.destroy();
          });


          const updatedOffer = {
            ...offer,
            sdp: `${offer.sdp}\n`,
          };

          peer.signal(updatedOffer);
    }

    return (
        <div>

            Viewer
            <video  style={{width:'500px', height:'420px' }} autoPlay={true} ref={vidRef} >
            </video>
           <button onClick={handleViewer}>join stream</button>
        </div>
    )
}

if (document.getElementById('view')) {
    ReactDOM.render(<Viewer/>, document.getElementById('view'));
}