Janus WebRTC: 2026 Guide to Plugins, Setup, and Scaling

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Janus WebRTC Demo</title>
5  <style>
6    .participant {
7      display: inline-block;
8      margin: 10px;
9    }
10    .participant video {
11      width: 200px;
12      height: 150px;
13    }
14  </style>
15</head>
16<body>
17  <h1>Janus WebRTC Demo</h1>
18  <div id="joinScreen">
19    <input type="text" id="username" placeholder="Enter your name">
20    <button id="joinButton">Join</button>
21  </div>
22  <div id="videoScreen" style="display:none;">
23    <div id="localParticipant" class="participant">
24      <video id="localVideo" autoplay muted></video>
25    </div>
26    <div id="remoteParticipants"></div>
27    <button id="startButton">Start</button>
28    <button id="callButton">Call</button>
29    <button id="hangupButton">Hang Up</button>
30    <button id="muteButton">Mute</button>
31    <button id="videoButton">Video Off</button>
32  </div>
33  <script src="https://cdn.jsdelivr.net/npm/janus-gateway@0.11.5/janus.js"></script>
34  <script src="app.js"></script>
35</body>
36</html>

1let localStream;
2let remoteStream;
3let janusConnection;
4let janusPlugin;
5let myUsername;
6let myRoom = 1234; // Example room ID
7let remoteFeed = null;
8
9document.getElementById('joinButton').addEventListener('click', joinRoom);
10document.getElementById('startButton').addEventListener('click', start);
11document.getElementById('callButton').addEventListener('click', call);
12document.getElementById('hangupButton').addEventListener('click', hangUp);
13document.getElementById('muteButton').addEventListener('click', toggleMute);
14document.getElementById('videoButton').addEventListener('click', toggleVideo);
15
16function joinRoom() {
17  myUsername = document.getElementById('username').value;
18  if (myUsername === "") {
19    alert("Please enter a username");
20    return;
21  }
22  document.getElementById('joinScreen').style.display = 'none';
23  document.getElementById('videoScreen').style.display = 'block';
24  initializeJanus();
25}
26
27async function start() {
28  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
29  document.getElementById('localVideo').srcObject = localStream;
30  janusPlugin.createOffer({
31    media: { data: true },
32    success: function(jsep) {
33      const body = { request: "join", room: myRoom, ptype: "publisher", display: myUsername };
34      janusPlugin.send({ message: body, jsep: jsep });
35    },
36    error: function(error) {
37      console.error("WebRTC error:", error);
38    }
39  });
40}
41
42function initializeJanus() {
43  Janus.init({
44    debug: "all",
45    callback: function() {
46      janusConnection = new Janus({
47        server: 'ws://localhost:8188/',
48        success: function() {
49          janusConnection.attach({
50            plugin: "janus.plugin.videoroom",
51            success: function(pluginHandle) {
52              janusPlugin = pluginHandle;
53              janusPlugin.send({
54                message: { request: "create", room: myRoom }
55              });
56            },
57            error: function(error) {
58              console.error("Error attaching plugin", error);
59            },
60            onmessage: function(msg, jsep) {
61              let event = msg["videoroom"];
62              if (event) {
63                if (event === "joined") {
64                  let publishers = msg["publishers"];
65                  for (let i in publishers) {
66                    let id = publishers[i]["id"];
67                    let display = publishers[i]["display"];
68                    newRemoteFeed(id, display);
69                  }
70                } else if (event === "event") {
71                  // Handle events
72                }
73              }
74              if (jsep) {
75                janusPlugin.handleRemoteJsep({ jsep: jsep });
76              }
77            },
78            onlocalstream: function(stream) {
79              // Do nothing
80            },
81            onremotestream: function(stream) {
82              let remoteVideo = document.createElement('video');
83              remoteVideo.autoplay = true;
84              remoteVideo.srcObject = stream;
85              document.getElementById('remoteParticipants').appendChild(remoteVideo);
86            }
87          });
88        },
89        error: function(error) {
90          console.error("Error connecting to Janus", error);
91        }
92      });
93    }
94  });
95}
96
97function newRemoteFeed(id, display) {
98  janusConnection.attach({
99    plugin: "janus.plugin.videoroom",
100    opaqueId: "remoteFeed" + id,
101    success: function(pluginHandle) {
102      remoteFeed = pluginHandle;
103      let body = { request: "join", room: myRoom, ptype: "subscriber", feed: id };
104      remoteFeed.send({ message: body });
105    },
106    error: function(error) {
107      console.error("Error attaching plugin", error);
108    },
109    onmessage: function(msg, jsep) {
110      if (jsep) {
111        remoteFeed.createAnswer({
112          jsep: jsep,
113          media: { audioSend: false, videoSend: false },
114          success: function(jsep) {
115            let body = { request: "start", room: myRoom };
116            remoteFeed.send({ message: body, jsep: jsep });
117          },
118          error: function(error) {
119            console.error("WebRTC error:", error);
120          }
121        });
122      }
123    },
124    onremotestream: function(stream) {
125      let remoteVideo = document.createElement('video');
126      remoteVideo.autoplay = true;
127      remoteVideo.srcObject = stream;
128      document.getElementById('remoteParticipants').appendChild(remoteVideo);
129    }
130  });
131}
132
133function call() {
134  // Logic to start a WebRTC call using Janus
135}
136
137function hangUp() {
138  // Logic to hang up a WebRTC call
139}
140
141function toggleMute() {
142  const audioTracks = localStream.getAudioTracks();
143  if (audioTracks.length > 0) {
144    audioTracks[0].enabled = !audioTracks[0].enabled;
145    document.getElementById('muteButton').textContent = audioTracks[0].enabled ? 'Mute' : 'Unmute';
146  }
147}
148
149function toggleVideo() {
150  const videoTracks = localStream.getVideoTracks();
151  if (videoTracks.length > 0) {
152    videoTracks[0].enabled = !videoTracks[0].enabled;
153    document.getElementById('videoButton').textContent = videoTracks[0].enabled ? 'Video Off' : 'Video On';
154  }
155}

1   sudo janus

1   file:///path/to/your/janus-webrtc-app/index.html