webRTC connection creating in firefox only , other browsers are not creating

All I learing the webRTC. To prectis webRTC I create one project in php. Use the webSoteck for signaling. In this project only webRTC connection will establish and text message will send to p2p to verify the connection.

When I test it in firefox it work well, p2p connection is establish and getting the message also. But when I check it in chrome,Brave and opera the p2p connection is not establish.

I check the SDP, In firefox SDP length is more then other browsers SDP. I think it is ICE that not creating.

To verify it I add the “onicecandidate” to listion the events of the ice and when I run it all browsers and logs got only in firefox.

What i am missing can you help to solve it ?

This is my JS file.

const sender = "sender";
const receiver = "receiver";
let code = 0;
const stun_server = {
iceServers: [
{
urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'],
}
],
iceCandidatePoolSize: 10,
}

let pc = new RTCPeerConnection(stun_server);

pc.onicecandidate = event => {
console.log('ICE candidate Event trigger :',event.candidate);
}

function startWebSocket(role){
try {
console.log(role);
socket = new WebSocket("ws://127.0.0.1:8080");

        var socketOpen = (e) => {
            console.log("socket connect successfully...");
            startWebRTC(role);
        }
    
        var socketMessage = (e) => {
            console.log(`Message from socket... : ${e.data}`);
            
            let response = JSON.parse(e.data);
            let offer_or_answer = response.ICE;
            if(response.role == "sender") {
                createAnswer(offer_or_answer);                
            } else if(response.role == "receiver") {
                handleAnswer(offer_or_answer);
            }
        }
    
        var socketClose = (e) => {
            console.log(`socket Closed...`);
            socket.close();
        }
    
        var socketError = (e) => {
            console.error(`socket Error : ${e.data}`);
        }
        
    
        socket.addEventListener("open",socketOpen);
        socket.addEventListener("message", socketMessage);
        socket.addEventListener("close", socketClose);
        socket.addEventListener("error", socketError);
    
    
    } catch(error) {
        showCatchError('startWebSocket : unable to connect with server : ',error);
    }

}

function startWebRTC(role) {
try {

        console.log('webRTC Start......');
        if(role == sender) {
            createTheOffer(role);
        } else if(role == receiver) {
            if(code.trim() === '') {
                alert('Please enter Connection Code');
                return false;
            }
            inquiryByCode(code, role);
        };
    
        createChannel();
        
    } catch(error) {
        showCatchError('startWebRTC : unable to start webRTC : ',error);
    }

}

function createTheOffer(role) {
try {

        pc.createOffer().then(offer => pc.setLocalDescription(offer)).then(() => {
            console.log(`the SDP start for ${role}.......`);
    
            if(role == 'sender'){
                code = Math.floor(Math.random() * 9000) + 1000;
                alert(`Connection Code : ${code}` );
                
            } else if(role == 'receiver') {
                code = document.querySelector('#connection_code').value;
                if(code.trim() === '') {
                    alert('Please enter Connection Code');
                    return false;
                }
            }
            
            let Msg = {
                    role: role,
                    code: code,
                    type: 'connection',
                    ICE: pc.localDescription
                };
    
            sendMessageToServer(Msg);
        });
        createChannel();
    
    } catch(error) {
        showCatchError('createTheOffer : unable to create offer : ',error);
    }

}

async function createAnswer(offer) {
console.log('Send Answer.....');
await pc.setRemoteDescription(offer);
pc.createAnswer().then(answer => {

        pc.setLocalDescription(answer);
        console.log(`answer: ${answer}`);
        let Msg = {
            role: 'receiver',
            code: code,
            type: 'answer',
            ICE: answer
        };
    
        sendMessageToServer(Msg);
    });

}

async function handleAnswer(answer) {
console.log(`Handle Answer.....${answer}`);
await pc.setRemoteDescription(new RTCSessionDescription(answer));
}

function inquiryByCode(code, role){
try {

        let Msg = {
            role: role,
            code: code,
            type: 'connection',
            ICE: pc.localDescription
        };
        sendMessageToServer(Msg);
    
    } catch(error) {
        showCatchError('inquiryByCode : unable to send inquiry : ',error);   
    }

}

function createChannel() {

    try {
         
        const dataChannel = pc.createDataChannel('textChannel');
        console.log('DATA CHANNEl START');
        
        dataChannel.onopen = () => {
            console.log('Data channel opened');
            document.querySelector('#send_button').addEventListener('click', function() {
                let user_message = document.querySelector('#send_message').value;
                sendMessage(user_message);
            });
        };
        
        dataChannel.onerror = function(error) {
            console.log('DATA CHANNEl ERROR : ',error);
            showCatchError("Data channel error :",error);
            // Handle the error here
        };
    
        // Receiver side
        pc.ondatachannel = (event) => {
            const dataChannel = event.channel;
            
            dataChannel.onmessage = (event) => {
                console.log('Received message:', event.data);
                // Handle the received message
            };
        };
        
        // Sending text message from sender to receiver
        function sendMessage(message) {
            if (dataChannel.readyState === 'open') {
                dataChannel.send(message);
                console.log('Message sent:', message);
            } else {
                console.error('Data channel not open');
            }
        }
    
    } catch(error) {
        showCatchError('createChannel : unable to create channel : ',error);
    }

}

    function sendMessageToServer(Msg) {
            try {
                socket.send(JSON.stringify(Msg));
            } catch(error) {
                showCatchError('sendMessageToServer : unable to send : ',error);
        }
    }

function checkPeerConnectionState() {
console.log(`Configuration :`,pc);
console.log(`ICE connection state `, pc.iceConnectionState);
}

function showCatchError(msg, error){
console.error(msg, error.message);
}