Skip to content
Nomad.dev

Video Chat Template

This template creates a minimal video chat between the visitors of the site. It uses the Peersockets API to set up a WebRTC video call between users. Traffic is encrypted so that only users who possess the site’s URL can read it.

(Note: this is a simple demo and won’t work with more than 2 users.)

Source

Section titled “Source”
<!doctype html>
<html>
  <head>
    <link rel="icon" type="image/png" sizes="32x32" href="/thumb.png">
    <style>
      body {
        margin: 20px;
        font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      h1 {
        font-weight: 500;
      }
      #videos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        margin: 10px 0;
      }
      video {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Video Chat</h1>
    <button id="startButton">Start</button>
    <select id="videoSelect"></select>
    <select id="audioSelect"></select>
    <div id="videos">
      <video id="localVideo" playsinline autoplay muted></video>
      <video id="remoteVideo" playsinline autoplay></video>
    </div>
  </body>


  <script>
var peerSockets = new Set()
var topic
var localStream;
var peerConnection;
var uuid;
var videoDevice;
var audioDevice;


var peerConnectionConfig = {
  'iceServers': [
    {'urls': 'stun:stun.stunprotocol.org:3478'},
    {'urls': 'stun:stun.l.google.com:19302'},
  ]
};


async function pageReady() {
  console.log('running setup')
  uuid = createUUID();


  var peerEvents = nomad.peersockets.watch()
  peerEvents.addEventListener('join', e => {
    console.log('join', e)
    peerSockets.add(e.peerId)
  })
  peerEvents.addEventListener('leave', e => {
    console.log('leave', e)
    peerSockets.delete(e.peerId)
  })
  topic = nomad.peersockets.join('signalling')
  topic.addEventListener('message', gotMessageFromPeersocket)


  navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(getUserMediaSuccess).catch(errorHandler);


  try {
    var devices = await navigator.mediaDevices.enumerateDevices()
    for (let device of devices) {
      let opt = document.createElement('option')
      opt.value = device.deviceId
      opt.textContent = device.label
      if (device.kind === 'videoinput') {
        videoSelect.append(opt)
      } else if (device.kind === 'audioinput') {
        audioSelect.append(opt)
      }
    }
    videoSelect.addEventListener('change', onChangeDevice)
    audioSelect.addEventListener('change', onChangeDevice)
  } catch (e) {
    videoSelect.remove()
    audioSelect.remove()
  }


  console.log('setup finished')
}


function onChangeDevice () {
  navigator.mediaDevices.getUserMedia({video: {deviceId: videoSelect.value}, audio: {deviceId: audioSelect.value}}).then(getUserMediaSuccess).catch(errorHandler);
}


function sendToAllPeersockets (message) {
  console.log('sent', {message})
  message = new TextEncoder('utf-8').encode(JSON.stringify(message))
  for (let peer of peerSockets) {
    topic.send(peer, message)
  }
}


function getUserMediaSuccess(stream) {
  localStream = stream;
  localVideo.srcObject = stream;
}


function start(isCaller) {
  peerConnection = new RTCPeerConnection(peerConnectionConfig);
  peerConnection.onicecandidate = gotIceCandidate;
  peerConnection.ontrack = gotRemoteStream;
  peerConnection.addStream(localStream);


  if(isCaller) {
    peerConnection.createOffer().then(createdDescription).catch(errorHandler);
  }
}
startButton.addEventListener('click', start)


function gotMessageFromPeersocket({peerId, message}) {
  console.log('received', {peerId, message})
  if(!peerConnection) start(false);


  var signal = JSON.parse(new TextDecoder().decode(message));


  // Ignore messages from ourself
  if(signal.uuid == uuid) return;


  if(signal.sdp) {
    peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
      // Only create answers in response to offers
      if(signal.sdp.type == 'offer') {
        peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
      }
    }).catch(errorHandler);
  } else if(signal.ice) {
    peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
  }
}


function gotIceCandidate(event) {
  if(event.candidate != null) {
    sendToAllPeersockets({'ice': event.candidate, 'uuid': uuid});
  }
}


function createdDescription(description) {
  console.log('got description');


  peerConnection.setLocalDescription(description).then(function() {
    sendToAllPeersockets({'sdp': peerConnection.localDescription, 'uuid': uuid});
  }).catch(errorHandler);
}


function gotRemoteStream(event) {
  console.log('got remote stream');
  remoteVideo.srcObject = event.streams[0];
}


function errorHandler(error) {
  console.log(error);
}


// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function createUUID() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }


  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}


pageReady()
  </script>
</html>