From c13f74c3949a0b102a8a2275861383960a240b61 Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 29 Apr 2022 14:12:34 -0500 Subject: [PATCH] trying bunch of shit --- packages/api/routes/rtc.ts | 12 ++++---- packages/web/pages/rtc/index.tsx | 49 ++++++++++++++++++-------------- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/api/routes/rtc.ts b/packages/api/routes/rtc.ts index 6515ac0..4e0e699 100644 --- a/packages/api/routes/rtc.ts +++ b/packages/api/routes/rtc.ts @@ -27,12 +27,14 @@ async function handleJoin(req: Request, res: Response) { const peer = new webrtc.RTCPeerConnection({ iceServers: [ - { - urls: "stun:stun.stunprotocol.org", - }, + { urls: "stun:stun.stunprotocol.org:3478" }, + { urls: "stun:stun.l.google.com:19302" }, ], }); + // allow this peer connection to receive other peoples' streams + peer.ontrack = (e: any) => handleStreams(e, peer, lineId); + // now that remote is set // allow this peer connection for this specific line to get tracks for this line already try { @@ -50,9 +52,7 @@ async function handleJoin(req: Request, res: Response) { } peer.addTransceiver("video"); - - // allow this peer connection to receive other peoples' streams - peer.ontrack = (e: any) => handleStreams(e, peer, lineId); + peer.addTransceiver("audio"); // create connection between server and client who hit this endpoint const desc = new webrtc.RTCSessionDescription(sdp); diff --git a/packages/web/pages/rtc/index.tsx b/packages/web/pages/rtc/index.tsx index 8469a3a..421b601 100644 --- a/packages/web/pages/rtc/index.tsx +++ b/packages/web/pages/rtc/index.tsx @@ -32,9 +32,8 @@ export default function VideoChat() { const createPeer = async (lineId: string) => { const peer = new RTCPeerConnection({ iceServers: [ - { - urls: "stun:stun.stunprotocol.org", - }, + { urls: "stun:stun.stunprotocol.org:3478" }, + { urls: "stun:stun.l.google.com:19302" }, ], }); @@ -45,7 +44,7 @@ export default function VideoChat() { const localMediaStream = await navigator.mediaDevices.getUserMedia({ video: true, - audio: false, + audio: true, }); console.log("localMediaStream", localMediaStream); console.log(`tracks: `, localMediaStream.getTracks()); @@ -65,12 +64,17 @@ export default function VideoChat() { } peer.addTransceiver("video"); + peer.addTransceiver("audio"); + console.log(peer.getReceivers()); console.log(peer.getSenders()); - const remoteStream = new MediaStream([peer.getSenders()[0].track!]); + const remoteStream = new MediaStream([ + peer.getSenders()[0].track!, + peer.getSenders()[1].track!, + ]); - incomingVideoRef.current!.srcObject = remoteStream; + // incomingVideoRef.current!.srcObject = remoteStream; console.log(peer.connectionState); @@ -111,22 +115,26 @@ export default function VideoChat() { // 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) => { - const incomingStream = e.streams[0]; + console.log(e); - console.log("incoming stream", incomingStream); + const incomingStream = e.streams[0] as MediaStream; - // if (incomingVideoRef.current) { - // toast(`setting incoming stream ref`); - // incomingVideoRef.current.srcObject = new MediaStream(incomingStream); + console.log("incoming stream", incomingStream.getTracks()); - // setInterval(() => { - // incomingVideoRef!.current!.play().then(console.log).catch(console.log); - // }, 2000); + if (incomingVideoRef.current) { + toast(`setting incoming stream ref`); + incomingVideoRef.current.srcObject = new MediaStream([ + e.transceiver.sender.track, + ]); - // incomingVideoRef.current.oncanplay = () => - // console.log("cannn PLLLAYY VID!!!!"); - // incomingVideoRef.current.play().then(console.log).catch(console.log); - // } + incomingVideoRef.current.oncanplay = () => { + console.log("cannn PLLLAYY VID!!!!"); + + incomingVideoRef.current.play().then(console.log).catch(console.error); + }; + + incomingVideoRef.current.play().then(console.log).catch(console.error); + } }; return ( @@ -153,9 +161,9 @@ export default function VideoChat() {