Openfire WebRTC: Build Video Chat on XMPP in 2026

1<div id="conference-screen">
2    <div id="video-streams"></div>
3    <div id="controls">
4        <button id="mute-btn">Mute</button>
5        <button id="unmute-btn">Unmute</button>
6        <button id="video-off-btn">Video Off</button>
7        <button id="video-on-btn">Video On</button>
8        <button id="share-screen-btn">Share Screen</button>
9        <button id="start-recording-btn">Start Recording</button>
10        <button id="stop-recording-btn">Stop Recording</button>
11    </div>
12    <div id="participants">
13        <h3>Participants:</h3>
14        <ul id="participant-list"></ul>
15    </div>
16    <div id="chat-box">
17        <h3>Chat:</h3>
18        <input type="text" id="chat-input" placeholder="Enter message here" />
19        <button id="send-btn">Send</button>
20    </div>
21</div>

1let localStream;
2let peerConnections = {};
3const videoContainer = document.getElementById('video-streams');
4const participantList = document.getElementById('participant-list');
5
6navigator.mediaDevices.getUserMedia({ video: true, audio: true })
7    .then(stream => {
8        localStream = stream;
9        addVideoStream('local', stream);
10    })
11    .catch(error => {
12        console.error('Error accessing media devices.', error);
13    });
14
15function addVideoStream(id, stream) {
16    const videoElement = document.createElement('video');
17    videoElement.id = id;
18    videoElement.srcObject = stream;
19    videoElement.autoplay = true;
20    videoContainer.appendChild(videoElement);
21
22    const listItem = document.createElement('li');
23    listItem.id = `participant-${id}`;
24    listItem.textContent = id;
25    participantList.appendChild(listItem);
26}
27
28function removeVideoStream(id) {
29    const videoElement = document.getElementById(id);
30    if (videoElement) {
31        videoElement.remove();
32    }
33
34    const listItem = document.getElementById(`participant-${id}`);
35    if (listItem) {
36        listItem.remove();
37    }
38}
39
40// Example of handling a new participant joining
41function handleNewParticipant(id, stream) {
42    if (!peerConnections[id]) {
43        peerConnections[id] = stream;
44        addVideoStream(id, stream);
45    }
46}
47
48// Example of handling a participant leaving
49function handleParticipantLeave(id) {
50    if (peerConnections[id]) {
51        removeVideoStream(id);
52        delete peerConnections[id];
53    }
54}

1const socket = new WebSocket('wss://your-openfire-server/ws');
2
3socket.onopen = () => {
4    console.log('Connected to the signaling server');
5    socket.send(JSON.stringify({ type: 'join', name: 'local' }));
6};
7
8socket.onmessage = (message) => {
9    const data = JSON.parse(message.data);
10    switch (data.type) {
11        case 'new-participant':
12            handleNewParticipant(data.id, data.stream);
13            break;
14        case 'participant-left':
15            handleParticipantLeave(data.id);
16            break;
17        // Handle other signaling messages
18    }
19};
20
21function handleNewParticipant(id, stream) {
22    const peerConnection = new RTCPeerConnection();
23    peerConnections[id] = peerConnection;
24
25    peerConnection.ontrack = (event) => {
26        addVideoStream(id, event.streams[0]);
27    };
28
29    stream.getTracks().forEach(track => {
30        peerConnection.addTrack(track, stream);
31    });
32
33    // Exchange ICE candidates
34    peerConnection.onicecandidate = (event) => {
35        if (event.candidate) {
36            socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate, id: id }));
37        }
38    };
39
40    // Create and send an offer to the new participant
41    peerConnection.createOffer()
42        .then(offer => peerConnection.setLocalDescription(offer))
43        .then(() => {
44            socket.send(JSON.stringify({ type: 'offer', offer: peerConnection.localDescription, id: id }));
45        });
46}
47
48socket.onclose = () => {
49    console.log('Disconnected from the signaling server');
50};

1#video-streams {
2    display: flex;
3    flex-wrap: wrap;
4    justify-content: center;
5}
6
7#video-streams video {
8    margin: 5px;
9    border: 1px solid #ccc;
10    width: 30%;
11    height: auto;
12}

1function updateLayout() {
2    const videos = document.querySelectorAll('#video-streams video');
3    const count = videos.length;
4
5    videos.forEach(video => {
6        video.style.width = count > 2 ? '30%' : '45%';
7    });
8}
9
10// Call updateLayout whenever participants are added or removed
11function handleNewParticipant(id, stream) {
12    // Existing code...
13    updateLayout();
14}
15
16function handleParticipantLeave(id) {
17    // Existing code...
18    updateLayout();
19}

1    sudo systemctl start openfire

1    python3 -m http.server 8000