Peerjs

Open this fiddle on different computers or browsers to video chat.

by mozfet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Video Chat</h2>
My Peer Id: <input id='myPeerId' type=text><br>
Their Peer Id: <input id='theirPeerId' type=text><br>
<button id="connectButton">Connect</button>
<button id="callButton">Call</button>

<div id="video-container">
  Their video: <video id="theirVideo" class="theirVideo" autoplay></video>
  <video id="myVideo" muted="true" class="myVideo" autoplay></video>: Your video
</div>

JavaScript

function open (peer) {  
  return new Promise((resolve, reject) => {
    peer.on('open', id => {
      resolve(id)
    })
    peer.on('error', err => {
      reject(err)
    })
  })
}

function connect(peer, theirPeerId) {
  return new Promise((resolve, reject) => {    
    const connection = peer.connect(theirPeerId);
    connection.on('open', () => {
      resolve(connection)
    })
  }) 
}

function listen(connection) {
  peer.on('connection', function() {
  
  })
}

function getMyStream() {
  return new Promise((resolve, reject) => {
    navigator.getUserMedia(
      {audio:true, video: true}, 
      function (stream) {
        let video = document.getElementById("myVideo");
        video.src = URL.createObjectURL(stream);
        resolve(stream)
      },
      function (error) { 
        reject(error)
      }
    )
  })
}

$(document).ready(async function() {
  
  const peer = new Peer()
  
  peer.on('error', err => {
    console.error(err)
  })
  
  let myPeerId
  
  peer.on('open', id => {
    myPeerId = id
    $('#myPeerId').val(myPeerId)
  })
  
  const myStream = await getMyStream()
  console.log('myStream: myStream')
  
  peer.on('call', call => {
    call.answer(myStream)
  })
 
  $('#connectButton').click(() => {
    const theirPeerId = $('#theirPeerId').val()
    console.log('Connecting to peer:', theirPeerId)
    connection = peer.connect(theirPeerId)
    connection.on('open', () => {
      console.log('connection open')
    })
  })
  
  $('#callButton').click(async () => {
    const theirPeerId = $('#theirPeerId').val()
    console.log('Calling peer:', theirPeerId)
    peer.call(theirPeerId, myStream)
  })
})