Build P2P Peer to Peer Video and Text Chat in Javascript Using Simple Peer and WebRTC in Node.js

Welcome folks today in this blog post we will be building p2p video and text chat in javascript using simple peer and webrtc in node.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new index.js file and copy paste the following code

index.js

var getUserMedia = require('getusermedia')

getUserMedia({ video: true, audio: false }, function (err, stream) {
  if (err) return console.error(err)

  var Peer = require('simple-peer')
  var peer = new Peer({
    initiator: location.hash === '#init',
    trickle: false,
    stream: stream
  })

  peer.on('signal', function (data) {
    console.log("signal")
    document.getElementById('yourId').value = JSON.stringify(data)
  })

  document.getElementById('connect').addEventListener('click', function () {
      console.log("connect button clicked")
    var otherId = JSON.parse(document.getElementById('otherId').value)
    peer.signal(otherId)
  })

  document.getElementById('send').addEventListener('click', function () {
    console.log("send button")  
    var yourMessage = document.getElementById('yourMessage').value
    peer.send(yourMessage)
  })

  peer.on('data', function (data) {
      console.log("data")
    document.getElementById('messages').textContent += data + 'n'
  })

  peer.on('stream', function (stream) {
      console.log("stream")
    var video = document.createElement('video')
    document.body.appendChild(video)

    video.srcObject = stream
    video.play()
  })
})

var getUserMedia = require('getusermedia')

getUserMedia({ video: true, audio: false }, function (err, stream) {

if (err) return console.error(err)

var Peer = require('simple-peer')

var peer = new Peer({

initiator: location.hash === '#init',

trickle: false,

stream: stream

})

peer.on('signal', function (data) {

console.log("signal")

document.getElementById('yourId').value = JSON.stringify(data)

})

document.getElementById('connect').addEventListener('click', function () {

console.log("connect button clicked")

var otherId = JSON.parse(document.getElementById('otherId').value)

peer.signal(otherId)

})

document.getElementById('send').addEventListener('click', function () {

console.log("send button")

var yourMessage = document.getElementById('yourMessage').value

peer.send(yourMessage)

})

peer.on('data', function (data) {

console.log("data")

document.getElementById('messages').textContent += data + 'n'

})

peer.on('stream', function (stream) {

console.log("stream")

var video = document.createElement('video')

document.body.appendChild(video)

video.srcObject = stream

video.play()

})

As you can see we are importing the getusermedia library to get access to the webcam and also we are using the simple-peer library to connect the p2p for text and video chat. And then we are listening for various events such as data and stream and then we are making the text and video chats.

Now you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <label>Your ID:</label><br/>
    <textarea id="yourId"></textarea><br/>
    <label>Other ID:</label><br/>
    <textarea id="otherId"></textarea>
    <button id="connect">connect</button><br/>

    <label>Enter Message:</label><br/>
    <textarea id="yourMessage"></textarea>
    <button id="send">send</button>
    <pre id="messages"></pre>

    <script src="bundle.js" charset="utf-8"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<label>Other ID:</label><br/>

<button id="connect">connect</button><br/>

<label>Enter Message:</label><br/>

</body>

</html>

Now we need to install the browserify module globally using the below command as shown below

npm i -g browserify

After that you can execute the below command to produce the minified version of the javascript as shown below

browserify index.js -o bundle.js