javascript - Unable to render video from a remote rtc peer MediaStream object in react

Question

I am creating a video conferencing application in which i get remote streams from other peers. I do get the MediaStream Objects but when i place it in the <video autoPlay src={MediaStreamObj}/> it does not display the video of other peers. When i inspect the element from my console i see video tags Like this <video autoPlay src= [object MediaStream]/>. Can anyone help me know how i can display other peers video. I am sharing the code down below with proper explanation. I will be very thankful for any sort of help from the community.

Adding user stream tracks:

for (const track of userstream.current.getTracks()) {
        console.log("tRACK", track)
        peer.addTrack(track, userstream.current)
    }

Getting remote media from other peers:

peer.ontrack = ({ streams }) => {
        console.log("Remote Streams", streams[0])
        setVideos(vid => [...vid, streams[0]])
    }

My react component return:

return (
    <div>
        <video autoPlay ref={localMediaStream} />
        {console.log("All remote videeos", videos)}
        {
            videos.length > 0 ? videos.map(data => {
                return (
                    <div>
                        {console.log(data)}
                        <video autoPlay src={data}/>
                    </div>
                )
            }) :
                null
        }
    </div>
   )

Answer 1

等待大神答复