What is this simple app?
I built a single static page app so that we can easily understand how to use the WebRTC API to establish communication between two peers.
Let me tell you in advance, it is not a complex or feature-rich app. It is just a static page and server made with around 100 lines of code, solely for learning purpose.
The page has two video elements: one for the user itself and another one for the remote peer, along with a button to start streaming.
Demo
I hope you don't judge this demo by my webcam quality.
Code walkthrough
File Structure
sample-webrtc-app/
└── public/
├── index.html
├── main.js
├── server.js
├── package.json
├── package-lock.json
├── LICENSE
├── server.js
├── .gitignore
public folder contains client-side code.
server.js contains code related to signaling server. We already learned what is signaling server in the previous blog: https://blog.denilgabani.com/signaling-in-webrtc
package.json contains the required dependency.
Client-side code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebRTC Example</title>
</head>
<body>
<h1>WebRTC Example</h1>
<div>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
</div>
<button id="start">Start</button>
<script
src="https://cdn.socket.io/4.7.5/socket.io.min.js"
integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
crossorigin="anonymous"
></script>
<script src="main.js"></script>
</body>
</html>
Two video elements are added in above static HTML file for peer1 and peer2.
One button with id "start" to start the stream.
Added socket.io script using cdn. Here we get a question why Socket.io is used?
Communication with signaling server is better with WebSocket because of two-way communication functionality.
Socket.IO is a library that enables low-latency, bidirectional, and event-based communication between a client and a server. It is easy to use Socket.io library instead of writing code for WebSocket from scratch. It gives us more focus on WebRTC.
Added our client-side script main.js.
const localVideo = document.getElementById("localVideo");
const remoteVideo = document.getElementById("remoteVideo");
let start = document.getElementById("start");
let localStream;
let pc;
const socket = io();
async function init() {
try {
localStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
localVideo.srcObject = localStream;
pc = new RTCPeerConnection();
pc.ontrack = (event) => {
console.log("event: ", event);
if (event.streams && event.streams[0]) {
remoteVideo.srcObject = event.streams[0];
}
};
pc.onicecandidate = (event) => {
if (event.candidate) {
socket.emit("message", { candidate: event.candidate });
}
};
localStream
.getTracks()
.forEach((track) => pc.addTrack(track, localStream));
} catch (error) {
console.error("Error starting:", error);
}
}
async function startProcess() {
try {
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
socket.emit("message", { offer: pc.localDescription });
} catch (error) {
console.error("Error starting:", error);
}
}
async function receiveOfferAndCreateAnswer(offer) {
try {
await pc.setRemoteDescription(offer);
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
socket.emit("message", { answer: pc.localDescription });
} catch (error) {
console.error("Error receiving offer and creating answer:", error);
}
}
socket.on("message", (message) => {
console.log("Received from signaling server:", message);
if (message.offer) {
receiveOfferAndCreateAnswer(message.offer);
} else if (message.answer) {
pc.setRemoteDescription(message.answer);
} else if (message.candidate) {
pc.addIceCandidate(new RTCIceCandidate(message.candidate));
}
});
start.addEventListener("click", startProcess);
init();
Server-side code
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static(__dirname + "/public"));
io.on("connection", (socket) => {
console.log("A user connected");
socket.on("message", (message) => {
console.log("Received message:", message);
socket.broadcast.emit("message", message);
});
socket.on("disconnect", () => {
console.log("A user disconnected");
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
Walkthrough
I don't know if you understand all the above steps or not but
I have not added many things in these like STUN server and all. I have kept it simple to understand Peer Connection. Don't worry We will also learn STUN server and other things in our upcoming blogs. Just take it easy.
Github repo link
If you find some corrections or something useful to mention then feel free to comment💬 under the blog.
To stay updated and learn together follow me on Twitter@denilgabani or subscribe to my newsletter.
