WebRTC react stream multiple tracks issue. Camera + Screen Share

Question

I am working on a new website. You can join room calls and make a voicecall so use your webcam but you can also share your screen.

The problem is when i add the track to the stream the peer doesn't work more... I don't know how to solve this. I also tried to change the code from adding the track to adding a new stream or anything else but cannot find a solution. Can anyone help me?

Client:

export default function Meeting(props) {
const userVideo = useRef();
const partnerVideo = useRef();
const screenShare = useRef();
const peerRef = useRef();
const socketRef = useRef();
const otherUser = useRef();
const userStream = useRef();
const userScreen = useRef();

useEffect(() => {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {
        userVideo.current.srcObject = stream;
        userStream.current = stream;

        socketRef.current = socketIOClient.connect(ENDPOINT);
        socketRef.current.emit("join room", props.room);

        socketRef.current.on('other user', userID => {
            callUser(userID);
            otherUser.current = userID;
        });

        socketRef.current.on("user joined", userID => {
            otherUser.current = userID;
        });

        socketRef.current.on("offer", handleRecieveCall);

        socketRef.current.on("answer", handleAnswer);

        socketRef.current.on("ice-candidate", handleNewICECandidateMsg);
    });

}, []);

function callUser(userID) {
    console.log("call user - - -d-s-d-s-d--sd-sdd-sd-ssd-sd-sd--");
    peerRef.current = createPeer(userID);
    userStream.current.getTracks().forEach(track => peerRef.current.addTrack(track, userStream.current));
}

function createPeer(userID) {
    const peer = new RTCPeerConnection({
        //sdpSemantics: 'unified-plan',
        iceServers: [
            {
                urls: "stun:stun.stunprotocol.org"
            },
            {
                urls: 'turn:numb.viagenie.ca',
                credential: 'muazkh',
                username: 'webrtc@live.com'
            },
        ]
    });

    peer.onicecandidate = handleICECandidateEvent;
    peer.ontrack = handleTrackEvent;
    peer.onnegotiationneeded = () => {
        if (peer.signalingState != "stable") return;
        handleNegotiationNeededEvent(userID);
    }

    return peer;
}

function handleNegotiationNeededEvent(userID) {
    console.log("negotiationsad-das-d-as-d-asd--asd-a-sd-a-sd-");

    peerRef.current.createOffer().then(offer => {
        return peerRef.current.setLocalDescription(offer);
    }).then(() => {
        const payload = {
            target: userID,
            type: "video-offer",
            caller: socketRef.current.id,
            sdp: peerRef.current.localDescription
        };
        socketRef.current.emit("offer", payload);
    }).catch(e => console.log(e));
}

function handleRecieveCall(incoming) {
    peerRef.current = createPeer();
    const desc = new RTCSessionDescription(incoming.sdp);
    peerRef.current.setRemoteDescription(desc).then(() => {
        userStream.current.getTracks().forEach(track => peerRef.current.addTrack(track, userStream.current));
    }).then(() => {
        return peerRef.current.createAnswer();
    }).then(answer => {
        return peerRef.current.setLocalDescription(answer);
    }).then(() => {
        const payload = {
            target: incoming.caller,
            type: "video-offer",
            caller: socketRef.current.id,
            sdp: peerRef.current.localDescription
        }
        socketRef.current.emit("answer", payload);
    })
}

function handleAnswer(message) {
    const desc = new RTCSessionDescription(message.sdp);
    peerRef.current.setRemoteDescription(desc).catch(e => console.log(e));
}

function handleICECandidateEvent(e) {
    if (e.candidate) {
        const payload = {
            target: otherUser.current,
            candidate: e.candidate,
        }
        socketRef.current.emit("ice-candidate", payload);
    }
}

function handleNewICECandidateMsg(incoming) {
    const candidate = new RTCIceCandidate(incoming);

    if (peerRef.current && candidate) {
        peerRef.current.addIceCandidate(candidate).catch(e => console.log(e));
    }
}

function handleTrackEvent(e) {
    var stream = e.streams[0];
    var tracks = stream.getTracks();
    var lun = tracks.length;

    console.log(tracks);

    if (lun === 2) {
        partnerVideo.current.srcObject = stream;
    } else if (lun === 1) {
        screenShare.current.srcObject = stream;
    }
};

function shareScreen() {
    navigator.mediaDevices.getDisplayMedia({ cursor: true }).then(stream => {
        screenShare.current.srcObject = stream;
        userScreen.current = stream;

        const screenTrack = stream.getTracks()[0];

        callUser(otherUser.current);

        peerRef.current.addTrack(screenTrack, stream);

        screenTrack.onended = function () {
            peerRef.current.removeTrack(screenTrack);
        }
    })
}

return (
    
        
);

};

WebRTC react stream multiple tracks issue. Camera + Screen Share

Answers (1)

Related Questions