node.js - Cant understand how to show remote peers video in my react based video conferencing

Question

Basically i was creating a full mesh network for a video conferencing application and I cant understand how to display other peers video for every user. The part of sending offer and receiving answer along with ICE candidates have been achieved but i still cant figure out how to make peer.ontrack work. Below i will be attaching my server side(Node js) code with front-end code(React). The code is fairly easy and simple i would love and be grateful if someone can help. I have almst spent three days figuring out and have wasted alot of time. I would be glad for any sort of response.

Server Side:

import express from 'express'
  import bodyParser from 'body-parser'
  import * as socket from "socket.io";
  import cors from 'cors'
  const app = express()

  app.use(bodyParser.urlencoded({ extended: false }))
  app.use(bodyParser.json())
  const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true,
 methods: 'GET,POST,PUT, DELETE, OPTIONS',
allowedHeaders: "Origin, Content-type, Accept, Authorization, x-xsrf-token"
}

app.use(cors(corsOptions))
const server = require('http').Server(app);
let io = require("socket.io")(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"]
    }
});

app.get("/something", (req, res, next) => {
    // (req as any).name = "faheel"
})


interface RoomType {
    [key: string]: {
        [key: string]: socket.Socket
    }
}

interface SocketToRoomType {
    [key: string]: string
}

interface SocketType {
    [key: string]: socket.Socket
}
const rooms: RoomType = {}
const sockets: SocketType = {}
const sockettoroom: SocketToRoomType = {};

io.on("connection", (socket: socket.Socket) => {
    sockets[socket.id] = socket
    console.log('[' + socket.id + '] connection accepted')
    socket.on('join', config => {
        console.log('[' + socket.id + '] join ', config);
        if (!rooms[config.roomid]) {
            console.log("Create the room")
            rooms[config.roomid] ={}
        }
        for (let id in rooms[config.roomid]) {
            console.log(id)
            rooms[config.roomid][id].emit('addPeer', { peer_id: socket.id, should_create_offer: false });
            socket.emit('addPeer', { peer_id: id, should_create_offer: true });
        }
        rooms[config.roomid][socket.id] = socket;
        console.log(Object.keys(rooms[config.roomid]))
    })

    socket.on('relayICECandidate', config => {
        let peer_id = config.peer_id;
        let ice_candidate = config.ice_candidate;
        console.log('[' + socket.id + '] relay ICE-candidate to [' + peer_id + '] ', ice_candidate);
        if (peer_id in sockets) {
            sockets[peer_id].emit('iceCandidate', { peer_id: socket.id, ice_candidate: ice_candidate });
        }
    });
    
    socket.on('relaySessionDescription', config => {
        let peer_id = config.peer_id;
        let session_description = config.session_description;
        let type = config.type
        console.log('[' + socket.id + '] relay SessionDescription to [' + peer_id + '] ',session_description)
        if (peer_id in sockets) {
            sockets[peer_id].emit('sessionDescription', {
                peer_id: socket.id,
                session_description: session_description,
                type: type
            });
        }
    })
})


server.listen(4000, () => {
    console.log("Server up an running")
})

Front-end:

import React, { useRef, useEffect, useState } from "react";
import { useParams } from 'react-router-dom'
import io from "socket.io-client";

const Video = (props) => {
    const ref = useRef();
    useEffect(() => {
        console.log(props.peer)
        // ref.current.srcObject = props.vid
    }, []);

    return (
        <video playsInline autoPlay ref={ref} />
    );
}
const Room1 = () => {
    const [peers, setPeers] = useState({})
    const socket = io.connect("http://localhost:4000")
    const localMediaStream = useRef(null)
    const userstream = useRef();
    const peerMediaElements = useRef({})
    const params = useParams()
    const [refresh, setRefresh] = useState(false)

    useEffect(() => {
        navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {
            localMediaStream.current.srcObject = stream
            userstream.current = stream
            joinRoom()
        })

        socket.on("addPeer", (config) => {
            const peerid = config.peer_id
            if (peerid in peers) {
                return
            }
            if (peerid in peers) return
            const peer = addPeer(config)
            const peerobjcreator = {
                [peerid]: peer
            }
            console.log("Before adding peer", peers)
            peers[peerid] = peer
            setPeers(peers)
            setRefresh(!refresh)
            console.log("After adding peer", peers)
            // if (config.should_create_offer) {
            //     createOffer(peerid, peer)
            // }
        })

        socket.on("sessionDescription", (config) => {
            createAnswer(config)
        })
    }, [])

    const joinRoom = () => {
        socket.emit("join", { roomid: params.roomid, userdate: {} })
    }

    const addPeer = (config) => {
        const peerid = config.peer_id
        const peer = new RTCPeerConnection({
            iceServers: [
                {
                    urls: "stun:stun.stunprotocol.org"
                },
                {
                    urls: 'turn:numb.viagenie.ca',
                    credential: 'muazkh',
                    username: 'webrtc@live.com'
                },
            ]
        })

        peer.onicecandidate = (event) => {
            if (event.candidate) {
                socket.emit('relayICECandidate', {
                    peer_id: peerid,
                    ice_candidate: {
                        sdpMLineIndex: event.candidate.sdpMLineIndex,
                        candidate: event.candidate.candidate
                    }
                });
            }
        }
        userstream.current.getTracks().forEach(track => {
            console.log("tRACK", track)
            peer.addTrack(track, userstream.current)
        })
        if (config.should_create_offer) {
            peer.onnegotiationneeded = createOffer(peerid, peer)
        }

        peer.ontrack = (event) => {
            console.log("HeLO", event.streams[0])
            peerMediaElements.current[peerid] = event.streams[0]
        }
        return peer
    }

    const createOffer = (peerid, peer) => {
        console.log("Creating offer")
        peer.createOffer().then(offer => {
            return peer.setLocalDescription(offer);
        }).then(() => {
            const payload = {
                peer_id: peerid,
                session_description: peer.localDescription,
                type: "offer"
            };
            socket.emit("relaySessionDescription", payload);
        }).catch(e => console.log(e));
    }

    const createAnswer = (config) => {
        console.log(config)
        const peerid = config.peer_id
        console.log(peers)
        const peer = peers[peerid]
        const remotedescription = config.session_description
        const desc = new RTCSessionDescription(remotedescription)
        const stuff = peer.setRemoteDescription(desc, () => {
            if (remotedescription.type === "offer") {
                console.log("Creating answer")
                peer.createAnswer((localdescription) => {
                    console.log("Answer created")
                    peer.setLocalDescription(localdescription,
                        () => {
                            const payload = {
                                peer_id: peerid,
                                session_description: localdescription,
                                type: "answer"
                            }
                            socket.emit("relaySessionDescription", payload);
                        },
                        (err) => {
                            console.log("Answer setlocation failed", err)
                        })
                },
                    (err) => {
                        console.log("Error creating answer", err)
                    })
            }
        },
            (err) => {
                console.log("Set remote description error", err)
            })


}

    return (
        <div>
            <video autoPlay ref={localMediaStream} />
            {console.log(peerMediaElements.current)}
            {
                Object.keys(peerMediaElements.current).map(peerid => console.log(peerid))
            }
        </div>
    )
}
export default Room1

question from:https://stackoverflow.com/questions/65662268/cant-understand-how-to-show-remote-peers-video-in-my-react-based-video-conferenc

Answer 1

Waitting for answers