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>
)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…