callee.html

<div id="app"></div>
<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"
  integrity="sha256-bQmrZe4yPnQrLTY+1gYylfNMBuGfnT/HKsCGX+9Xuqo="
  crossorigin="anonymous"
></script>
<script type="text/babel">
  function App() {
    const [yourID, setYourID] = React.useState("");
    const [users, setUsers] = React.useState({});
    const [stream, setStream] = React.useState();
    const [receivingCall, setReceivingCall] = React.useState(false);
    const [caller, setCaller] = React.useState("");
    const [callerSignal, setCallerSignal] = React.useState();
    const [callAccepted, setCallAccepted] = React.useState(false);

    const localVideoRef = React.useRef();
    const remoteVideoRef = React.useRef();
    const socket = React.useRef();
    const peer1 = React.useRef(
      new RTCPeerConnection({
        iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }]
      })
    );

    React.useEffect(() => {
      socket.current = io();
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then(stream => {
          setStream(stream);
          if (localVideoRef.current) {
            localVideoRef.current.srcObject = stream;
            stream
              .getTracks()
              .forEach(track => peer1.current.addTrack(track, stream));
            console.log(peer1.current);
          }
        });

      peer1.current.ontrack = event => {
        console.log("REMOTE TRACK", event);
        remoteVideoRef.current.srcObject = event.streams[0];
      };
      peer1.current.onicecandidate = event => {
        if (event.candidate) {
          socket.current.emit("new-ice-candidate", {
            candidate: event.candidate
          });
        }
      };

      socket.current.emit("newConnection", {
        room: "default",
        username: "asd"
      });
      socket.current.on("newConnection", data => {
        console.log(data);
      });

      socket.current.on("new-ice-candidate", data => {
        console.log("receiving ice from remote", data);
        peer1.current.addIceCandidate(new RTCIceCandidate(data.candidate));
      });
      socket.current.on("video-offer", data => {
        peer1.current
          .setRemoteDescription(data.offer)
          .then(() => peer1.current.createAnswer())
          .then(sdp => peer1.current.setLocalDescription(sdp))
          .then(() => {
            socket.current.emit("video-answer", {
              answer: peer1.current.localDescription
            });
          });
      });
    }, []);

    return (
      <div>
        <button onClick={() => callPeer()}>CALL REMOTE</button>

        <button onClick={() => sendIncomingCall()}>SEND INCOMING REMOTE</button>
        <button onClick={() => acceptCall()}>AcceptCall</button>
        <video controls muted autoPlay ref={localVideoRef} />
        <video controls muted autoPlay ref={remoteVideoRef} />
      </div>
    );
  }
  const rootElement = document.getElementById("app");
  ReactDOM.render(<App />, rootElement);
</script>

caller.html

<div id="app"></div>
<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"
  integrity="sha256-bQmrZe4yPnQrLTY+1gYylfNMBuGfnT/HKsCGX+9Xuqo="
  crossorigin="anonymous"
