Build P2P (Peer to Peer) Video and Text Chat in Javascript Using Simple Peer and WebRTC Full Tutorial

Build P2P (Peer to Peer) Video and Text Chat in Javascript Using Simple Peer and WebRTC Full Tutorial


Welcome folks today in this tutorial I will be talking about how to build a P2P (Peer to Peer) Video and text chat in Javascript Using Simple Peer and WebRTC . All the source code of the tutorial are given as follows. A step by step youtube video is shown below.


Build P2P Peer to Peer Video and Text Chat in Javascript Using Simple Peer and WebRTC Full Tutorial

Get Started


In order to get started with this application we need to install the module bundler called as Browserify which will bundle all of our code into a single javascript file called as bundle.js.


npm i -g browserify


This will install browserify globally inside your system


Now go to your project directory and make a index.html file and copy paste the following code into it. First of all you need to install some dependencies for your project. Execute this command as follows


npm i simple-peer getusermedia




<!DOCTYPE html>
    <meta charset="utf-8">

    <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>


See also  Deno.js Tutorial to Convert Markdown Files (.md) to HTML Files Using Markdown Module in TypeScript Full Project For Beginners



Now create your index.js file which will hold the logic of your application. All the javascript code will be there


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) {
    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)

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

  peer.on('data', function (data) {
    document.getElementById('messages').textContent += data + '\n'

  peer.on('stream', function (stream) {
    var video = document.createElement('video')

    video.srcObject = stream


Now make your bundle.js file by executing this command as follows

See also  Html2canvas Tutorial to Take Screenshot of SVG Image in Canvas Using Canvg Library in Browser Using Javascript Full Project For Beginners


browserify index.js -o bundle.js


Leave a Reply