peers syncing for a single user

src/webRTC.ts

@@ -1,83 +1,112 @@
-const config = {
-    iceServers: [{ urls: "stun: stun.l.google.com" }],
-};
+class PeerManager {
+  connect(peerID:string) {
+    // Connect to the peer that has the peer id peerID
+  }
 
-let localConnection = new RTCPeerConnection();
-
-function handleSendChannelStatusChange() {
-    console.log(handleSendChannelStatusChange);
+  disconnect(peerID:string) {
+  }
 }
 
-let sendChannel = localConnection.createDataChannel("sendChannel");
-sendChannel.onopen = handleSendChannelStatusChange;
-sendChannel.onclose = handleSendChannelStatusChange;
 
 
-let remoteConnection = new RTCPeerConnection();
-remoteConnection.ondatachannel = receiveChannelCallback;
-
-
-localConnection.onicecandidate = (e:any) =>
-    !e.candidate ||
-    remoteConnection.addIceCandidate(e.candidate).catch(handleAddCandidateError);
-
-remoteConnection.onicecandidate = (e) =>
-    !e.candidate ||
-    localConnection.addIceCandidate(e.candidate).catch(handleAddCandidateError);
+class PeerConnection {
+  static config = {
+    iceServers: [
+      { urls: "stun:stun.l.google.com" },
+      { urls: "stun:stun1.l.google.com" },
+      { urls: "stun:stun2.l.google.com" },
+      { urls: "stun:stun3.l.google.com" },
+      { urls: "stun:stun4.l.google.com" },
+    ],};
+}
 
 
 
-function handleCreateDescriptionError(error:any) {
-    console.log(`Unable to create an offer: ${error.toString()}`);
-  }
-  
-  function handleLocalAddCandidateSuccess() {
-    console.log('handleLocalAddCandidateSuccess');
-  }
-  
-  function handleRemoteAddCandidateSuccess() {
-    console.log('handleRemoteAddCandidateSuccess');
 
-  }
-  
-  function handleAddCandidateError() {
-    console.log("Oh noes! addICECandidate failed!");
-  }
 
-localConnection
-  .createOffer()
-  .then((offer) => localConnection.setLocalDescription(offer))
-  .then(() =>
-    remoteConnection.setRemoteDescription(localConnection.localDescription as RTCSessionDescriptionInit),
-  )
-  .then(() => remoteConnection.createAnswer())
-  .then((answer) => remoteConnection.setLocalDescription(answer))
-  .then(() =>
-    localConnection.setRemoteDescription(remoteConnection.localDescription as RTCSessionDescriptionInit),
-  )
-  .catch(handleCreateDescriptionError);
+const config = {
+  iceServers: [{ urls: "stun:stun.mystunserver.tld" }],
+};
 
-  function handleReceiveChannelStatusChange(event:any) {
-    let receiveChannel = event.channel;
+let polite = true;
 
-    if (receiveChannel) {
-      console.log(
-        `Receive channel's status has changed to ${receiveChannel.readyState}`,
-      );
+// const signaler = new SignalingChannel();
+const signaler:any = {}
+const pc = new RTCPeerConnection(config);
+
+
+const constraints = { audio: true, video: true };
+const selfVideo = document.querySelector("video.selfview");
+const remoteVideo = document.querySelector("video.remoteview");
+
+async function start() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+    for (const track of stream.getTracks()) {
+      pc.addTrack(track, stream);
     }
+    // selfVideo.srcObject = stream;
+  } catch (err) {
+    console.error(err);
   }
+}
 
-  function receiveChannelCallback(event:any) {
-    let receiveChannel = event.channel;
-    receiveChannel.onmessage = handleReceiveMessage;
-    receiveChannel.onopen = handleReceiveChannelStatusChange;
-    receiveChannel.onclose = handleReceiveChannelStatusChange;
+
+pc.ontrack = ({ track, streams }) => {
+  track.onunmute = () => {
+    // if (remoteVideo.srcObject) {
+    //   return;
+    // }
+    // remoteVideo.srcObject = streams[0];
+  };
+};
+
+let makingOffer = false;
+
+pc.onnegotiationneeded = async () => {
+  try {
+    makingOffer = true;
+    await pc.setLocalDescription();
+    signaler.send({ description: pc.localDescription });
+  } catch (err) {
+    console.error(err);
+  } finally {
+    makingOffer = false;
   }
+};
 
-  function sendMessage(message:string) {
-    sendChannel.send(message);
+pc.onicecandidate = ({ candidate }) => signaler.send({ candidate });
+
+let ignoreOffer = false;
+
+signaler.onmessage = async ({ data: { description, candidate } }: MessageEvent) => {
+  try {
+    if (description) {
+      const offerCollision =
+        description.type === "offer" &&
+        (makingOffer || pc.signalingState !== "stable");
+
+      ignoreOffer = !polite && offerCollision;
+      if (ignoreOffer) {
+        return;
+      }
+
+      await pc.setRemoteDescription(description);
+      if (description.type === "offer") {
+        await pc.setLocalDescription();
+        signaler.send({ description: pc.localDescription });
+      }
+    } else if (candidate) {
+      try {
+        await pc.addIceCandidate(candidate);
+      } catch (err) {
+        if (!ignoreOffer) {
+          throw err;
+        }
+      }
+    }
+  } catch (err) {
+    console.error(err);
   }
-
-  function handleReceiveMessage(event:any) {
-    console.log(event.data);  
-  }
+};