diff --git a/packages/api/routes/rtc.ts b/packages/api/routes/rtc.ts index 84f12bd..6515ac0 100644 --- a/packages/api/routes/rtc.ts +++ b/packages/api/routes/rtc.ts @@ -49,6 +49,8 @@ async function handleJoin(req: Request, res: Response) { console.log(`hacking around small problem with adding track`, e); } + peer.addTransceiver("video"); + // allow this peer connection to receive other peoples' streams peer.ontrack = (e: any) => handleStreams(e, peer, lineId); diff --git a/packages/web/pages/rtc/index.tsx b/packages/web/pages/rtc/index.tsx index f4bd3d8..5df679c 100644 --- a/packages/web/pages/rtc/index.tsx +++ b/packages/web/pages/rtc/index.tsx @@ -40,15 +40,13 @@ export default function VideoChat() { peer.onconnectionstatechange = console.log; - // todo: understand this better - peer.addTransceiver("video"); - // peer.addTransceiver("video", { streams: [localMediaStream] }); + peer.onnegotiationneeded = () => console.log("negotiation needed"); + peer.onicecandidate = console.warn; const localMediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false, }); - console.log("localMediaStream", localMediaStream); console.log(`tracks: `, localMediaStream.getTracks()); setLocalMediaStream(localMediaStream); @@ -66,20 +64,10 @@ export default function VideoChat() { }); } + peer.addTransceiver("video"); + console.log(peer.connectionState); - peer.ontrack = handleTrackEvent; - peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer, lineId); - - console.log(peer); - - return peer; - }; - - const handleNegotiationNeededEvent = async ( - peer: RTCPeerConnection, - lineId: string - ) => { // create offer const offer = await peer.createOffer(); await peer.setLocalDescription(offer); @@ -97,12 +85,23 @@ export default function VideoChat() { const desc = new RTCSessionDescription(data.data.sdp); peer.setRemoteDescription(desc).catch((e) => console.log(e)); + peer.ontrack = handleTrackEvent; + console.log( `done handling negotiation with media server | remote description: `, desc ); + + console.log(peer); + + return peer; }; + const handleNegotiationNeededEvent = async ( + peer: RTCPeerConnection, + lineId: string + ) => {}; + // render tracks on the server peer sending something // todo: memoize the line so that we can show user where stream is coming from const handleTrackEvent = (e: any) => { @@ -164,6 +163,8 @@ export default function VideoChat() { controls /> + +