P2P Video Chat Application

not sure if i’m posting in the right place but wondered if anyone fancied advising which API to use?
i have been looking into webRTC (using vscode/git, not replit). discovered the given example uses something called socket.io, which has LOADS of code, but some of it seems to be MIT files copied over. a webRTC tutorial recomends using agoraRTM sdk which i guess does the same stuff.
i fancy using some MIT library stuff but anyone know how much of that code is imported and how much needs building out in the socket.io example? i don’t want a month long project on this. or can webRTC be integrated with socket later so i could just carry on with agora for now?

given example code with socket (inspect>sources):
https://p2p-video-chat-application.freecodecamp.rocks/

(pls feel free to move to another section)

having looked into this i spent a lot of time following a youtube video that described a solution based on using commercial API agora.io. no time wasted, useful things learned , but it is more complicated and less interesting to me dealing with commercial software (altho there is a good free limit).
then i discovered the simpler solution, which is probably better when learning webRTC from scratch:
then you can stick to the webRTC documentation to learn basics without having to combine agora documentation/library/API.
simplest WebRTC code below.
html:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>peerChat</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>
  <video id="video1" height="240" width="240" autoplay muted></video>
  <video id="video2" height="240" width="140" autoplay></video><br>

  <input type="checkbox" onclick="pause()">pause</input>
  <output id="error" />
</body>

<script src='main.js'></script>
</html>

js:

let user1 = new RTCPeerConnection(), user2 = new RTCPeerConnection()
let error = msg => console.log(msg)

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => user1.addStream(video1.srcObject = stream))
  .catch(error)

let pause = () => video1.srcObject.getTracks().forEach(track => track.enabled = !track.enabled)

let add = (user, can) => can && user.addIceCandidate(can).catch(error)
user1.onicecandidate = e => add(user1, e.candidate)
user2.onicecandidate = e => add(user1, e.candidate)

user2.onaddstream = e => video2.srcObject = e.stream;
user1.onnegotiationneeded = e =>
user1.createOffer().then(d => user1.setLocalDescription(d))
  .then(() => user2.setRemoteDescription(user1.localDescription))
  .then(() => user2.createAnswer()).then(d => user2.setLocalDescription(d))
  .then(() => user1.setRemoteDescription(user2.localDescription))
  .catch(error)

if there are problems with WebRTC code being updated and old code stops functioning (on some browsers?) you can install a shim in the html file above the main.js line:
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
that should over come code changes.