webRTC videocall, remote stream is blank when call answered but no errors thrown. Where has the video gone?

Question

I'm trying to implement a video call in a react web app using Firebase to manage offers and answers. When I run the app and start a call through localhost and join the call in another tab, everything works as it should. However when I try to join a call on a different device, the local stream comes up on screen but there is no remote stream for either user. I'm only new to using webrtc and react so I am lacking in knowledge, any help is appreciated

componentDidMount() {
    const firestore = firebase.firestore();

    const servers = {
        iceServers: [
            {
                urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'],
            },
        ],
        iceCandidatePoolSize: 10,
    };

    // Global State
    const pc = new RTCPeerConnection(servers);
    let localStream = navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => this.videoTag.current.srcObject = stream)
        .catch(console.log);;;
    let remoteStream = null;

    // HTML elements
    const webcamButton = document.getElementById('webcamButton');
    const webcamVideo = document.getElementById('webcamVideo');
    const callButton = document.getElementById('callButton');
    const callInput = document.getElementById('callInput');
    const answerButton = document.getElementById('answerButton');
    const remoteVideo = document.getElementById('remoteVideo');
    const hangupButton = document.getElementById('hangupButton');

    // remoteVideo.play();

    webcamButton.onclick = async () => {
        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        remoteStream = new MediaStream();

        // Push tracks from local stream to peer connection
        localStream.getTracks().forEach((track) => {
            pc.addTrack(track, localStream);
        });

        // Pull tracks from remote stream, add to video stream
        pc.ontrack = (event) => {
            event.streams[0].getTracks().forEach((track) => {
                remoteStream.addTrack(track);
            });
        };

        webcamVideo.srcObject = localStream;
        remoteVideo.srcObject = remoteStream;
        //webcamVideo.play();
        callButton.disabled = false;
        answerButton.disabled = false;
        webcamButton.disabled = true;
    };

    // 2. Create an offer
    callButton.onclick = async () => {
        // Reference Firestore collections for signaling
        const callDoc = firestore.collection('calls').doc();
        const offerCandidates = callDoc.collection('offerCandidates');
        const answerCandidates = callDoc.collection('answerCandidates');

        callInput.value = callDoc.id;

        // Get candidates for caller, save to db
        pc.onicecandidate = (event) => {
            event.candidate && offerCandidates.add(event.candidate.toJSON());
        };

        // Create offer
        const offerDescription = await pc.createOffer();
        await pc.setLocalDescription(offerDescription);

        const offer = {
            sdp: offerDescription.sdp,
            type: offerDescription.type,
        };

        await callDoc.set({ offer });

        // Listen for remote answer
        callDoc.onSnapshot((snapshot) => {
            const data = snapshot.data();
            if (!pc.currentRemoteDescription && data?.answer) {
                const answerDescription = new RTCSessionDescription(data.answer);
                pc.setRemoteDescription(answerDescription);
            }
        });

        // When answered, add candidate to peer connection
        answerCandidates.onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
                if (change.type === 'added') {
                    const candidate = new RTCIceCandidate(change.doc.data());
                    pc.addIceCandidate(candidate);
                }
            });
        });

        hangupButton.disabled = false;
    };

    // 3. Answer the call with the unique ID
    answerButton.onclick = async () => {
        const callId = callInput.value;
        const callDoc = firestore.collection('calls').doc(callId);
        const answerCandidates = callDoc.collection('answerCandidates');
        const offerCandidates = callDoc.collection('offerCandidates');

        pc.onicecandidate = (event) => {
            event.candidate && answerCandidates.add(event.candidate.toJSON());
        };

        const callData = (await callDoc.get()).data();

        const offerDescription = callData.offer;
        await pc.setRemoteDescription(new RTCSessionDescription(offerDescription));

        const answerDescription = await pc.createAnswer();
        await pc.setLocalDescription(answerDescription);

        const answer = {
            type: answerDescription.type,
            sdp: answerDescription.sdp,
        };

        await callDoc.update({ answer });

        offerCandidates.onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
                console.log(change);
                if (change.type === 'added') {
                    let data = change.doc.data();
                    pc.addIceCandidate(new RTCIceCandidate(data));
                }
            });
        });
        //remoteVideo.play()
        console.log(remoteVideo)
    };

}

render() {

    return (
        
            
                
                
                    
                    
                    
                        
                            
                            
                        
                        
                            
                            
                            
                        
                    
                
                } />
                
                WebRTC Demo
            
            
                1. Start your Webcam
                
                    
                        Local Stream
                        
                    
                    
                        Remote Stream
                        
                    


                

                
                2. Create a new Call
                

                3. Join a Call
                Answer the call from a different browser window or device

                
                

                4. Hangup

                

            
        

    )
}

webRTC videocall, remote stream is blank when call answered but no errors thrown. Where has the video gone?

0 Answers