How to use simple-peer on NextJS 13 correctly?
Unanswered
Northern Hawk Owl posted this in #help-forum
Northern Hawk OwlOP
"use client";
import { useEffect, useRef, useState } from "react";
import SimplePeer from "simple-peer";
import { io } from "socket.io-client";
export default function Home() {
const myVideoRef = useRef(null);
const [participants, setParticipants] = useState([]);
const [sdps, setSdps] = useState([]);
const [streams, setStreams] = useState(null); // []
useEffect(() => {
const socket = io("http://localhost:8000", {
reconnectionDelayMax: 10000,
transports: ["websocket"],
});
(async () => {
// const wrtc = (await import("wrtc")).default;
navigator.mediaDevices
.getUserMedia({ video: true })
.then(async (stream) => {
if (!socket.connected) {
const peer = new SimplePeer({
initiator: true,
trickle: false,
stream,
wrtc,
});
socket.connect();
socket.emit("join room", "roomcode-1341-123-34");
socket.on("joined room", ({ participants, sdps }) => {
setParticipants(participants);
setSdps(sdps);
});
socket.on("request answer sdp", (offeredSdps) => {
const filteredSdps = offeredSdps.filter(
(sdp) => sdp.id !== socket.id && sdp
);
filteredSdps.forEach((user) => {
// from others
// const remotePeer = new SimplePeer({
// initiator: false,
// trickle: false,
// // wrtc,
// });
delete user.id;
peer.signal(user);
peer.on("stream", (stream) => {
// peer.addStream(stream);
setStreams((peers) =>
peers ? [...peers, stream] : [stream]
);
});
});
});
1 Reply
Northern Hawk OwlOP
myVideoRef.current.srcObject = stream;
peer.on("signal", (signal) => {
socket.emit("offer sdp", { ...signal, id: socket.id });
});
}
})
.catch((err) => {});
})();
return () => {
socket.off("join room");
socket.disconnect();
};
}, []);
useEffect(() => {
streams &&
streams.map((stream, i) => {
console.log(`remotoVid-${i + 1}`);
const remoteVideo = document.getElementById(`remotoVid-${i + 1}`);
remoteVideo.srcObject = stream;
});
}, [streams]);
return (
<div>
<video ref={myVideoRef} width={600} height={400} autoPlay />
{streams &&
streams.map((_, i) => {
return (
<video
width={600}
height={400}
autoPlay
key={`remotoVid-${i + 1}`}
id={`remotoVid-${i + 1}`}
/>
);
})}
</div>
);
}