></script>
<script type="text/babel">
  function App() {
    const [yourID, setYourID] = React.useState("");
    const [users, setUsers] = React.useState({});
    const [stream, setStream] = React.useState();
    const [incomingCall, setIncomingCall] = React.useState(false);
    const [caller, setCaller] = React.useState("");
    const [callerSignal, setCallerSignal] = React.useState();
    const [callAccepted, setCallAccepted] = React.useState(false);

    const localVideoRef = React.useRef();
    const remoteVideoRef = React.useRef();
    const socket = React.useRef();
    const peer1 = React.useRef(
      new RTCPeerConnection({
        iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }]
      })
    );

    React.useEffect(() => {
      socket.current = io();
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then(stream => {
          setStream(stream);
          if (localVideoRef.current) {
            localVideoRef.current.srcObject = stream;
            stream
              .getTracks()
              .forEach(track => peer1.current.addTrack(track, stream));
            console.log(peer1.current);
          }
        });

      peer1.current.ondatachannel = event => {
        let receiveChannel = event.channel;
        receiveChannel.onopen = () => {
          console.log("Data channel is open and ready to be used.");
        };
        receiveChannel.onmessage = handleMessage;
      };

      socket.current.emit("newConnection", {
        room: "default",
        username: "asd"
      });
      socket.current.on("newConnection", data => {
        console.log(data);
      });
      socket.current.on("incomingCall", () => {
        setIncomingCall(true);
      });
    }, []);
    function handleMessage(e) {
      console.log("messageeee", e);
    }
    function callPeer() {
      peer1.current.ontrack = event => {
        console.log("REMOTE TRACK", event);
        remoteVideoRef.current.srcObject = event.streams[0];
      };
      peer1.current.onicecandidate = event => {
        if (event.candidate) {
          socket.current.emit("new-ice-candidate", {
            candidate: event.candidate
          });
        }
      };
      peer1.current
        .createOffer()
        .then(sdp => peer1.current.setLocalDescription(sdp))
        .then(() => {
          console.log("EMITING VIDEO OFFER", peer1.current.localDescription);
          socket.current.emit("incomingCall");
          socket.current.emit("video-offer", {
            offer: peer1.current.localDescription
          });
        });

      socket.current.on("video-answer", data => {
        console.log("receiving video offer", data);
        peer1.current.setRemoteDescription(
          new RTCSessionDescription(data.answer)
        );
      });

      socket.current.on("new-ice-candidate", data => {
        console.log("receiving ice from remote", data);
        peer1.current.addIceCandidate(new RTCIceCandidate(data.candidate));
      });
    }
    function acceptCall() {
      peer1.current.ontrack = event => {
        console.log("REMOTE TRACK", event);
        remoteVideoRef.current.srcObject = event.streams[0];
      };
      peer1.current.onicecandidate = event => {
        if (event.candidate) {
          socket.current.emit("new-ice-candidate", {
            candidate: event.candidate
          });
        }
      };

      socket.current.on("new-ice-candidate", data => {
        console.log("receiving ice from remote", data);
        peer1.current.addIceCandidate(new RTCIceCandidate(data.candidate));
      });

      socket.current.on("video-offer", data => {
        peer1.current
          .setRemoteDescription(data.offer)
          .then(() => peer1.current.createAnswer())
          .then(sdp => peer1.current.setLocalDescription(sdp))
          .then(() => {
            socket.current.emit("video-answer", {
              answer: peer1.current.localDescription
            });
          });
      });
    }

    return (
      <div>
        <button onClick={() => callPeer()}>CALL REMOTE</button>

        <button onClick={() => sendIncomingCall()}>SEND INCOMING REMOTE</button>
        {incomingCall && (
          <button onClick={() => acceptCall()}>AcceptCall</button>
        )}
        <video controls muted autoPlay ref={localVideoRef} />
        <video controls muted autoPlay ref={remoteVideoRef} />
      </div>
    );
  }
  const rootElement = document.getElementById("app");
  ReactDOM.render(<App />, rootElement);
</script>

server.js

const http = require("http");
const express = require("express");
const app = express();
const server = http.createServer(app);
const socketIO = require("socket.io")(server);

app.use("/", express.static("public"));

socketIO.on("connection", socket => {
  
  socket.on("newConnection", ({ room, username }) => {
    console.log(`NEW CONNECTION ${room} ${username}`);
    socket.join(room);
    socket.broadcast.emit("newConnection", { username }).to(room);
  });

  socket.on("video-offer", data => {
    console.log(`RECEIVING OFFER `, data);

    socket.broadcast.emit("video-offer", data).to("default");
  });
  socket.on("video-answer", data => {
    console.log(`VIDEO ANSWER`, data);
    socket.broadcast.emit("video-answer", data).to("default");
  });

  socket.on("new-ice-candidate", data => {
    console.log(data);
    console.log(`CALL ICE CANDIDATE `);

    socket.emit("new-ice-candidate", data).to("default");
  });
  socket.on("incomingCall", data => {
    socket.broadcast.emit("incomingCall", data);
  });
});
server.listen(8080);