1

所以我一直在学习 webrtc 并制作了一个群组视频通话应用程序，我想将其转换为近距离视频通话应用程序。

同一个房间的用户可以在他们的 p5.js 画布上移动一个点，如果 2 个点比某个阈值更近，那么这些用户将通过视频流连接，但如果 2 个或更多点首先移动很远，我会得到一个空白流然后再靠近一点（用户只能看到他们的视频。

最初加入视频通话后工作正常，只有在用户移动很远然后再靠近时才会出现问题）。

这是代码...

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;
    }

这是检查 2 个用户在画布上是否足够接近的邻近功能。

    <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>

这是渲染区域..

我是 webrtc 和 simple-peer 的新手，所以如果我遗漏了一些愚蠢的东西，我深表歉意，但在此先感谢:)

4

0 回答 0