so i've been learning webrtc and made a group video call app and i wanted to convert this into a proximity video call app.
users in the same room can move a dot on their p5.js canvas and if 2 dots are closer than a certain threshold then those users would be connected via a video stream but i get a blank stream if 2 or more dots first move far and then come back closer (user can only see their video.
initially after joining the video call was working fine only messes up after users move far and then come back closer).
Here's the code...
const proximity = (peer) => {
if (peer.peerID === socket.id) {
return false;
}
let X, Y;
for (let i = 0; i < users.length; i ++) {
if (users[i].id === socket.id) {
X = users[i].x;
Y = users[i].y;
break;
}
}
for (let i = 0; i < users.length; i ++) {
if (users[i].id === peer.peerID) {
if (Math.abs(users[i].x - X) < 100 && Math.abs(users[i].y - Y) < 100) {
return true;
} else {
return false;
}
}
}
return false;
}
this is the proximity function to check if 2 users are close enough on the canvas or not.
<div className="video-canvas">
<div className="videobox">
<StyledVideo muted ref={ userVideo } autoPlay playsInline />
{ peers.map((peer) => {
return (
proximity(peer) ? (
<div>
<Video key={ peer.peerID } peer={ peer.peer } />
</div>
) : (
<div></div>
)
);
})}
</div>
<Sketch setup={ setup } draw={ draw } className="canvas" />
</div>
this is the render area..
I'm new to webrtc and simple-peer so i apologise if i'm missing something silly, thanks in advance though :)