PeerJS is an easy-to-use JavaScript wrapper for the WebRTC API. Stream data or media in real-time between browsers using peer-to-peer communication.
In this tutorial, we will create a basic video chat app using PeerJS that allows two browsers to connect and stream video and audio.
What is WebRTC?
Put simply, WebRTC allows browsers to send data in real-time between the two browsers, without an intermediary server.
However, in practice we need a server to organise the connections. Let’s call this, the signalling server. The signalling server handles connection requests, and once a connection is made, WebRTC takes it from there. In this tutorial, we’ll be using the free PeerServer Cloud Service as our signalling server, so we won’t need to set one up ourselves.
Getting Setup
We’ll start by creating all the files we’ll need for this project.
- Make a new directory for your project (e.g.
video-chat). - Create the
index.html,style.cssandmain.jsfiles that will contain our code. - Add the following code to
index.html. This will add the two other files and PeerJS.
<!DOCTYPE html><html lang="en">
<head>
<title>P2P Video…
