I am working on webrtc to create video call between two users;
i am using regular javascript, below is some of my js code placed in script tag

        let socket;
        let localStream;
        let peerConnections = {};
        const servers = {
            iceServers: [
                {
                    urls: 'stun:stun.l.google.com:19302'
                },
                {
                    urls: 'stun:stun1.l.google.com:19302'
                },
                {
                    urls: 'stun:stun2.l.google.com:19302'
                },
                {
                    urls: 'turn:my server:3478',
                    credential: '***',
                    username: '***'
                }
            ]
        };
        let constraints = {
            video: true,
            audio: true
        };

        let init = async () => {
            await connect();

            socket.on('roomJoined', handleUserJoined);
            socket.on('roomLeft', handleUserLeft);
            socket.on('signal', handleSignal);
            socket.on('kicked', handleKicked);

            localStream = await navigator.mediaDevices.getUserMedia(constraints);
            document.getElementById('user-local').srcObject = localStream;
            document.getElementById('user-local').muted = true;
            document.getElementById('user-local').volume = 0;

            await joinRoom({ roomId: channel, userId: userId });
        };

        let sendSignal = (data) => {
            return new Promise((resolve, reject) => {
                try {
                    socket.emit('signal', { ...data, from: userId });
                    resolve(true);
                } catch (error) {
                    console.log(error);
                    reject(false);
                }
            });
        };

        let handleUserJoined = async (data) => {
            console.log("handleUserJoined >> ", data);
            if (data.userId === userId) {
                return;
            }
            createOffer(data.userId);
        };

        let handleSignal = async (data) => {
            console.log("handleSignal >> ", data);
            if (data?.signal?.type === 'offer') {
                createAnswer(data.from, data?.signal?.offer);
            }

            if (data?.signal?.type === 'answer') {
                addAnswer(data.from, data?.signal?.answer);
            }

            if (data?.signal?.type === 'candidate') {
                if (peerConnections[data.from]) {
                    peerConnections[data.from].addIceCandidate(data?.signal?.candidate);
                }
            }
        };

        let createPeerConnection = async (Id) => {
            console.log("peerConnections >> ", peerConnections);
            if (peerConnections[Id]) {
                return;
            }

            const peerConnection = new RTCPeerConnection(servers);

            const remoteStream = new MediaStream();
            
            let videoElement = document.getElementById(`user-video-${Id}`);
            if (videoElement) {
                videoElement.srcObject = remoteStream;
            } else {
                videoElement = document.createElement('video');
                videoElement.id = `user-video-${Id}`;
                videoElement.autoplay = true;
                videoElement.playsinline = true;
                videoElement.classList.add('video-player');
                videoElement.style.display = 'block';
                videoElement.srcObject = remoteStream;
                document.getElementById('guest-videos').appendChild(videoElement);
            }
            updateGridLayout();

            peerConnection.ontrack = (event) => {
                event.streams[0].getTracks().forEach((track) => {
                    remoteStream.addTrack(track);
                });
            };

            peerConnection.onicecandidate = async (event) => {
                if (event.candidate) {
                    sendSignal({ to: Id, signal: { type: 'candidate', candidate: event.candidate } });
                }
            };

            peerConnection.oniceconnectionstatechange = (event) => {
                console.log("oniceconnectionstatechange >> ", peerConnection.iceConnectionState);
            };

            peerConnection.onconnectionstatechange = (event) => {
                console.log("onconnectionstatechange >> ", peerConnection.connectionState);
            };

            peerConnections[Id] = peerConnection;

            localStream.getTracks().forEach((track) => {
                peerConnection.addTrack(track, localStream);
            });

            videoElement.play();
            document.getElementById('user-local').classList.add('smallFrame');
        };

        let createOffer = async (Id) => {
            console.log("createOffer >> ", Id);
            await createPeerConnection(Id);

            let offer = await peerConnections[Id].createOffer();
            await peerConnections[Id].setLocalDescription(offer);

            sendSignal({ to: Id, signal: { type: 'offer', offer: offer } });
        }

        let createAnswer = async (Id, offer) => {
            await createPeerConnection(Id);

            await peerConnections[Id].setRemoteDescription(offer);

            let answer = await peerConnections[Id].createAnswer();
            await peerConnections[Id].setLocalDescription(answer);

            sendSignal({ to: Id, signal: { type: 'answer', answer: answer } });
        }

        let addAnswer = async (Id, answer) => {
            if (!peerConnections[Id].currentRemoteDescription) {
                await peerConnections[Id].setRemoteDescription(answer);
            }
        }

        init();

when one user connects with windows laptop and other user with iphone
the windows user is able to see and hear iphone user but iphone user is not able to see windows user or hear user
searched for solution; even added .play() method but still not working and not able to find out problem.