WebTorrent WebRTC: How Browser P2P File Sharing Works (2026)

1<!-- public/index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6  <meta charset="UTF-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>WebTorrent WebRTC App</title>
9  <link rel="stylesheet" href="styles.css">
10</head>
11<body>
12  <div class="container">
13    <h1>WebTorrent WebRTC Video Streaming</h1>
14    
15    <div id="joinScreen">
16      <h2>Join a Room</h2>
17      <form id="joinForm">
18        <input type="text" id="roomInput" placeholder="Enter Room Name" required>
19        <button type="submit">Join</button>
20      </form>
21    </div>
22    
23    <div id="videoScreen" style="display: none;">
24      <div class="video-container">
25        <video id="videoPlayer" controls></video>
26      </div>
27      <div class="controls">
28        <button id="playPauseBtn">Play</button>
29        <button id="fullScreenBtn">Fullscreen</button>
30        <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
31      </div>
32      <div class="participants">
33        <h2>Participants</h2>
34        <ul id="participantsList"></ul>
35        <div id="participantVideos"></div>
36      </div>
37    </div>
38  </div>
39  <script src="app.js"></script>
40</body>
41</html>

1/* public/styles.css */
2
3/* Existing code... */
4
5.participants {
6  text-align: center;
7}
8
9.participants ul {
10  list-style: none;
11  padding: 0;
12}
13
14.participants li {
15  padding: 5px 0;
16}
17
18#participantVideos {
19  display: flex;
20  flex-wrap: wrap;
21  justify-content: center;
22  gap: 10px;
23  margin-top: 20px;
24}
25
26.participant-video {
27  width: 200px;
28  height: 150px;
29  background: #000;
30  border-radius: 8px;
31  overflow: hidden;
32}
33
34.participant-video video {
35  width: 100%;
36  height: 100%;
37}

1// public/app.js
2
3// Existing code...
4
5const participantVideos = document.getElementById('participantVideos');
6
7// Function to add a participant video
8function addParticipantVideo(peerId) {
9  const participantVideoContainer = document.createElement('div');
10  participantVideoContainer.className = 'participant-video';
11  participantVideoContainer.id = `video-${peerId}`;
12  
13  const videoElement = document.createElement('video');
14  videoElement.autoplay = true;
15  videoElement.controls = true;
16  participantVideoContainer.appendChild(videoElement);
17  
18  participantVideos.appendChild(participantVideoContainer);
19  
20  return videoElement;
21}
22
23// Example function to simulate adding participant videos
24function simulateParticipants() {
25  const peers = ['Peer 1', 'Peer 2', 'Peer 3'];
26  peers.forEach((peer, index) => {
27    const videoElement = addParticipantVideo(peer);
28    // For demonstration, we'll use the same video source for all participants
29    videoElement.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
30  });
31}
32
33// Call simulateParticipants for demonstration purposes
34simulateParticipants();
35
36// Function to join a room
37function joinRoom(roomName) {
38  joinScreen.style.display = 'none';
39  videoScreen.style.display = 'block';
40  console.log(`Joined room: ${roomName}`);
41
42  // Add the torrent and stream the video
43  client.add(torrentId, (torrent) => {
44    const file = torrent.files.find(file => file.name.endsWith('.mp4'));
45    file.renderTo(videoPlayer);
46
47    playPauseBtn.addEventListener('click', () => {
48      if (videoPlayer.paused) {
49        videoPlayer.play();
50        playPauseBtn.textContent = 'Pause';
51      } else {
52        videoPlayer.pause();
53        playPauseBtn.textContent = 'Play';
54      }
55    });
56
57    fullScreenBtn.addEventListener('click', () => {
58      if (!document.fullscreenElement) {
59        if (videoPlayer.requestFullscreen) {
60          videoPlayer.requestFullscreen();
61        } else if (videoPlayer.mozRequestFullScreen) { /* Firefox */
62          videoPlayer.mozRequestFullScreen();
63        } else if (videoPlayer.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
64          videoPlayer.webkitRequestFullscreen();
65        } else if (videoPlayer.msRequestFullscreen) { /* IE/Edge */
66          videoPlayer.msRequestFullscreen();
67        }
68      } else {
69        if (document.exitFullscreen) {
70          document.exitFullscreen();
71        } else if (document.mozCancelFullScreen) { /* Firefox */
72          document.mozCancelFullScreen();
73        } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
74          document.webkitExitFullscreen();
75        } else if (document.msExitFullscreen) { /* IE/Edge */
76          document.msExitFullscreen();
77        }
78      }
79    });
80  });
81
82  // Handle participants (for demonstration purposes)
83  const peers = ['Peer 1', 'Peer 2', 'Peer 3'];
84  peers.forEach(peer => {
85    const li = document.createElement('li');
86    li.textContent = peer;
87    participantsList.appendChild(li);
88  });
89}
90
91// Function to handle new participant joining
92function handleNewParticipant(peerId) {
93  const videoElement = addParticipantVideo(peerId);
94  // Assume we get a stream from the peer
95  // For demonstration, we'll use a sample video source
96  videoElement.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
97}
98
99// Example usage of handleNewParticipant
100handleNewParticipant('Peer 4');

1   node index.js

1   Server running on port 3000