## Step 5: Implementing Participant View

### Displaying Participants

To create an engaging and interactive WebRTC application, displaying the video streams of all participants is essential. Implementing a dynamic participant view ensures that each user's video feed is shown and updated in real-time as they join or leave the session.

#### [a] HTML Structure for Participant View
    
```html title="HTML"
    <div id="participant-view">
        
    </div>
```
    
#### [b] CSS Styling for Participant View
    
```css
    #participant-view {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .participant {
        margin: 10px;
        border: 1px solid #ccc;
    }
    video {
        width: 300px;
        height: auto;
    }
``` 
    

### Managing Participant Data

JavaScript will handle the addition and removal of participant video elements dynamically. Use WebRTC to manage the streams and Ant Media Server to handle the signaling and connection setup.

#### [a] JavaScript for Managing Participants
    
```javascript title="JavaScript"
    const participantView = document.getElementById('participant-view');
    
    function addParticipant(participantId, stream) {
        const videoElement = document.createElement('video');
        videoElement.id = participantId;
        videoElement.srcObject = stream;
        videoElement.autoplay = true;
        videoElement.className = 'participant';
        participantView.appendChild(videoElement);
    }
    
    function removeParticipant(participantId) {
        const videoElement = document.getElementById(participantId);
        if (videoElement) {
            videoElement.srcObject.getTracks().forEach(track => track.stop());
            videoElement.remove();
        }
    }
```
    
#### [b] Handling Participant Events
**Adding a New Participant:**

```javascript title="JavaScript"
        // Example: When a new participant joins
        signalingServer.on('newParticipant', (participantId, stream) => {
            addParticipant(participantId, stream);
        });
```

**Removing a Participant:**

```javascript title="JavaScript"
        // Example: When a participant leaves
        signalingServer.on('participantLeft', participantId => {
            removeParticipant(participantId);
        });
```

### Implementing the WebRTC Stream Handling

To manage the streams, you need to handle the WebRTC connection setup and stream events using Ant Media Server's WebRTC functionalities.

#### JavaScript for WebRTC Stream Handling
    
```javascript title="JavaScript"
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    addParticipant('local', localStream);
    
    const peerConnection = new RTCPeerConnection();
    
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });
    
    peerConnection.ontrack = (event) => {
        const [stream] = event.streams;
        addParticipant(event.track.id, stream);
    };
    
    // Signaling logic to connect peers using Ant Media Server's signaling API
    signalingServer.on('offer', async (offer) => {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingServer.emit('answer', answer);
    });
    
    signalingServer.on('answer', async (answer) => {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
    });
    
    signalingServer.on('iceCandidate', async (candidate) => {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
    });
    
    peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
            signalingServer.emit('iceCandidate', event.candidate);
        }
    };
```

By implementing the participant view and managing participant data dynamically, you ensure that your WebRTC application provides a seamless and interactive experience. This setup allows users to see and interact with each other in real-time, making the application more engaging and functional.

## Step 6: Running Your Code Now

With all components in place, it’s time to run your WebRTC application using Ant Media Server. Ensure your server is up and running and that all configurations are correctly set.

### Start Ant Media Server
    
```bash title="bash"
    ./start.sh
```
    
### Open Your Application
Open your web browser and navigate to the URL where your application is hosted. For example:
    
```url
    http://localhost:5080/YourAppName
```
    
### Join the Session
Enter your username on the join screen and click "Join". You should now be able to see your video stream and those of other participants in real-time.
    

## Conclusion
Ant Media Server with WebRTC offers a powerful solution for real-time communication applications. By following the steps outlined in this guide, you can set up, configure, and run a robust WebRTC application, enabling low-latency video streaming and interactive features.

Discover how Ant Media Server provides ultra-low latency streaming for applications like live gaming, telehealth, and virtual classrooms. Learn about its features, setup, advanced uses, and best practices for optimizing performance.

## Introduction to Ant Media Server WebRTC

### What is Ant Media Server?

Ant Media Server is a powerful, scalable streaming engine designed to deliver low-latency live streams using various protocols such as WebRTC, RTMP, RTSP, and HLS. This media server supports adaptive bitrate streaming and provides tools for recording, broadcasting, and transcoding live streams. With its extensive feature set, Ant Media Server is an ideal solution for developers looking to implement robust live streaming applications.

### Overview of WebRTC Technology

WebRTC (Web Real-Time Communication) is an open-source project that enables web applications and websites to capture, and stream audio and video, and share data directly between browsers without requiring an intermediary server. This technology is crucial for real-time communications like video conferencing, live streaming, and peer-to-peer file sharing. Its ability to provide high-quality, low-latency streaming makes it an essential tool for modern web and mobile applications.

### Why Use Ant Media Server for WebRTC?

Combining the strengths of Ant Media Server with WebRTC technology offers a powerful platform for live streaming. Ant Media Server enhances WebRTC by providing a scalable infrastructure capable of handling numerous simultaneous connections, adaptive bitrate streaming, and support for various codecs and protocols. This makes it an excellent choice for developers seeking to build high-performance, real-time communication applications. Whether you're developing a video conferencing app, live broadcasting platform, or an interactive streaming service, Ant Media Server with WebRTC provides the tools and reliability you need.

## Getting Started with the Code!

### Create a New Ant Media Server WebRTC App
To start with Ant Media Server and WebRTC, you'll need to set up your development environment. Ensure Java is installed on your system, as Ant Media Server is built using Java. You can download the latest version from the [official Java website](https://www.java.com/en/download/).

#### [a] Clone the Ant Media Server repository
 
```bash title="bash"
git clone https://github.com/ant-media/Ant-Media-Server.git
```

#### [b] Navigate to the project directory

```bash title="bash"  
cd Ant-Media-Server  
```

### Install Ant Media Server
To install Ant Media Server, follow these steps:

#### [a] Download the latest release  
Visit the [Ant Media Server releases page](https://github.com/ant-media/Ant-Media-Server/releases) and download the appropriate version for your operating system.

#### [b] Install the server

**For Linux**

```bash title="bash"
sudo unzip ant-media-server-*.zip -d /usr/local/antmedia  
cd /usr/local/antmedia  
sudo ./start.sh  
```

**For Windows** 
- Unzip the downloaded file to a directory of your choice.  
- Open a command prompt, navigate to the unzipped directory, and run `start.bat`.

### Structure of the Project

Understanding the project structure is crucial for efficient development. The main components include:
- **webapps:** Contains the web applications and their configurations.  
- **conf:** Holds configuration files for the server.  
- **logs:** Directory where log files are stored.  
- **plugins:** Directory for server plugins.

### App Architecture
![sequence diagram illustrating how Ant Media Server works.png](https://strapi.videosdk.live/uploads/sequence_diagram_illustrating_how_Ant_Media_Server_works_f99def1ac7.png)
Ant Media Server's architecture is designed to handle various streaming protocols and provide low-latency communication. It includes:

- **Java-based backend:** Manages streaming sessions, user authentication, and data storage.  
- **WebRTC integration:** Ensures real-time communication with minimal latency.  
- **Adaptive bitrate streaming:** Adjusts the stream quality based on the user's network conditions.

By following these steps, you can set up and start developing your Ant Media Server WebRTC application, leveraging its powerful features for your streaming needs.

## Step 1: Setting Up the Environment

### Initial Setup and Configuration

To get started with Ant Media Server and WebRTC, you need to set up your development environment. Ensure you have the necessary tools and dependencies installed. Here's a step-by-step guide:

#### [a] Install Java
Ant Media Server is built using Java. Ensure you have the latest version of Java Development Kit (JDK) installed. You can download it from the official Java website.
    
```bash title="bash"
	sudo apt-get update
    sudo apt-get install openjdk-11-jdk
``` 
    
#### [b] Clone the Ant Media Server Repository
 Use Git to clone the Ant Media Server repository from GitHub.
    
```bash title="bash"
    git clone https://github.com/ant-media/Ant-Media-Server.git
    cd Ant-Media-Server
```
    
### Build the Project
Navigate to the project directory and build the project using Maven. Maven is a build automation tool used primarily for Java projects.
    
```bash title="bash"
    ./gradlew build
``` 

### Configuring Ant Media Server

After setting up the environment, configure Ant Media Server to enable WebRTC functionalities.

#### [a] Edit Configuration Files
Navigate to the configuration directory and edit the necessary configuration files to suit your needs.
    
```bash title="bash"
    cd conf
    nano red5.properties
```
    
#### [b] Enable WebRTC 
Ensure WebRTC is enabled in the configuration. You can find the relevant settings in the `red5.properties` file. Set `webrtc_enabled` to `true`.
    
```properties
    webrtc_enabled=true
``` 
    
#### [c] Start the Server
Finally, start the Ant Media Server to apply the configurations.
    
```bash title="bash"
	./start.sh
```
Now your environment is set up, and the Ant Media Server is configured to support WebRTC.

## Step 2: Wireframing All Components

### Designing the User Interface

Creating a functional and intuitive user interface (UI) is essential for a successful WebRTC application. Start by wireframing the UI to visualize the layout and interactions. The key components for a WebRTC application using Ant Media Server include a join screen, video display area, controls (mute, unmute, etc.), and participant list.

#### Join Screen    
    -   **Elements:** Username input, Join button.
    -   **Purpose:** Allows users to enter a username and join the video session.

#### Video Display Area
    -   **Elements:** Video streams of participants.
    -   **Purpose:** Displays the live video feeds of the connected participants.

#### Controls
    -   **Elements:** Mute/Unmute button, Start/Stop video button, Screen sharing button.
    -   **Purpose:** Provides essential functionalities for managing the video and audio streams.

#### Participant List
    -   **Elements:** List of participants, their status (muted/unmuted).
    -   **Purpose:** Shows the current participants in the session and their status.

### Component Breakdown

Let's break down the components further to understand their roles and interactions:

#### [a] Join Screen Implementation
        
```html title="HTML"
	<div id="join-screen">
		<input type="text" id="username" placeholder="Enter your username">
		<button id="join-btn">Join</button>
	</div>
```
        
#### [b] Video Display Area Implementation
        
```html title="HTML"
	<div id="video-container">
		
	</div>
```
        
#### [c] Controls Implementation
        
```html title="HTML"
	<div id="controls">
		<button id="mute-btn">Mute</button>
        <button id="video-btn">Stop Video</button>
        <button id="share-btn">Share Screen</button>
	</div>
```
        
#### [d] Participant List Implementation
        
```html title="HTML"
	<div id="participant-list">
		
	</div>
```

By wireframing these components, you create a clear blueprint for the UI, ensuring all necessary elements are included and properly arranged. This approach helps streamline the development process and provides a solid foundation for implementing the WebRTC application with Ant Media Server.

## Step 3: Implementing the Join Screen

### Creating the Join Screen UI

The join screen is the entry point for users to enter their names and join the video session. Implementing a simple yet effective join screen ensures a smooth user experience. Here's how to set up the join screen using HTML, CSS, and JavaScript.

#### [a] HTML Structure

```html title="HTML"
	<div id="join-screen">
        <input type="text" id="username" placeholder="Enter your username">
        <button id="join-btn">Join</button>
    </div>
    <div id="video-container" style="display:none;">
        
    </div>
```
    
#### [b] CSS Styling
    
```css title="CSS"
    #join-screen {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }
    #username {
        padding: 10px;
        margin-bottom: 10px;
        width: 200px;
    }
    #join-btn {
        padding: 10px 20px;
        cursor: pointer;
    }
```
    
#### [c] JavaScript for Handling User Inputs
    
```javascript title="JavaScript"
    document.getElementById('join-btn').addEventListener('click', function() {
        const username = document.getElementById('username').value;
        if (username) {
            joinSession(username);
        } else {
            alert('Please enter a username.');
        }
    });
    
    function joinSession(username) {
        // Logic to join the WebRTC session
        document.getElementById('join-screen').style.display = 'none';
        document.getElementById('video-container').style.display = 'block';
        // Initialize WebRTC connection here
    }
```
    

### Handling User Inputs

The join screen collects the username input from the user and initiates the process to join the WebRTC session. The JavaScript code handles the click event on the "Join" button, retrieves the username, and calls the `joinSession` function.

#### [a] Validating Username Input
Ensure the username input is not empty before proceeding. Display an alert if the input is invalid.
    
```javascript title="JavaScript"
    if (username) {
        joinSession(username);
    } else {
        alert('Please enter a username.');
    }
```
    
#### [b] Joining the WebRTC Session 
The `joinSession` function hides the join screen and displays the video container. This is where you will initialize the WebRTC connection using Ant Media Server's SDK.
    
```javascript title="JavaScript"
    function joinSession(username) {
        // Logic to join the WebRTC session
        document.getElementById('join-screen').style.display = 'none';
        document.getElementById('video-container').style.display = 'block';
        // Initialize WebRTC connection here
    }
``` 
By implementing the join screen, you create a user-friendly entry point for users to join your WebRTC session. This setup lays the groundwork for further development of the video streaming application using Ant Media Server.

## Step 4: Implementing Container and Controls

### Setting Up the Main Container

The main container is crucial for organizing video streams and control elements. It ensures that the UI remains structured and user-friendly, especially as new participants join or leave the session. Here's how to set up the main container:

#### [a] HTML Structure
    
```html title="HTML"
    <div id="main-container">
        <div id="video-container">
            
        </div>
        <div id="controls">
            <button id="mute-btn">Mute</button>
            <button id="video-btn">Stop Video</button>
            <button id="share-btn">Share Screen</button>
        </div>
    </div>
```
    
#### [b] CSS Styling
    
```css title="CSS"
    #main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }
    #video-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        margin-bottom: 20px;
    }
    #controls {
        display: flex;
        justify-content: center;
    }
    #controls button {
        margin: 0 10px;
        padding: 10px 20px;
        cursor: pointer;
    }
```

### Adding Controls and Features

Adding controls allows users to manage their audio and video streams, enhancing the interaction and usability of the application. Below is the JavaScript implementation for these controls:

#### [a] JavaScript for Controls
    
```javascript title="JavaScript"
    document.getElementById('mute-btn').addEventListener('click', function() {
        const isMuted = toggleMute();
        this.textContent = isMuted ? 'Unmute' : 'Mute';
    });
    
    document.getElementById('video-btn').addEventListener('click', function() {
        const isVideoStopped = toggleVideo();
        this.textContent = isVideoStopped ? 'Start Video' : 'Stop Video';
    });
    
    document.getElementById('share-btn').addEventListener('click', function() {
        shareScreen();
    });
    
    function toggleMute() {
        // Logic to mute/unmute audio
        let isMuted = false;
        // Implement mute/unmute functionality
        return isMuted;
    }
    
    function toggleVideo() {
        // Logic to stop/start video
        let isVideoStopped = false;
        // Implement stop/start video functionality
        return isVideoStopped;
    }
    
    function shareScreen() {
        // Logic to share screen
        // Implement screen sharing functionality
    }
```
    
#### [b] Handling Audio and Video Controls
    
- **Mute/Unmute:**

```javascript title="JavaScript"
        function toggleMute() {
            let isMuted = false;
            // Access the local stream and toggle audio track
            localStream.getAudioTracks()[0].enabled = !localStream.getAudioTracks()[0].enabled;
            isMuted = !localStream.getAudioTracks()[0].enabled;
            return isMuted;
        }
```
        
- **Stop/Start Video:**

```javascript title="JavaScript"
        function toggleVideo() {
            let isVideoStopped = false;
            // Access the local stream and toggle video track
            localStream.getVideoTracks()[0].enabled = !localStream.getVideoTracks()[0].enabled;
            isVideoStopped = !localStream.getVideoTracks()[0].enabled;
            return isVideoStopped;
        }
```

- **Share Screen:**

```javascript title="JavaScript"
        async function shareScreen() {
            try {
                const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
                // Replace the current video track with the screen stream track
                localStream.getVideoTracks()[0].stop();
                localStream.removeTrack(localStream.getVideoTracks()[0]);
                localStream.addTrack(screenStream.getVideoTracks()[0]);
            } catch (error) {
                console.error("Error sharing screen: ", error);
            }
        }
```

By setting up the main container and adding essential controls, you provide users with the ability to manage their participation in the WebRTC session effectively. These features enhance the interactivity and user experience of your application, making it more engaging and functional.

How to Build Ion WebRTC App?

How to Build LiveKit WebRTC App?

How to Build Licode WebRTC App?

How to Setup Ant Media Server in WebRTC App using JavaScript?

Ant Media WebRTC

Explore Our JavaScript Step-by-Step QuickStart Guide using VideoSDK

No credit card required to start | Let’s build together with VideoSDK

## Step 5: Implement Participant View

In this step, we will focus on implementing the participant view, which will display the video streams of all participants in the communication session. This involves updating the UI to dynamically handle multiple video streams and ensuring that the participant view is synchronized with the WebRTC peer connections.

### Displaying Participants

The participant view will show the local video stream and the video streams of remote participants. We'll need to handle the addition and removal of video elements dynamically based on the peer connections.

#### [a] JavaScript Code for Participant View

Update your `app.js` file to handle the display of participant video streams:

```javascript title="JavaScript"
document.getElementById('join-btn').addEventListener('click', joinSession);
document.getElementById('mute-btn').addEventListener('click', toggleMute);
document.getElementById('video-btn').addEventListener('click', toggleVideo);

let localStream;
let peerConnection;
let isMuted = false;
let isVideoStopped = false;

async function joinSession() {
    const name = document.getElementById('name').value;
    if (!name) {
        alert('Please enter your name');
        return;
    }

    document.getElementById('join-screen').style.display = 'none';
    document.getElementById('participant-view').style.display = 'block';

    peerConnection = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    
    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    const localVideo = document.createElement('video');
    localVideo.srcObject = localStream;
    localVideo.autoplay = true;
    localVideo.muted = true;
    document.getElementById('videos').appendChild(localVideo);

    const ws = new WebSocket(`ws://${window.location.host}/ws`);

    ws.onopen = () => {
        console.log('Connected to the signaling server');
        ws.send(JSON.stringify({ type: 'join', name: name }));
    };

    ws.onmessage = async (message) => {
        const data = JSON.parse(message.data);
        switch (data.type) {
            case 'offer':
                await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
                const answer = await peerConnection.createAnswer();
                await peerConnection.setLocalDescription(answer);
                ws.send(JSON.stringify({ type: 'answer', answer: answer }));
                break;
            case 'answer':
                await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer));
                break;
            case 'candidate':
                await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
                break;
            default:
                break;
        }
    };

    peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
            ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
        }
    };

    peerConnection.ontrack = (event) => {
        addRemoteStream(event.streams[0]);
    };
}

function toggleMute() {
    localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
    isMuted = !isMuted;
    document.getElementById('mute-btn').textContent = isMuted ? 'Unmute' : 'Mute';
}

function toggleVideo() {
    localStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
    isVideoStopped = !isVideoStopped;
    document.getElementById('video-btn').textContent = isVideoStopped ? 'Start Video' : 'Stop Video';
}

function addRemoteStream(stream) {
    const remoteVideo = document.createElement('video');
    remoteVideo.srcObject = stream;
    remoteVideo.autoplay = true;
    document.getElementById('videos').appendChild(remoteVideo);
}
```

#### [b] Functionality of addRemoteStream

The `addRemoteStream` function dynamically creates a new video element for each incoming remote stream and appends it to the `videos` container. This ensures that all participants' video streams are displayed in the participant view.

### Managing Streams

To handle the addition and removal of streams, ensure that the application correctly manages peer connections and updates the UI accordingly.

#### [a] Handling Remote Streams

The `peerConnection.ontrack` event is triggered whenever a new track is added to the connection. This is where we call the `addRemoteStream` function to add the new stream to the participant view.

#### [b] Removing Streams

To manage the removal of streams, you can add additional logic to handle the `peerConnection.onremovetrack` event and update the UI to remove the corresponding video element. Here’s a basic example of how to handle this:

```javascript title="JavaScript"
peerConnection.onremovetrack = (event) => {
    const videoElements = document.getElementById('videos').getElementsByTagName('video');
    for (let video of videoElements) {
        if (video.srcObject === event.streams[0]) {
            video.remove();
            break;
        }
    }
};
```

#### [c] Ensuring Synchronization

Ensure that the participant view is synchronized with the state of the WebRTC peer connections by:
- Handling connection state changes.
- Updating the UI based on connection status (e.g., adding/removing video elements).
- Managing media tracks appropriately to reflect the current state of each peer connection.

In this part, we have implemented the participant view to display the video streams of all participants. We added the necessary JavaScript code to dynamically handle multiple video streams and ensure that the participant view is synchronized with the WebRTC peer connections. In the final step, we will run the application, test it, and troubleshoot any issues that arise to ensure a smooth and functional real-time communication experience.

## Step 6: Run Your Code Now

In this final step, we will focus on running the application, testing it to ensure everything works correctly, and troubleshooting common issues. By the end of this step, you should have a fully functional real-time communication application using Pion WebRTC and Go.

### Running the Application

#### Starting the Server

To run your Pion WebRTC application, navigate to the root directory of your project in the terminal and start the Go server:

```sh title="sh"
go run main.go
```

This command will compile and run your Go application, starting the HTTP server on the specified port (e.g., `:8080`). You should see output indicating that the server has started:

```
Starting server at http://localhost:8080
```

#### Accessing the Application

Open your web browser and navigate to `http://localhost:8080`. You should see the join screen where you can enter your name and join the session.

### Testing the Application

#### Joining the Session

1. Enter your name in the input field on the join screen.
2. Click the "Join" button to enter the communication session.
3. You should see your local video stream appear in the participant view.

#### Adding More Participants

To test with multiple participants, open additional browser tabs or windows and repeat the join process with different names. Each new participant should see their local video stream as well as the video streams of other participants.

#### Testing Controls

- **Mute/Unmute:** Click the "Mute" button to mute your microphone. The button text should change to "Unmute." Click it again to unmute.
- **Start/Stop Video:** Click the "Stop Video" button to stop your video stream. The button text should change to "Start Video." Click it again to start the video.

#### Verifying Peer Connections

Check the browser's console (usually accessible by pressing F12 or right-clicking and selecting "Inspect") to verify that WebRTC peer connections are being established correctly. You should see logs indicating the connection state and ICE candidate exchanges.

### Troubleshooting (Common Issues and Solutions)

#### WebSocket Connection Fails
   - Ensure the WebSocket URL matches the server's address.
   - Check for any network or firewall restrictions.

#### No Video or Audio
   - Verify that your browser has permission to access the camera and microphone.
   - Check if the media devices are being correctly accessed using `navigator.mediaDevices.getUserMedia`.

#### ICE Candidate Errors
   - Ensure that the ICE server configuration is correct.
   - Check the network connectivity and firewall settings.

#### Signaling Issues
   - Verify that the signaling server is correctly handling offer, answer, and candidate messages.
   - Check the WebSocket message handling in both the client and server code.

#### Debugging Tips
- Use browser developer tools to inspect network requests, WebSocket messages, and console logs.
- Add additional logging in your Go and JavaScript code to trace the flow of signaling messages and peer connection states.
- Test in different browsers to ensure compatibility and identify browser-specific issues.

## Conclusion

Congratulations! You have successfully built a real-time communication application using Pion WebRTC and Go. Here's a recap of what we've covered:

- **Introduction to Pion WebRTC:** Understanding the technology and its benefits.
- **Getting Started:** Setting up the project structure, installing Pion WebRTC, and configuring the initial setup.
- **Join Screen Implementation:** Creating the join screen UI and handling user inputs.
- **Controls Implementation:** Adding mute/unmute and start/stop video functionalities.
- **Participant View Implementation:** Displaying the video streams of all participants.
- **Running and Testing:** Running the server, testing the application, and troubleshooting common issues.

With this foundation, you can further enhance your application by adding features such as screen sharing, chat functionality, and advanced media processing. The possibilities are vast, and Pion WebRTC provides a powerful platform to build innovative real-time communication solutions.


Learn how to build real-time communication applications using Pion WebRTC and Go. This guide covers setup, implementation, and troubleshooting for seamless audio and video communication.

How to Build WebRTC Streamer App?

How to Build Medooze WebRTC App?

How to Build SimpleRealtime Server (SRS) WebRTC App?

Building Real-time Communication App with Pion WebRTC with Golang(Go)

Pion WebRTC

Get 10,000 Free Minutes Every Months

## Step 5: Implement Participant View

The participant view is a crucial component of any video conferencing application. It displays the video streams of all participants in the room. In this section, we will implement the JavaScript code to manage and display multiple video streams in the participant view.

### Developing the Participant View

We have already set up the HTML structure for the participant view in previous parts. Now, we'll enhance our JavaScript to handle multiple participants effectively.

#### HTML Structure 
Ensure your participant view container is in place as shown in the previous parts.

#### JavaScript for Managing Participants
Add the following JavaScript code within the `<script>` tags at the bottom of your HTML file.

```html
<script>
    let localStream;
    let peerConnection;
    const participants = {};  // Object to store participants

    // Function to join a room
    async function joinRoom() {
        const roomId = document.getElementById('room-id').value.trim();
        if (!roomId) {
            alert('Please enter a room ID.');
            return;
        }

        document.querySelector('.join-screen').classList.remove('active');
        document.querySelector('.control-panel').classList.add('active');
        document.querySelector('.participant-view').classList.add('active');

        try {
            // Initialize WebRTC connection
            await initializeWebRTC(roomId);
        } catch (error) {
            console.error('Failed to join room:', error);
            alert('Failed to join room. Please try again.');
            document.querySelector('.join-screen').classList.add('active');
            document.querySelector('.control-panel').classList.remove('active');
            document.querySelector('.participant-view').classList.remove('active');
        }
    }

    // Function to initialize WebRTC connection
    async function initializeWebRTC(roomId) {
        const configuration = {
            iceServers: [
                { urls: 'stun:stun.l.google.com:19302' }
            ]
        };
        peerConnection = new RTCPeerConnection(configuration);

        // Handle ICE candidates
        peerConnection.onicecandidate = event => {
            if (event.candidate) {
                sendMessage('candidate', roomId, event.candidate);
            }
        };

        // Handle remote stream
        peerConnection.ontrack = event => {
            const remoteStream = event.streams[0];
            addParticipantStream(event.streams[0], event.streams[0].id);
        };

        // Get user media
        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
        addParticipantStream(localStream, 'local');

        // Create offer
        const offer = await peerConnection.createOffer();
        await peerConnection.setLocalDescription(offer);

        // Send offer to the server
        sendMessage('offer', roomId, offer);

        // Listen for answer from the server
        socket.on('answer', async (message) => {
            if (message.roomId === roomId) {
                const remoteDesc = new RTCSessionDescription(message.sdp);
                await peerConnection.setRemoteDescription(remoteDesc);
            }
        });

        // Listen for candidate from the server
        socket.on('candidate', async (message) => {
            if (message.roomId === roomId) {
                const candidate = new RTCIceCandidate(message.candidate);
                await peerConnection.addIceCandidate(candidate);
            }
        });

        // Listen for new participants
        socket.on('new-participant', (message) => {
            if (message.roomId === roomId) {
                // Handle new participant joining
                // This could involve setting up a new peer connection
            }
        });

        // Listen for participant leaving
        socket.on('participant-left', (message) => {
            if (message.roomId === roomId && participants[message.participantId]) {
                removeParticipantStream(message.participantId);
            }
        });
    }

    // Function to send messages to the server
    function sendMessage(type, roomId, data) {
        const message = { type, roomId, data };
        socket.emit(type, message);
    }

    // Function to add participant's stream to the view
    function addParticipantStream(stream, participantId) {
        const participantVideo = document.createElement('video');
        participantVideo.srcObject = stream;
        participantVideo.autoplay = true;
        participantVideo.playsInline = true;
        participantVideo.id = participantId;
        participantVideo.classList.add('participant-video');
        document.querySelector('.participant-view').appendChild(participantVideo);
        participants[participantId] = participantVideo;
    }

    // Function to remove participant's stream from the view
    function removeParticipantStream(participantId) {
        const participantVideo = document.getElementById(participantId);
        if (participantVideo) {
            participantVideo.srcObject.getTracks().forEach(track => track.stop());
            participantVideo.remove();
            delete participants[participantId];
        }
    }

    // Function to toggle audio
    function toggleAudio() {
        const audioTracks = localStream.getAudioTracks();
        if (audioTracks.length === 0) {
            console.log('No audio track found');
            return;
        }

        for (const track of audioTracks) {
            track.enabled = !track.enabled;
        }
    }

    // Function to toggle video
    function toggleVideo() {
        const videoTracks = localStream.getVideoTracks();
        if (videoTracks.length === 0) {
            console.log('No video track found');
            return;
        }

        for (const track of videoTracks) {
            track.enabled = !track.enabled;
        }
    }

    // Function to leave the room
    function leaveRoom() {
        document.querySelector('.join-screen').classList.add('active');
        document.querySelector('.control-panel').classList.remove('active');
        document.querySelector('.participant-view').classList.remove('active');

        // Close the peer connection and stop local tracks
        if (peerConnection) {
            peerConnection.close();
            peerConnection = null;
        }

        if (localStream) {
            localStream.getTracks().forEach(track => track.stop());
            localStream = null;
        }

        // Clean up participant view
        Object.keys(participants).forEach(participantId => removeParticipantStream(participantId));

        // Notify server about leaving the room
        sendMessage('leave', roomId, {});
    }

    // Initialize socket.io client
    const socket = io.connect('http://localhost:8080');
</script>
```

### Explanation of the Code

#### Participants Object 
- An object to store the video elements of participants, keyed by participant ID.

#### Add Participant Stream Function 
   - Creates a video element for the participant's stream.
   - Sets the video element's `srcObject` to the participant's media stream.
   - Adds the video element to the participant view and stores it in the `participants` object.

#### Remove Participant Stream Function
   - Retrieves the video element of the participant using their ID.
   - Stops all tracks of the participant's media stream and removes the video element from the DOM.
   - Deletes the participant's entry from the `participants` object.

#### Socket Event Listeners
   - `new-participant`: Handles new participants joining the room. You may need to set up new peer connections for each participant.
   - `participant-left`: Removes the video element of a participant who has left the room.

By implementing these features, your SRS WebRTC application will now be able to display and manage multiple participant video streams. This completes the core functionality needed for a basic video conferencing application. In the final part, we will cover running your code and provide a conclusion along with a comprehensive FAQ section.

## Step 6: Run Your Code Now

With all the core functionalities implemented, it's time to run your SimpleRealtime Server (SRS) WebRTC application. This final part will guide you through the steps to test your application and ensure everything is working as expected.

### Running the Application

#### [a] Start the SRS Server
Navigate to your SRS directory and start the server.

```bash
   cd /path/to/srs/trunk
   ./objs/srs -c conf/srs.conf
```

#### [b] Start Your Web Server
If you're serving your HTML file through a local web server, ensure it is running. You can use a simple server like `http-server` or serve through a more advanced setup.

```bash
   http-server -p 8080
```
If you're using a different method to serve your HTML files, ensure it's correctly configured.

#### [c] Open Your Application in a Browser 
   - Open your web browser and navigate to the local address where your HTML file is being served, such as `http://localhost:8080`.

#### [d] Test the Application 
   - Enter a room ID in the join screen and click "Join".
   - Test the audio and video controls by muting/unmuting and enabling/disabling video.
   - Join the same room from another browser or device to ensure participant views are correctly displayed and managed.
   - Use the "Leave Room" button to verify that leaving the room works as expected and cleans up resources.

## Conclusion

In this tutorial, we've walked through the process of setting up a SimpleRealtime Server (SRS) WebRTC application from scratch. We've covered configuring the server, building the HTML structure, implementing the join screen, adding controls, and managing participant views. By following these steps, you've created a basic yet functional video conferencing application.

Learn how to set up and use SimpleRealtime Server (SRS) for WebRTC. This comprehensive guide covers configuration, implementation, and optimization of SRS for real-time video communication.

How to Build Janus WebRTC App?

How to Build MediaSoup WebRTC App?

How to Build MediaMTX WebRTC App?

How to Build SimpleRealtime Server (SRS) WebRTC App with JavaScript?

SimpleRealtime Server (SRS) for WebRTC

JavaScript Step-by-Step QuickStart Guide using VideoSDK

## Step 5: Implement Participant View

The participant view is a crucial part of any WebRTC application, as it displays the video and audio streams from all participants in the session. In this section, we'll extend our HTML and JavaScript code to handle multiple participant streams, ensuring they are displayed correctly on the user interface.

### Creating the Participant View

First, update your `index.html` file to include a container for participant videos:

```html title="HTML"
<!DOCTYPE html>
<html>
<head>
  <title>Janus WebRTC Demo</title>
  <style>
    .participant {
      display: inline-block;
      margin: 10px;
    }
    .participant video {
      width: 200px;
      height: 150px;
    }
  </style>
</head>
<body>
  <h1>Janus WebRTC Demo</h1>
  <div id="joinScreen">
    <input type="text" id="username" placeholder="Enter your name">
    <button id="joinButton">Join</button>
  </div>
  <div id="videoScreen" style="display:none;">
    <div id="localParticipant" class="participant">
      <video id="localVideo" autoplay muted></video>
    </div>
    <div id="remoteParticipants"></div>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
    <button id="muteButton">Mute</button>
    <button id="videoButton">Video Off</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/janus-gateway@0.11.5/janus.js"></script>
  <script src="app.js"></script>
</body>
</html>
```

Next, update `app.js` to handle multiple participant streams:

```javascript title="JavaScript"
let localStream;
let remoteStream;
let janusConnection;
let janusPlugin;
let myUsername;
let myRoom = 1234; // Example room ID
let remoteFeed = null;

document.getElementById('joinButton').addEventListener('click', joinRoom);
document.getElementById('startButton').addEventListener('click', start);
document.getElementById('callButton').addEventListener('click', call);
document.getElementById('hangupButton').addEventListener('click', hangUp);
document.getElementById('muteButton').addEventListener('click', toggleMute);
document.getElementById('videoButton').addEventListener('click', toggleVideo);

function joinRoom() {
  myUsername = document.getElementById('username').value;
  if (myUsername === "") {
    alert("Please enter a username");
    return;
  }
  document.getElementById('joinScreen').style.display = 'none';
  document.getElementById('videoScreen').style.display = 'block';
  initializeJanus();
}

async function start() {
  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  document.getElementById('localVideo').srcObject = localStream;
  janusPlugin.createOffer({
    media: { data: true },
    success: function(jsep) {
      const body = { request: "join", room: myRoom, ptype: "publisher", display: myUsername };
      janusPlugin.send({ message: body, jsep: jsep });
    },
    error: function(error) {
      console.error("WebRTC error:", error);
    }
  });
}

function initializeJanus() {
  Janus.init({
    debug: "all",
    callback: function() {
      janusConnection = new Janus({
        server: 'ws://localhost:8188/',
        success: function() {
          janusConnection.attach({
            plugin: "janus.plugin.videoroom",
            success: function(pluginHandle) {
              janusPlugin = pluginHandle;
              janusPlugin.send({
                message: { request: "create", room: myRoom }
              });
            },
            error: function(error) {
              console.error("Error attaching plugin", error);
            },
            onmessage: function(msg, jsep) {
              let event = msg["videoroom"];
              if (event) {
                if (event === "joined") {
                  let publishers = msg["publishers"];
                  for (let i in publishers) {
                    let id = publishers[i]["id"];
                    let display = publishers[i]["display"];
                    newRemoteFeed(id, display);
                  }
                } else if (event === "event") {
                  // Handle events
                }
              }
              if (jsep) {
                janusPlugin.handleRemoteJsep({ jsep: jsep });
              }
            },
            onlocalstream: function(stream) {
              // Do nothing
            },
            onremotestream: function(stream) {
              let remoteVideo = document.createElement('video');
              remoteVideo.autoplay = true;
              remoteVideo.srcObject = stream;
              document.getElementById('remoteParticipants').appendChild(remoteVideo);
            }
          });
        },
        error: function(error) {
          console.error("Error connecting to Janus", error);
        }
      });
    }
  });
}

function newRemoteFeed(id, display) {
  janusConnection.attach({
    plugin: "janus.plugin.videoroom",
    opaqueId: "remoteFeed" + id,
    success: function(pluginHandle) {
      remoteFeed = pluginHandle;
      let body = { request: "join", room: myRoom, ptype: "subscriber", feed: id };
      remoteFeed.send({ message: body });
    },
    error: function(error) {
      console.error("Error attaching plugin", error);
    },
    onmessage: function(msg, jsep) {
      if (jsep) {
        remoteFeed.createAnswer({
          jsep: jsep,
          media: { audioSend: false, videoSend: false },
          success: function(jsep) {
            let body = { request: "start", room: myRoom };
            remoteFeed.send({ message: body, jsep: jsep });
          },
          error: function(error) {
            console.error("WebRTC error:", error);
          }
        });
      }
    },
    onremotestream: function(stream) {
      let remoteVideo = document.createElement('video');
      remoteVideo.autoplay = true;
      remoteVideo.srcObject = stream;
      document.getElementById('remoteParticipants').appendChild(remoteVideo);
    }
  });
}

function call() {
  // Logic to start a WebRTC call using Janus
}

function hangUp() {
  // Logic to hang up a WebRTC call
}

function toggleMute() {
  const audioTracks = localStream.getAudioTracks();
  if (audioTracks.length > 0) {
    audioTracks[0].enabled = !audioTracks[0].enabled;
    document.getElementById('muteButton').textContent = audioTracks[0].enabled ? 'Mute' : 'Unmute';
  }
}

function toggleVideo() {
  const videoTracks = localStream.getVideoTracks();
  if (videoTracks.length > 0) {
    videoTracks[0].enabled = !videoTracks[0].enabled;
    document.getElementById('videoButton').textContent = videoTracks[0].enabled ? 'Video Off' : 'Video On';
  }
}
```

### Handling Multiple Streams with Janus SFU

The `onremotestream` callback in the `initializeJanus` function handles the display of remote streams. When a remote stream is received, a new video element is created, and the stream is assigned to it. This video element is then appended to the `remoteParticipants` div.

The `newRemoteFeed` function attaches a new instance of the `janus.plugin.videoroom` plugin for each new remote participant. It handles the signaling and stream negotiation required to receive remote streams.

By implementing these changes, you can display video and audio streams from multiple participants in your WebRTC session, creating a dynamic and interactive user experience. In the final section, we'll discuss how to run and test your application to ensure everything works smoothly.

## Step 6: Run Your Code Now

With the code and configuration in place, it's time to run your Janus WebRTC application and test its functionality. Follow these steps to start the Janus server and load your application in a web browser:

#### [a] Start the Janus Server
Open a terminal and navigate to the Janus installation directory. Start the Janus server by running:

```bash title="bash"
   sudo janus
```
Ensure the server starts without any errors.

#### [b] Open the Web Application
Open your web browser and navigate to the directory where your HTML file is located. Open the `index.html` file. For example:

```bash title="bash"
   file:///path/to/your/janus-webrtc-app/index.html
```

#### [c] Join and Test
Enter a username, click "Join," and then click "Start." Allow access to your camera and microphone. Test the "Call" and "Hang Up" buttons to ensure functionality.

### Troubleshooting Common Issues

- **WebSocket Connection Errors:** Ensure the WebSocket server URL in your `app.js` matches the Janus server's WebSocket configuration.
- **Media Access Issues:** Check browser permissions for accessing the camera and microphone.
- **Plugin Errors:** Ensure the necessary plugins are enabled and correctly configured in the Janus server.

## Conclusion

In this article, we building real-time chat application using Janus WebRTC Media Server with JavaScript from scratch. We've covered everything from installing Janus, configuring it, creating a user-friendly join screen, implementing essential controls, and displaying participant views. By following these steps, you now have a foundational understanding of how to leverage Janus WebRTC for real-time communication applications. Janus's flexibility and plugin-based architecture make it a powerful tool for developing scalable and customizable WebRTC solutions.

Discover how to build real-time applications using the Janus WebRTC Media Server with JavaScript. Get expert tips, tools, and a step-by-step guide for seamless integration.

## What is WebRTC?

Web Real-Time Communication ([WebRTC](https://www.videosdk.live/blog/webrtc)) is revolutionizing how we engage in real-time communication over the internet. It enables audio, video, and data sharing directly between browsers and devices, without the need for plugins or external software. This technology forms the backbone of applications like video conferencing, online gaming, and peer-to-peer file sharing.

## What is Janus WebRTC?

Janus WebRTC stands out as a powerful, open-source WebRTC server that supports a wide range of real-time communication scenarios. Developed by Meetecho, Janus acts as a general-purpose server, enabling developers to implement WebRTC solutions with robust features and high flexibility. Its architecture is designed around plugins, which provide specific functionalities such as video conferencing, streaming, and recording. This modular design allows developers to extend Janus's capabilities easily and tailor it to their specific needs.

At its core, Janus serves as both a Selective Forwarding Unit ([SFU](https://en.wikipedia.org/wiki/Simon_Fraser_University)) and a [SIP](https://www.videosdk.live/developer-hub/sip) Gateway. As an SFU, Janus efficiently manages multiple media streams, forwarding only the necessary data to each participant, thereby optimizing bandwidth usage and enhancing scalability. Its role as a SIP Gateway allows for seamless integration with traditional telephony systems, bridging the gap between old and new communication technologies.

In the following sections, we will delve into the practical aspects of setting up and using Janus WebRTC. We will cover everything from installation to implementing key features, providing a step-by-step guide to building your own WebRTC application with Janus. Whether you are a seasoned developer or new to WebRTC, this guide will equip you with the knowledge and tools to leverage Janus for your real-time communication needs.

## Let`s Build Real-Time Chat Application Using Janus WebRTC Media Server

### Getting Started with the Code
In this section, we will guide you through the initial steps of setting up your Janus WebRTC application. From cloning the repository to understanding the project structure, we'll cover everything you need to get started.

### Create a New Janus WebRTC App

To begin, you need to clone the Janus WebRTC repository from GitHub. Open your terminal and execute the following command:

```bash title="bash"
git clone https://github.com/meetecho/janus-gateway.git
```

This command will download the latest Janus source code to your local machine.

### Install Janus Dependencies

Before you can build Janus, you need to install its dependencies. Janus relies on several libraries, including `libnice`, `libsrtp`, and `libssl`. Install these dependencies using the package manager of your operating system. For instance, on Ubuntu, you can use:

```bash title="bash"
sudo apt-get install libmicrohttpd-dev libjansson-dev libssl-dev libsofia-sip-ua-dev libglib2.0-dev libopus-dev libogg-dev libcurl4-openssl-dev liblua5.3-dev
```

Once the dependencies are installed, navigate to the Janus directory and build the project:

```bash title="bash"
cd janus-gateway
sh autogen.sh
./configure
make
sudo make install
```

### Structure of the Project

After installation, it’s essential to understand the project structure. The main directories include:
- `cfg`: Contains configuration files for Janus and its plugins.
- `html`: Holds the sample web applications.
- `plugins`: Directory for Janus plugins that extend its functionality.
- `src`: Source code for the Janus core server.

### App Architecture
![janus-webrtc-app](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Janus_Web_RTC_works_985e1619a9.png)
Janus's architecture is modular and plugin-based. Each plugin serves a specific purpose, such as handling video rooms, streaming, or SIP communication. This architecture allows you to enable only the functionalities you need and extend Janus with custom plugins as required.

Now that you have a basic understanding of the project setup and architecture, we can move on to configuring Janus and creating your first WebRTC application. In the next sections, we'll guide you through setting up your environment and writing the necessary code to get your application up and running.

## Step 1: Get Started with Configuration
Configuring Janus for the first time involves setting up its core settings and enabling the necessary plugins for your application. Follow these steps to ensure a smooth setup process.

### Configuring Janus for First Use

Begin by navigating to the `cfg` directory within the Janus installation folder. Here, you will find several configuration files, including `janus.cfg`, which is the main configuration file for Janus. Open `janus.cfg` in your preferred text editor:

```bash title="bash"
cd /usr/local/etc/janus
sudo nano janus.cfg
```

#### [a] Core Configuration

In `janus.cfg`, you’ll configure the core settings of Janus. Key settings include:

#### [b] General settings
Enable or disable debug logging and set the log level.

```ini title="ini"
  [general]
  debug_level = 4
```

#### [c] Network settings
Configure the IP addresses and ports for Janus to listen on.
  
```ini title="ini"
  [nat]
  stun_server = stun.l.google.com:19302
```

#### [d] WebSocket settings
Enable WebSocket support for signaling between the client and server.

```ini title="ini"
  [websockets]
  ws = yes
  ws_port = 8188
```

### Plugin Configuration

Next, you need to configure the plugins that Janus will use. For example, to enable the video room plugin, open the `janus.plugin.videoroom.cfg` file:

```bash title="bash"
sudo nano janus.plugin.videoroom.cfg
```

Ensure the plugin is enabled and configure any specific settings required:

```ini title="ini"
[general]
enabled = yes
```

### Setting Up WebSockets and HTTP Endpoints

WebSockets are crucial for real-time communication in WebRTC. In `janus.cfg`, ensure WebSocket support is enabled:

```ini title="ini"
[websockets]
ws = yes
ws_port = 8188
```

Similarly, configure the HTTP endpoints for REST API calls:

```ini title="ini"
[http]
http = yes
http_port = 8088
```

#### Core and Plugin-Specific Configurations

Make sure to review and adjust any other core and plugin-specific settings as needed. Save and close the configuration files once you've made the necessary changes.

### Starting Janus Media Server

After configuring Janus, start the server to apply your changes:

```bash title="bash"
sudo janus
```

Janus should now be running with your specified configurations. In the next section, we will set up the environment and create a basic HTML/JavaScript front end to interact with Janus, initializing a WebRTC connection and handling signaling.

This step completes the initial setup and configuration, preparing Janus to handle WebRTC sessions effectively.

## Step 2: Wireframe All the Components

Now that you have configured Janus, it's time to set up the environment and create the front end for your WebRTC application. This involves creating a basic HTML/JavaScript interface to interact with Janus, initializing WebRTC connections, and handling the signaling process.

### Setting Up the Environment

To start, create a new directory for your web application and navigate into it:

```bash title="bash"
mkdir janus-webrtc-app
cd janus-webrtc-app
```

Inside this directory, create an `index.html` file for your application's front end:

```html title="HTML"
<!DOCTYPE html>
<html>
<head>
  <title>Janus WebRTC Demo</title>
</head>
<body>
  <h1>Janus WebRTC Demo</h1>
  <div>
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>
  <button id="startButton">Start</button>
  <button id="callButton">Call</button>
  <button id="hangupButton">Hang Up</button>
  <script src="app.js"></script>
</body>
</html>
```

### Initializing a WebRTC Connection

Next, create an `app.js` file to handle the WebRTC connection logic:

```javascript title="JavaScript"
let localStream;
let remoteStream;
let janusConnection;
let janusPlugin;

document.getElementById('startButton').addEventListener('click', start);
document.getElementById('callButton').addEventListener('click', call);
document.getElementById('hangupButton').addEventListener('click', hangUp);

async function start() {
  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  document.getElementById('localVideo').srcObject = localStream;
  initializeJanus();
}

function initializeJanus() {
  Janus.init({
    debug: "all",
    callback: function() {
      janusConnection = new Janus({
        server: 'ws://localhost:8188/',
        success: function() {
          janusConnection.attach({
            plugin: "janus.plugin.videoroom",
            success: function(pluginHandle) {
              janusPlugin = pluginHandle;
              // Additional plugin initialization can be done here
            },
            error: function(error) {
              console.error("Error attaching plugin", error);
            }
          });
        },
        error: function(error) {
          console.error("Error connecting to Janus", error);
        }
      });
    }
  });
}

function call() {
  // Logic to start a WebRTC call using Janus
}

function hangUp() {
  // Logic to hang up a WebRTC call
}
```

### Explanation of the Signaling Process and Handling ICE Candidates

In the `initializeJanus` function, we initialize the Janus library and establish a connection to the Janus server via WebSocket. Once connected, we attach to the `janus.plugin.videoroom` plugin, which will handle our video call functionality. The signaling process involves exchanging SDP (Session Description Protocol) messages and ICE (Interactive Connectivity Establishment) candidates between the client and the Janus server to establish a peer-to-peer connection.

In the `start` function, we capture the local media stream using `getUserMedia`, which prompts the user to grant access to their camera and microphone. The captured stream is then displayed in the `localVideo` element.

The `call` and `hangUp` functions will contain the logic to initiate and terminate WebRTC calls, which we will implement in the following steps.

By setting up this basic structure, you have laid the groundwork for your WebRTC application. In the next sections, we will build on this foundation to implement a join screen, user controls, and participant views.

## Step 3: Implement Join Screen

With the basic environment and initial setup complete, the next step is to create a user-friendly join screen that allows participants to enter and join a WebRTC session. This involves designing the user interface and implementing the necessary JavaScript code to handle user input and session management.

### Building the Join Screen UI

First, update your `index.html` file to include a join screen where users can enter their names and join a session:

```html title="HTML"
<!DOCTYPE html>
<html>
<head>
  <title>Janus WebRTC Demo</title>
</head>
<body>
  <h1>Janus WebRTC Demo</h1>
  <div id="joinScreen">
    <input type="text" id="username" placeholder="Enter your name">
    <button id="joinButton">Join</button>
  </div>
  <div id="videoScreen" style="display:none;">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/janus-gateway@0.11.5/janus.js"></script>
  <script src="app.js"></script>
</body>
</html>
```

Next, update `app.js` to handle the join screen logic:

```javascript title="JavaScript"
let localStream;
let remoteStream;
let janusConnection;
let janusPlugin;
let myUsername;
let myRoom = 1234; // Example room ID

document.getElementById('joinButton').addEventListener('click', joinRoom);
document.getElementById('startButton').addEventListener('click', start);
document.getElementById('callButton').addEventListener('click', call);
document.getElementById('hangupButton').addEventListener('click', hangUp);

function joinRoom() {
  myUsername = document.getElementById('username').value;
  if (myUsername === "") {
    alert("Please enter a username");
    return;
  }
  document.getElementById('joinScreen').style.display = 'none';
  document.getElementById('videoScreen').style.display = 'block';
  initializeJanus();
}

async function start() {
  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  document.getElementById('localVideo').srcObject = localStream;
  janusPlugin.createOffer({
    media: { data: true },
    success: function(jsep) {
      const body = { request: "join", room: myRoom, ptype: "publisher", display: myUsername };
      janusPlugin.send({ message: body, jsep: jsep });
    },
    error: function(error) {
      console.error("WebRTC error:", error);
    }
  });
}

function initializeJanus() {
  Janus.init({
    debug: "all",
    callback: function() {
      janusConnection = new Janus({
        server: 'ws://localhost:8188/',
        success: function() {
          janusConnection.attach({
            plugin: "janus.plugin.videoroom",
            success: function(pluginHandle) {
              janusPlugin = pluginHandle;
              janusPlugin.send({
                message: { request: "create", room: myRoom }
              });
            },
            error: function(error) {
              console.error("Error attaching plugin", error);
            }
          });
        },
        error: function(error) {
          console.error("Error connecting to Janus", error);
        }
      });
    }
  });
}

function call() {
  // Logic to start a WebRTC call using Janus
}

function hangUp() {
  // Logic to hang up a WebRTC call
}
```

### Managing User States and Sessions on the Server-Side

The `joinRoom` function captures the username input and toggles the display between the join screen and the video screen. It then calls `initializeJanus` to set up the connection with the Janus server.

In the `initializeJanus` function, after successfully attaching to the `janus.plugin.videoroom` plugin, we send a request to create or join a room. The `start` function captures the local media stream and creates an offer to join the specified room.

By implementing these changes, you create a join screen that allows users to enter a session and sets up the WebRTC connection. In the next steps, we'll add more functionality to handle calls and manage user interactions within the session.

## Step 4: Implement Controls

Having set up the join screen and initialized the WebRTC connection, the next step is to implement user controls. These controls will enable users to manage their audio and video streams, such as muting/unmuting their microphone and turning their camera on/off. Additionally, we'll handle sending commands to Janus to manage these states.

### Adding User Controls

First, update your `index.html` file to include buttons for muting and toggling the video:

```html title="HTML"
<!DOCTYPE html>
<html>
<head>
  <title>Janus WebRTC Demo</title>
</head>
<body>
  <h1>Janus WebRTC Demo</h1>
  <div id="joinScreen">
    <input type="text" id="username" placeholder="Enter your name">
    <button id="joinButton">Join</button>
  </div>
  <div id="videoScreen" style="display:none;">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
    <button id="muteButton">Mute</button>
    <button id="videoButton">Video Off</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/janus-gateway@0.11.5/janus.js"></script>
  <script src="app.js"></script>
</body>
</html>
```

Next, update `app.js` to handle the new controls:

```javascript title="JavaScript"
let localStream;
let remoteStream;
let janusConnection;
let janusPlugin;
let myUsername;
let myRoom = 1234; // Example room ID

document.getElementById('joinButton').addEventListener('click', joinRoom);
document.getElementById('startButton').addEventListener('click', start);
document.getElementById('callButton').addEventListener('click', call);
document.getElementById('hangupButton').addEventListener('click', hangUp);
document.getElementById('muteButton').addEventListener('click', toggleMute);
document.getElementById('videoButton').addEventListener('click', toggleVideo);

function joinRoom() {
  myUsername = document.getElementById('username').value;
  if (myUsername === "") {
    alert("Please enter a username");
    return;
  }
  document.getElementById('joinScreen').style.display = 'none';
  document.getElementById('videoScreen').style.display = 'block';
  initializeJanus();
}

async function start() {
  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  document.getElementById('localVideo').srcObject = localStream;
  janusPlugin.createOffer({
    media: { data: true },
    success: function(jsep) {
      const body = { request: "join", room: myRoom, ptype: "publisher", display: myUsername };
      janusPlugin.send({ message: body, jsep: jsep });
    },
    error: function(error) {
      console.error("WebRTC error:", error);
    }
  });
}

function initializeJanus() {
  Janus.init({
    debug: "all",
    callback: function() {
      janusConnection = new Janus({
        server: 'ws://localhost:8188/',
        success: function() {
          janusConnection.attach({
            plugin: "janus.plugin.videoroom",
            success: function(pluginHandle) {
              janusPlugin = pluginHandle;
              janusPlugin.send({
                message: { request: "create", room: myRoom }
              });
            },
            error: function(error) {
              console.error("Error attaching plugin", error);
            }
          });
        },
        error: function(error) {
          console.error("Error connecting to Janus", error);
        }
      });
    }
  });
}

function call() {
  // Logic to start a WebRTC call using Janus
}

function hangUp() {
  // Logic to hang up a WebRTC call
}

function toggleMute() {
  const audioTracks = localStream.getAudioTracks();
  if (audioTracks.length > 0) {
    audioTracks[0].enabled = !audioTracks[0].enabled;
    document.getElementById('muteButton').textContent = audioTracks[0].enabled ? 'Mute' : 'Unmute';
  }
}

function toggleVideo() {
  const videoTracks = localStream.getVideoTracks();
  if (videoTracks.length > 0) {
    videoTracks[0].enabled = !videoTracks[0].enabled;
    document.getElementById('videoButton').textContent = videoTracks[0].enabled ? 'Video Off' : 'Video On';
  }
}
```

### Handling User Inputs and Sending Commands to Janus

The `toggleMute` and `toggleVideo` functions handle the logic for muting/unmuting the microphone and toggling the video on/off. They manipulate the `enabled` property of the respective media tracks in the `localStream`. The button text updates accordingly to reflect the current state.

When a user clicks the mute or video button, the corresponding function is called, and the state of the local media tracks is changed. The Janus server receives these updates through the WebRTC connection, ensuring that other participants are aware of the changes.

By implementing these controls, you allow users to manage their media streams effectively during a session. In the next section, we will focus on creating the participant view to display video and audio streams from all session participants.

Building Real-Time Application Using Janus WebRTC Media Server with JavaScript

Janus WebRTC

## Step 5: Implement Participant View

### [a] Setting up Participant View

In this step, we will implement the participant view to handle multiple video/audio streams in your MediaMTX WebRTC application. This involves updating the client-side JavaScript to manage WebRTC connections and display streams from multiple participants.

### [b] HTML for Participant View

Update the `room.html` file to handle multiple video elements:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MediaMTX WebRTC Room</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Room: <span id="roomIdDisplay"></span></h1>
        <div id="participants"></div>
        <div class="controls">
            <button id="playButton">Play</button>
            <button id="pauseButton">Pause</button>
            <button id="stopButton">Stop</button>
        </div>
    </div>
    <script src="room.js"></script>
</body>
</html>
```

### [c] CSS for Participant View

Update `styles.css` to style the participant video elements:

```css title="CSS"
#participants video {
    width: 45%;
    margin: 10px;
    border: 2px solid #007bff;
    border-radius: 8px;
}
```

### [d] JavaScript for Managing Participant Streams

Update `room.js` to handle multiple participants:

```javascript title="JavaScript"
document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const roomId = urlParams.get('roomId');
    document.getElementById('roomIdDisplay').textContent = roomId;

    const participantsContainer = document.getElementById('participants');

    // Function to create a video element for a participant
    function createVideoElement(participantId) {
        const videoElement = document.createElement('video');
        videoElement.id = `participant-${participantId}`;
        videoElement.autoplay = true;
        videoElement.playsInline = true;
        participantsContainer.appendChild(videoElement);
        return videoElement;
    }

    // WebRTC setup
    const configuration = {
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' }
        ]
    };

    const peerConnections = {};

    // Function to handle new participant connection
    function handleNewParticipant(participantId) {
        const peerConnection = new RTCPeerConnection(configuration);

        peerConnection.ontrack = function (event) {
            const videoElement = createVideoElement(participantId);
            videoElement.srcObject = event.streams[0];
        };

        peerConnections[participantId] = peerConnection;
    }

    // Function to handle Play button
    document.getElementById('playButton').addEventListener('click', function () {
        Object.values(peerConnections).forEach(pc => pc.getReceivers().forEach(receiver => receiver.track.enabled = true));
    });

    // Function to handle Pause button
    document.getElementById('pauseButton').addEventListener('click', function () {
        Object.values(peerConnections).forEach(pc => pc.getReceivers().forEach(receiver => receiver.track.enabled = false));
    });

    // Function to handle Stop button
    document.getElementById('stopButton').addEventListener('click', function () {
        Object.values(peerConnections).forEach(pc => pc.close());
        participantsContainer.innerHTML = '';
    });

    // Add WebRTC signaling and connection setup here...
});
```

### [e] Backend Support for Multiple Participants

Update `main.go` to ensure it can handle multiple participants. This includes creating endpoints for signaling and managing participant connections:

```go title="Go"
package main

import (
    "log"
    "net/http"
    "github.com/bluenviron/mediamtx"
    "gopkg.in/yaml.v2"
    "io/ioutil"
)

// Load configuration from file
func loadConfig() *mediamtx.Config {
    data, err := ioutil.ReadFile("config/config.yaml")
    if err != nil {
        log.Fatalf("Failed to read config file: %v", err)
    }
    config := mediamtx.NewConfig()
    err = yaml.Unmarshal(data, config)
    if err != nil {
        log.Fatalf("Failed to parse config file: %v", err)
    }
    return config
}

// Main function to initialize and start the server
func main() {
    config := loadConfig()
    server := mediamtx.NewServer(config)

    // Initialize HTTP server
    http.Handle("/", http.FileServer(http.Dir("./static")))
    http.HandleFunc("/room.html", func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, "./static/room.html")
    })
    go func() {
        if err := http.ListenAndServe(":8080", nil); err != nil {
            log.Fatalf("Failed to start HTTP server: %v", err)
        }
    }()

    // Start MediaMTX server
    if err := server.Start(); err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }

    log.Println("MediaMTX server is running...")
}
```

This setup allows multiple participants to join a room and see each other's video streams, with controls to manage the media streams. In the next step, we will finalize the setup and ensure everything runs smoothly.

## Step 6: Run Your Code Now

### Running the Application

Now that we have set up the various components of our MediaMTX WebRTC application, it's time to run the application and see it in action. This final step involves starting both the MediaMTX server and the HTTP server to handle WebRTC signaling and media streaming.

### Commands to Run the MediaMTX WebRTC App

Ensure you are in the root directory of your project and then run the following commands:

#### Start the HTTP Server

```bash title="bash"
   go run main.go
```

This command will start the HTTP server, serving the static files and initializing the MediaMTX server.

### Access the Application
Open your web browser and navigate to `http://localhost:8080`. You should see the join screen where you can enter a room ID and join the room.

### Debugging Tips and Common Issues

- **Issue:** Server fails to start with an error related to configuration.
	- **Solution:** Ensure that your `config/config.yaml` file is correctly formatted and contains valid settings. You can refer to the sample configuration provided in the earlier steps.

- **Issue:** No video stream is displayed.
	- **Solution:** Check the browser console for any WebRTC-related errors. Ensure that your ICE servers are correctly configured and accessible.

- **Issue:** WebRTC connection fails.
	- **Solution:** Verify that the STUN/TURN server configurations are correct. Ensure that the public IP addresses are correctly specified in the configuration.

### Testing the Application

1. Open multiple browser tabs or windows and navigate to `http://localhost:8080` in each.
2. Enter the same room ID in each instance and click "Join Room."
3. You should see the video streams from all participants in each window.

By following these steps, you have successfully implemented and run a MediaMTX WebRTC application. You can now further enhance the application by adding features like chat, file sharing, or screen sharing, depending on your requirements.

## Conclusion

In this article, we have walked through the process of setting up a MediaMTX WebRTC application from scratch. We covered the initialization of the project, setting up the main components, implementing controls, and managing participant views. By following these steps, you can create a robust real-time communication platform using MediaMTX and WebRTC.

Learn how to set up a MediaMTX WebRTC application from scratch. This guide covers everything from project initialization, setting up components, implementing controls, and managing participant views using Go and MediaMTX.

## Introduction to MediaMTX WebRTC

### What is MediaMTX WebRTC?

MediaMTX is a versatile media broker developed using the Go programming language. It supports multiple streaming protocols such as SRT (Secure Reliable Transport), RTSP (Real-Time Streaming Protocol), RTMP (Real-Time Messaging Protocol), and WebRTC (Web Real-Time Communication). This wide range of protocol support makes MediaMTX a powerful tool for real-time media streaming applications.

### Importance of WebRTC in Real-Time Communication

WebRTC is a revolutionary technology that enables real-time communication directly between browsers without the need for plugins or external applications. It allows audio, video, and data sharing with low latency, making it ideal for applications like video conferencing, live streaming, and online gaming. The integration of WebRTC into MediaMTX enhances its capabilities by providing seamless, real-time communication channels.

### How MediaMTX Integrates with WebRTC for Media Brokering?

MediaMTX leverages WebRTC to facilitate real-time media exchange between clients. By acting as a broker, MediaMTX manages the media streams, ensuring efficient and secure transmission. It handles the complexities of protocol conversion and stream management, allowing developers to focus on building feature-rich applications without worrying about the underlying infrastructure.

This article will guide you through setting up a MediaMTX WebRTC application, highlighting key components, architecture, and implementation steps. Whether you are building a live streaming platform or a real-time communication tool, understanding MediaMTX and WebRTC integration will equip you with the knowledge to create robust and scalable media applications.

## Getting Started with the Code!

### Create a New MediaMTX App

To start with MediaMTX, you first need to set up a new Go project. Begin by creating a new directory for your project and initializing a Go module:

```bash title="bash"
mkdir mediamtx-webrtc-app
cd mediamtx-webrtc-app
go mod init github.com/yourusername/mediamtx-webrtc-app
```

### Install 

Next, you need to install MediaMTX and its dependencies. You can do this by running:

```bash title="bash"
go get github.com/bluenviron/mediamtx
```

Ensure you have Go installed on your system. You can download it from the [Go official website](https://golang.org/dl/).

### Structure of the Project 

The project directory should have the following structure:

```go title="go"
mediamtx-webrtc-app/
│
├── main.go
├── config/
│   └── config.yaml
├── handlers/
│   └── webrtc_handler.go
└── README.md
```

This structure helps in organizing the code for better maintainability.

### App Architecture

![mediamtx-webrtc](https://strapi.videosdk.live/uploads/Sequence_diagram_of_how_Media_MTX_Web_RTC_works_5fb2745d82.png)
The architecture of a MediaMTX WebRTC application typically includes the following components:
- **Main Application**: Initializes the server and configures routes.
- **Configuration**: Contains settings for the MediaMTX server, such as ports, protocols, and security options.
- **Handlers**: Manages WebRTC connections, including the initiation and termination of streams.
- **Static Files**: Contains HTML, CSS, and JavaScript files for the client-side application.

MediaMTX acts as the core media broker, handling all incoming and outgoing media streams. It converts and routes streams between different protocols, ensuring seamless communication between various endpoints.

### Code Snippet for Basic Setup 

Here's a basic `main.go` file to get you started:

```go title="go"
package main

import (
    "github.com/bluenviron/mediamtx"
)

func main() {
    config := mediamtx.NewConfig()
    server := mediamtx.NewServer(config)

    if err := server.Start(); err != nil {
        panic(err)
    }
}
```

This code initializes a new MediaMTX server with default configurations and starts it.

## Step 1: Get Started with `main.go` 

### [a] Initial Setup of `main.go`

In this step, we will focus on setting up the main entry point of your MediaMTX WebRTC application. The `main.go` file is where you initialize your MediaMTX server and configure the necessary settings to handle WebRTC connections.

### [b] Boilerplate Code to Initialize MediaMTX

First, ensure your `main.go` file is set up to import the necessary packages and initialize the server. Here's a basic example to get you started:

```go title="go"
package main

import (
    "log"
    "github.com/bluenviron/mediamtx"
)

func main() {
    // Load configuration
    config := mediamtx.NewConfig()

    // Create a new MediaMTX server
    server := mediamtx.NewServer(config)

    // Start the server
    err := server.Start()
    if err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }

    log.Println("MediaMTX server is running...")
}
```

### [c] Key Functions and Their Roles

#### Configuration Loading
`mediamtx.NewConfig()`: This function loads the default configuration settings for MediaMTX. You can customize these settings later based on your requirements.

#### Server Initialization
`mediamtx.NewServer(config)`: This initializes a new MediaMTX server instance with the provided configuration.

#### Server Start
`server.Start()`: This function starts the MediaMTX server. If there are any issues during the startup, an error is logged, and the application exits.

### [d] Configuring WebRTC Settings

To handle WebRTC connections, you need to modify the default configuration. Create a `config/config.yaml` file with the following content:

```yaml title="yaml"
webrtc:
  enabled: true
  listen: :8080
  iceServers:
    - urls: ["stun:stun.l.google.com:19302"]
  candidates: ["<your-public-ip>"]
```

Update your `main.go` to load this configuration:

```go title="go"
package main

import (
    "log"
    "github.com/bluenviron/mediamtx"
    "gopkg.in/yaml.v2"
    "io/ioutil"
)

func loadConfig() *mediamtx.Config {
    data, err := ioutil.ReadFile("config/config.yaml")
    if err != nil {
        log.Fatalf("Failed to read config file: %v", err)
    }
    config := mediamtx.NewConfig()
    err = yaml.Unmarshal(data, config)
    if err != nil {
        log.Fatalf("Failed to parse config file: %v", err)
    }
    return config
}

func main() {
    config := loadConfig()
    server := mediamtx.NewServer(config)
    if err := server.Start(); err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }
    log.Println("MediaMTX server is running...")
}
```

By following these steps, you have set up the basic structure of your `main.go` file, enabling the MediaMTX server with WebRTC capabilities. The next steps will involve creating components and handling WebRTC connections effectively.

## Step 2: Wireframe All the Components

### [a] Defining Components

In this step, we will outline the essential components required for a MediaMTX WebRTC application. Properly defining these components helps in maintaining a clean and modular codebase, making the application easier to manage and extend.

**List of Components Needed for a Basic MediaMTX WebRTC App**

#### Configuration Handler
   - Manages the loading and parsing of configuration files.
   - Ensures that the WebRTC and MediaMTX settings are correctly initialized.

#### WebRTC Handler
   - Handles WebRTC signaling.
   - Manages the setup and teardown of WebRTC connections.
   - Integrates with MediaMTX for stream management.

#### HTTP Server
   - Serves the static files (HTML, CSS, JS) for the front-end interface.
   - Provides endpoints for WebRTC signaling and media stream control.

#### Frontend Components
   - **HTML**: Structure of the user interface.
   - **CSS**: Styling of the user interface.
   - **JavaScript**: Handles WebRTC API interactions and user events.

### [b] Explanation of Each Component's Role

#### Configuration Handler
Responsible for reading the configuration file (`config/config.yaml`) and initializing the settings for the MediaMTX server and WebRTC.

#### WebRTC Handler
Implements the logic for WebRTC signaling. This includes handling ICE candidates, SDP offers/answers, and managing peer connections.

#### HTTP Server
Runs an HTTP server to serve the web interface and provide APIs for signaling. This allows clients to connect to the MediaMTX WebRTC application through their web browsers.

#### Frontend Components
   - **HTML**: Defines the structure of the join screen and participant view.
   - **CSS**: Styles the user interface for a better user experience.
   - **JavaScript**: Handles user interactions, initiates WebRTC connections, and communicates with the server for signaling.

### [c] Code Snippet for Component Initialization

Here’s how you can structure your main application to initialize these components:

```go title="go"
package main

import (
    "log"
    "net/http"
    "github.com/bluenviron/mediamtx"
    "gopkg.in/yaml.v2"
    "io/ioutil"
)

// Load configuration from file
func loadConfig() *mediamtx.Config {
    data, err := ioutil.ReadFile("config/config.yaml")
    if err != nil {
        log.Fatalf("Failed to read config file: %v", err)
    }
    config := mediamtx.NewConfig()
    err = yaml.Unmarshal(data, config)
    if err != nil {
        log.Fatalf("Failed to parse config file: %v", err)
    }
    return config
}

// Main function to initialize and start the server
func main() {
    config := loadConfig()
    server := mediamtx.NewServer(config)

    // Initialize HTTP server
    http.Handle("/", http.FileServer(http.Dir("./static")))
    go func() {
        if err := http.ListenAndServe(":8080", nil); err != nil {
            log.Fatalf("Failed to start HTTP server: %v", err)
        }
    }()

    // Start MediaMTX server
    if err := server.Start(); err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }

    log.Println("MediaMTX server is running...")
}
```

This setup includes the HTTP server for serving static files and initializing the MediaMTX server with the custom configuration. In the next steps, we will dive deeper into implementing each component and adding the necessary functionality to create a complete MediaMTX WebRTC application.

## Step 3: Implement Join Screen

### [a] Creating the Join Screen

The join screen is the first interface users will interact with in your MediaMTX WebRTC application. This screen will allow users to enter a room and initiate a WebRTC connection. We'll use HTML, CSS, and JavaScript to create this interface and handle user inputs.

### [b] HTML for Join Screen

Create a new file named `index.html` in the `static` directory. This file will define the structure of the join screen:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MediaMTX WebRTC App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to MediaMTX WebRTC</h1>
        <form id="joinForm">
            <label for="roomId">Enter Room ID:</label>
            <input type="text" id="roomId" name="roomId" required>
            <button type="submit">Join Room</button>
        </form>
    </div>
    <script src="app.js"></script>
</body>
</html>
```

### [c] CSS for Styling

Create a `styles.css` file in the `static` directory to style the join screen:

```css title="CSS"
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form {
    margin-top: 20px;
}

input[type="text"] {
    padding: 10px;
    margin: 10px 0;
    width: calc(100% - 22px);
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
```

### [d] JavaScript for Handling User Inputs

Create an `app.js` file in the `static` directory to handle form submissions and initiate WebRTC connections:

```javascript title="JavaScript"
document.getElementById('joinForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const roomId = document.getElementById('roomId').value;

    if (roomId) {
        // Redirect to the room page (to be implemented later)
        window.location.href = `/room.html?roomId=${roomId}`;
    } else {
        alert('Please enter a room ID.');
    }
});
```

### [e] Backend Endpoint for Join Room

In your `main.go`, set up an endpoint to serve the static files:

```go title="go"
package main

import (
    "log"
    "net/http"
    "github.com/bluenviron/mediamtx"
    "gopkg.in/yaml.v2"
    "io/ioutil"
)

// Load configuration from file
func loadConfig() *mediamtx.Config {
    data, err := ioutil.ReadFile("config/config.yaml")
    if err != nil {
        log.Fatalf("Failed to read config file: %v", err)
    }
    config := mediamtx.NewConfig()
    err = yaml.Unmarshal(data, config)
    if err != nil {
        log.Fatalf("Failed to parse config file: %v", err)
    }
    return config
}

// Main function to initialize and start the server
func main() {
    config := loadConfig()
    server := mediamtx.NewServer(config)

    // Initialize HTTP server
    http.Handle("/", http.FileServer(http.Dir("./static")))
    go func() {
        if err := http.ListenAndServe(":8080", nil); err != nil {
            log.Fatalf("Failed to start HTTP server: %v", err)
        }
    }()

    // Start MediaMTX server
    if err := server.Start(); err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }

    log.Println("MediaMTX server is running...")
}
```

This setup provides a basic join screen that users can interact with to enter a room ID and proceed to the room view, which will be implemented in the following steps. This structure ensures a clean and user-friendly interface for initiating WebRTC connections.

## Step 4: Implement Controls

### [a] Control Mechanisms

In this step, we'll implement the controls necessary for managing media streams in your MediaMTX WebRTC application. These controls will include functionalities such as play, pause, and stop for the media streams. We will use JavaScript to handle these controls on the client side.

### [b] HTML for Controls

First, update the `room.html` file in the `static` directory to include buttons for the controls:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MediaMTX WebRTC Room</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Room: <span id="roomIdDisplay"></span></h1>
        <video id="remoteVideo" autoplay playsinline></video>
        <div class="controls">
            <button id="playButton">Play</button>
            <button id="pauseButton">Pause</button>
            <button id="stopButton">Stop</button>
        </div>
    </div>
    <script src="room.js"></script>
</body>
</html>
```

### [c] CSS for Styling Controls

Add styles for the control buttons in the `styles.css` file:

```css title="CSS"
.controls {
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

button:hover {
    background-color: #0056b3;
}
```

### [e] JavaScript for Control Functionality

Create a `room.js` file in the `static` directory to handle the controls. This file will include functions to play, pause, and stop the media streams:

```javascript title="JavaScript"
document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const roomId = urlParams.get('roomId');
    document.getElementById('roomIdDisplay').textContent = roomId;

    const remoteVideo = document.getElementById('remoteVideo');

    // Function to handle Play button
    document.getElementById('playButton').addEventListener('click', function () {
        remoteVideo.play();
    });

    // Function to handle Pause button
    document.getElementById('pauseButton').addEventListener('click', function () {
        remoteVideo.pause();
    });

    // Function to handle Stop button
    document.getElementById('stopButton').addEventListener('click', function () {
        remoteVideo.pause();
        remoteVideo.currentTime = 0;
    });

    // WebRTC setup
    const configuration = {
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' }
        ]
    };

    const peerConnection = new RTCPeerConnection(configuration);

    peerConnection.ontrack = function (event) {
        remoteVideo.srcObject = event.streams[0];
    };

    // Add WebRTC signaling and connection setup here...
});
```

### [f] Backend Endpoint for Room

Ensure your `main.go` serves the `room.html` file:

```go title="go"
package main

import (
    "log"
    "net/http"
    "github.com/bluenviron/mediamtx"
    "gopkg.in/yaml.v2"
    "io/ioutil"
)

// Load configuration from file
func loadConfig() *mediamtx.Config {
    data, err := ioutil.ReadFile("config/config.yaml")
    if err != nil {
        log.Fatalf("Failed to read config file: %v", err)
    }
    config := mediamtx.NewConfig()
    err = yaml.Unmarshal(data, config)
    if err != nil {
        log.Fatalf("Failed to parse config file: %v", err)
    }
    return config
}

// Main function to initialize and start the server
func main() {
    config := loadConfig()
    server := mediamtx.NewServer(config)

    // Initialize HTTP server
    http.Handle("/", http.FileServer(http.Dir("./static")))
    http.HandleFunc("/room.html", func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, "./static/room.html")
    })
    go func() {
        if err := http.ListenAndServe(":8080", nil); err != nil {
            log.Fatalf("Failed to start HTTP server: %v", err)
        }
    }()

    // Start MediaMTX server
    if err := server.Start(); err != nil {
        log.Fatalf("Failed to start MediaMTX server: %v", err)
    }

    log.Println("MediaMTX server is running...")
}
```

This setup provides basic play, pause, and stop controls for the media streams, enhancing the user experience. The next steps will focus on handling WebRTC signaling and managing participant views effectively.

How to Build MediaMTX WebRTC App with JavaScript?

MediaMTX WebRTC

## Step 5: Implement Participant View

### Designing Participant View

The participant view is a crucial component of a MediaSoup WebRTC application, as it displays the video streams of all participants in the room. This section will guide you through creating a dynamic and responsive participant view that updates in real-time as participants join or leave the room.

### Layout Considerations

The participant view should be designed to handle multiple video streams, ensuring that each participant's video is displayed clearly and the layout adjusts dynamically as participants join or leave. A grid layout is a good choice for this purpose.

### Participant View Code Snippet

#### [a] HTML Structure

Ensure your `index.html` file includes a section for the participant view:

```html title="HTML"
<div id="participant-view" style="display: none;">
  
</div>
```

#### [b] CSS Styling

Add the following styles to your `styles.css` file to enhance the appearance of the participant view:

```css title="CSS"
#participant-view {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  justify-content: center;
}

#participant-view video {
  width: 200px;
  height: 150px;
  background: #000;
  border-radius: 5px;
}
```

#### [c] JavaScript Functionality

Update your `main.js` file to handle the logic for adding and removing participant video elements dynamically:

```javascript title="JavaScript"
document.getElementById('join-button').addEventListener('click', () => {
  const username = document.getElementById('username').value;
  const roomId = document.getElementById('room-id').value;

  if (username && roomId) {
    const socket = io();
    socket.emit('joinRoom', { username, roomId });

    document.getElementById('join-screen').style.display = 'none';
    document.getElementById('controls').style.display = 'block';
    document.getElementById('participant-view').style.display = 'block';

    let localStream;
    let audioEnabled = true;
    let videoEnabled = true;

    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(stream => {
        localStream = stream;
        addParticipantVideo('local', stream);

        // Emit local stream to other participants
        socket.emit('newParticipant', { id: 'local', stream });

        // Listen for new participants
        socket.on('newParticipant', ({ id, stream }) => {
          addParticipantVideo(id, stream);
        });

        // Listen for participant leaving
        socket.on('participantLeft', id => {
          removeParticipantVideo(id);
        });
      })
      .catch(error => {
        console.error('Error accessing media devices.', error);
        alert('Could not access your camera and microphone. Please check your permissions.');
      });

    document.getElementById('mute-button').addEventListener('click', () => {
      audioEnabled = !audioEnabled;
      localStream.getAudioTracks()[0].enabled = audioEnabled;
      document.getElementById('mute-button').textContent = audioEnabled ? 'Mute' : 'Unmute';
    });

    document.getElementById('video-button').addEventListener('click', () => {
      videoEnabled = !videoEnabled;
      localStream.getVideoTracks()[0].enabled = videoEnabled;
      document.getElementById('video-button').textContent = videoEnabled ? 'Stop Video' : 'Start Video';
    });

    document.getElementById('leave-button').addEventListener('click', () => {
      socket.emit('leaveRoom', { username, roomId });
      localStream.getTracks().forEach(track => track.stop());
      socket.disconnect();

      document.getElementById('join-screen').style.display = 'block';
      document.getElementById('controls').style.display = 'none';
      document.getElementById('participant-view').style.display = 'none';
      document.getElementById('participant-view').innerHTML = '';
    });

    socket.on('roomJoined', (data) => {
      console.log(`Joined room ${data.roomId} as ${data.username}`);
    });

    socket.on('connect_error', (error) => {
      console.error('Connection error:', error);
      alert('Connection failed. Please try again.');
    });
  } else {
    alert('Please enter your name and room ID');
  }
});

const addParticipantVideo = (id, stream) => {
  const videoElement = document.createElement('video');
  videoElement.id = id;
  videoElement.srcObject = stream;
  videoElement.autoplay = true;
  document.getElementById('participant-view').appendChild(videoElement);
};

const removeParticipantVideo = (id) => {
  const videoElement = document.getElementById(id);
  if (videoElement) {
    videoElement.srcObject.getTracks().forEach(track => track.stop());
    videoElement.remove();
  }
};
```

### Managing Participant Data

The JavaScript code above manages the participant view by dynamically adding and removing video elements as participants join or leave the room. Here is a breakdown of the key functions:

#### addParticipantVideo(id, stream)
   - Creates a new video element for the participant.
   - Sets the video element's `srcObject` to the participant's media stream.
   - Appends the video element to the participant view.

#### removeParticipantVideo(id)
   - Stops all tracks of the participant's media stream.
   - Removes the video element from the participant view.

### Handling Server-Side Events

Ensure your server handles events for new participants joining and leaving the room. Update your `server.js` file accordingly:

```javascript title="JavaScript"
io.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('joinRoom', async ({ username, roomId }) => {
    console.log(`${username} is joining room: ${roomId}`);
    socket.join(roomId);
    io.to(roomId).emit('roomJoined', { username, roomId });

    socket.on('newParticipant', ({ id, stream }) => {
      socket.to(roomId).emit('newParticipant', { id, stream });
    });

    socket.on('leaveRoom', ({ username, roomId }) => {
      socket.leave(roomId);
      socket.to(roomId).emit('participantLeft', username);
    });

    socket.on('disconnect', () => {
      console.log('Client disconnected');
    });
  });
});
```

By following these steps, you have successfully implemented the participant view for your MediaSoup WebRTC application. This view dynamically updates to show video streams of all participants in the room, providing a comprehensive and interactive real-time communication experience. In the next section, we will focus on running and testing your code to ensure everything works seamlessly.

## Step 6: Run Your Code Now

### Running the Application

Now that you've set up your MediaSoup WebRTC application with a join screen, user controls, and a participant view, it's time to run and test the application. This section will guide you through the steps to start the server and connect clients to verify that everything is working as expected.

#### [a] Start the Server
Ensure your server is properly configured and all necessary dependencies are installed. In your terminal, navigate to the root directory of your project and start the server using the following command:

```bash title="bash"
node src/server.js
```

You should see a message indicating that the server is running:

```
Server is running on port 3000
```

#### [b] Open the Application in a Browser

Open your web browser and navigate to `http://localhost:3000`. You should see the join screen where you can enter your name and room ID.

#### [c] Join a Room
Enter a name and a room ID (e.g., "test-room") and click the "Join" button. This will connect you to the room and display the controls and participant view. If you have multiple devices or browsers, you can open the same URL on them, enter the same room ID, and see the video streams of all participants.

### Testing the Application

To ensure your application is working correctly, perform the following tests:

#### Join Room
   - Open the application in multiple browser tabs or devices.
   - Join the same room with different names.
   - Verify that the video streams of all participants are displayed correctly.

#### Mute and Unmute
   - Use the mute button to mute and unmute your audio.
   - Verify that the audio stream is toggled correctly.

#### Start and Stop Video
   - Use the video button to start and stop your video stream.
   - Verify that the video stream is toggled correctly.

#### Leave Room
   - Use the leave button to leave the room.
   - Verify that the participant's video is removed from the view and the local media tracks are stopped.

#### Error Handling
   - Check for any errors in the browser console or server logs.
   - Ensure that the application handles connection errors gracefully and provides appropriate feedback to the user.

### Troubleshooting Common Issues

If you encounter any issues while running the application, here are some common problems and solutions:

#### Media Devices Not Accessible
   - Ensure that your browser has permission to access the camera and microphone.
   - Check your browser settings and operating system privacy settings.

#### Connection Errors
   - Verify that the server is running and accessible from the client.
   - Check for network issues or firewall settings that may be blocking the connection.

#### No Video or Audio
   - Ensure that your media devices are working properly.
   - Check the browser console for any errors related to media devices.

#### Participant View Not Updating
   - Ensure that the server is emitting the correct events for participants joining and leaving.
   - Check the client-side JavaScript for errors in handling these events.

## Conclusion

In this tutorial, you have learned how to build a MediaSoup WebRTC application from scratch. You set up a server, created a join screen, implemented user controls, and designed a participant view to display video streams. By following these steps, you can now create a scalable and high-performance real-time communication application using MediaSoup.

Learn how to build a real-time communication application using MediaSoup WebRTC. This comprehensive guide covers setup, configuration, and implementation steps for creating a scalable WebRTC application with MediaSoup.

How to Build FreeSwitch WebRTC App?

How to Build MediaSoup WebRTC App with JavaScript?

MediaSoup WebRTC

## Step 5: Implement Participant View

The participant view is a crucial part of your LiveKit WebRTC application, allowing users to see and interact with other participants in the room. This involves dynamically displaying video and audio streams for each participant and updating the view as participants join or leave.

### Displaying Participants

To implement the participant view, you need to dynamically create video elements for each participant and manage their streams. Here's how to do it:

#### [a] HTML Code for Participant View

Ensure your `room.html` file has a container to hold the participant video elements:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveKit Room</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="controls">
        <button id="mute-button">Mute</button>
        <button id="video-button">Stop Video</button>
        <button id="leave-button">Leave Room</button>
    </div>
    <div id="participants"></div>
    <script src="app.js"></script>
</body>
</html>
```

#### [b] CSS for Styling Participant View

Update your `styles.css` file to style the participant video elements:

```css title="CSS"
#participants {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

#participants video {
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 200px;
    height: 150px;
}
```

#### [c] JavaScript for Handling Participant Streams

Add the following JavaScript code to your `app.js` file to manage participant streams:

```javascript title="JavaScript"
let localStream;
const participants = {};

document.addEventListener('DOMContentLoaded', () => {
    joinRoom();
});

function joinRoom() {
    const roomId = new URLSearchParams(window.location.search).get('roomId');
    if (roomId) {
        // Initialize the WebRTC connection and get the local stream
        navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
            localStream = stream;
            displayParticipant('local', stream);

            // Simulate adding remote participants (replace this with actual WebRTC implementation)
            addRemoteParticipant('remote1');
            addRemoteParticipant('remote2');
        });
    }
}

function displayParticipant(id, stream) {
    const videoElement = document.createElement('video');
    videoElement.id = id;
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    videoElement.playsInline = true;

    const participantsContainer = document.getElementById('participants');
    participantsContainer.appendChild(videoElement);
}

function addRemoteParticipant(id) {
    // Simulate remote participant stream
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
        participants[id] = stream;
        displayParticipant(id, stream);
    });
}
```

#### Explanation of the Code

1. **HTML Structure:** The `room.html` file includes a `div` with the ID `participants` to hold video elements for each participant.
2. **CSS Styling:** The `styles.css` file styles the participant video elements to be displayed in a flexible, wrapping layout with some margin and border styling.
3. **JavaScript Logic:** The `app.js` file manages the WebRTC streams and dynamically adds video elements for each participant. The `joinRoom` function initializes the local stream and simulates adding remote participants. The `displayParticipant` function creates video elements for each participant and appends them to the `participants` container.

With this setup, your LiveKit WebRTC application will dynamically display video streams for all participants in the room. In the next and final step, we will cover running your application and provide a conclusion with FAQs to wrap up the article.

## Step 6: Run Your Code Now

With all the components set up, it's time to run your LiveKit WebRTC application. Ensure you have Go installed on your system and the necessary dependencies installed. Open your terminal in the project directory and run the following command:

```bash title="bash"
go run main.go
```

This command will start the LiveKit server, allowing you to access your application. Open your browser and navigate to `http://localhost:8080` (or the appropriate URL based on your server configuration). Enter a Room ID on the join screen, and you should see the participant view with your video stream.

## Conclusion

Building a LiveKit WebRTC application involves several steps, from setting up the main Go server file to implementing the join screen, user controls, and participant view. By following this guide, you have created a functional real-time communication app using LiveKit's powerful and flexible platform. This setup provides a solid foundation for further customization and enhancement to suit your specific needs.

Discover how to build scalable and efficient real-time communication applications using LiveKit WebRTC. Learn about its SFU architecture, Go with Pion integration, and step-by-step coding instructions for creating a robust WebRTC application.

## Introduction to LiveKit WebRTC Technology

Real-time audio and video communication have become crucial components in many modern applications, enabling seamless interaction regardless of geographical boundaries. One powerful and flexible solution in this space is LiveKit. Built using the Go programming language and leveraging the Pion WebRTC library, LiveKit offers a robust platform for creating real-time communication applications. Additionally, LiveKit utilizes a Selective Forwarding Unit (SFU) architecture, which significantly enhances performance and scalability.

### What is LiveKit WebRTC?

LiveKit is an open-source project designed to facilitate the development of real-time audio and video applications. Its core strength lies in its use of the Go programming language combined with Pion, a Go library for WebRTC. This combination ensures high performance and efficient handling of real-time data. 

The SFU architecture used by LiveKit plays a pivotal role in optimizing bandwidth usage. Unlike traditional peer-to-peer (P2P) setups, where each participant's device must send and receive streams to every other participant, SFU centralizes this process. The server selectively forwards streams to participants based on their capabilities and network conditions, thereby reducing overall bandwidth consumption and improving the user experience.

Moreover, LiveKit offers SDKs for multiple platforms, including web, iOS, and Android, making it a versatile choice for developers aiming to build cross-platform real-time communication applications. Its comprehensive documentation and active community support further ease the development process, allowing developers to focus on creating innovative features rather than wrestling with the complexities of real-time communication.

In the following sections, we will delve into the specifics of setting up a LiveKit WebRTC application, providing step-by-step instructions and practical code snippets to help you get started quickly and efficiently. Whether you're building a simple video chat app or a complex real-time collaboration tool, LiveKit offers the flexibility and power needed to bring your vision to life.

## Getting Started with the Code

Building a LiveKit WebRTC application involves a series of straightforward steps. In this section, we’ll walk you through creating a new LiveKit WebRTC app, installing necessary dependencies, understanding the project structure, and exploring the app architecture.

### Create a New LiveKit WebRTC App

To get started, you'll need to set up a new project for your LiveKit WebRTC application. Ensure you have Go installed on your system, as LiveKit is built using the Go programming language.

#### [a] Install LiveKit

First, you need to install the LiveKit server package. Open your terminal and run the following command:

```bash title="bash"
go get github.com/livekit/livekit-server
```

This command will download the LiveKit server package and add it to your project’s dependencies.

#### [b] Structure of the Project

Understanding the structure of your project is crucial for effective development. A typical LiveKit WebRTC project will have the following directory structure:

```go title="Go"
my-livekit-app/
├── main.go
├── go.mod
├── go.sum
└── internal/
    ├── handlers/
    ├── services/
    └── utils/
```

- **main.go**: The entry point of your application.
- **go.mod**: The Go module file.
- **go.sum**: The checksum file for dependencies.
- **internal/**: Contains your application’s internal packages.
- **handlers/**: Handles incoming requests and responses.
- **services/**: Contains the core logic of your application.
- **utils/**: Utility functions and helpers.

### App Architecture

![livekit-webrtc](https://strapi.videosdk.live/uploads/Sequence_diagram_of_how_Live_Kit_Web_RTC_work_9cf695f75b.png)
LiveKit’s architecture revolves around the SFU model. In this model, media streams are sent to a central server (the SFU), which then forwards these streams to other participants. This approach significantly reduces bandwidth usage and enhances scalability.

- **Selective Forwarding Unit (SFU)**: The core component that manages media streams.
- **Signaling Server**: Manages signaling messages used to establish peer connections.
- **Media Servers**: Handle the actual media streams (audio, video, data).

By utilizing this architecture, LiveKit can handle a large number of participants efficiently, making it ideal for applications such as video conferencing, online classrooms, and live broadcasting.

In the next sections, we will delve deeper into the coding aspects, starting with setting up the main.go file and building the essential components of your LiveKit WebRTC application. Stay tuned as we guide you through each step with practical examples and detailed explanations.

## Step 1: Get Started with Main.go

To kick off your LiveKit WebRTC application, you need to set up the main.go file. This file serves as the entry point for your Go application, initializing the LiveKit server and setting up the necessary configurations.

### Setting Up Main.go

Start by creating a file named `main.go` in the root directory of your project. This file will contain the code to initialize and start the LiveKit server.

#### [a] Initialize the main.go File
Begin by importing the necessary packages and initializing the LiveKit server. Below is a basic example to help you get started:

```go title="Go"
package main

import (
    "github.com/livekit/livekit-server"
    "log"
)

func main() {
    // Initialize the LiveKit server
    server, err := livekit.NewServer()
    if err != nil {
        log.Fatal(err)
    }

    // Start the server
    if err := server.Start(); err != nil {
        log.Fatal(err)
    }

    log.Println("LiveKit server started successfully")
}
```

#### Explanation of the Code

1. **Package Declaration:** The `main` package indicates that this file is an executable program.
2. **Imports:** Importing the `livekit-server` package from LiveKit and the `log` package for logging errors and messages.
3. **Main Function:** The `main` function is the entry point of the application.
4. **Server Initialization:** `livekit.NewServer()` initializes a new LiveKit server instance.
5. **Error Handling:** Check for errors during server initialization and log them.
6. **Start the Server:** Call `server.Start()` to start the server and log a message indicating the server has started successfully.

With this basic setup, your LiveKit server is ready to run. In the next steps, we will wireframe all the necessary components, implement the user interface, and add essential features to your application. Stay tuned as we build a fully functional LiveKit WebRTC application.

## Step 2: Wireframe All the Components

After setting up your main.go file and initializing the LiveKit server, the next step is to wireframe the key components of your LiveKit WebRTC application. This step involves planning the essential parts of your application and setting up the basic structure for the UI and backend logic.

### Creating the Basic Components

To create a robust and user-friendly LiveKit WebRTC application, you need to define and organize your components effectively. The main components typically include the join screen, user controls, and the participant view.

#### Wireframing the Components

1. **Join Screen:** This component allows users to enter a room ID and join a session. It includes input fields and a join button.
2. **User Controls:** This component provides controls for muting, toggling video, and other user actions.
3. **Participant View:** This component displays the video and audio streams of all participants in the session.

#### Example Code Structure
Below is an example of how to organize these components in your project:

```go title="Go"
package main

import (
    "github.com/livekit/livekit-server"
    "log"
)

func main() {
    // Initialize the LiveKit server
    server, err := livekit.NewServer()
    if err != nil {
        log.Fatal(err)
    }

    // Setup components
    setupComponents()

    // Start the server
    if err := server.Start(); err != nil {
        log.Fatal(err)
    }

    log.Println("LiveKit server started successfully")
}

func setupComponents() {
    // Set up the join screen
    setupJoinScreen()
    // Set up user controls
    setupUserControls()
    // Set up participant view
    setupParticipantView()
}

func setupJoinScreen() {
    // Code to set up the join screen
}

func setupUserControls() {
    // Code to set up user controls
}

func setupParticipantView() {
    // Code to set up participant view
}
```

#### Explanation of the Code

1. **Main Function:** Initializes the LiveKit server and calls the `setupComponents` function.
2. **setupComponents Function:** Calls functions to set up each main component (join screen, user controls, and participant view).
3. **Component Setup Functions:** Placeholder functions (`setupJoinScreen`, `setupUserControls`, `setupParticipantView`) where you will add the specific code to configure each component.

By organizing your project with these components, you ensure a modular and maintainable codebase. In the following sections, we will dive deeper into implementing each of these components, starting with the join screen. Stay tuned for detailed instructions and code examples to build a fully functional LiveKit WebRTC application.

## Step 3: Implement Join Screen

The join screen is a crucial component of your LiveKit WebRTC application. It provides the interface for users to enter a room ID and join a session. Implementing a user-friendly and functional join screen is essential for a smooth user experience.

### Creating the Join Screen

The join screen typically includes an input field for the room ID and a button to join the session. Here’s how you can implement it using HTML and JavaScript:

#### [a] HTML Code for Join Screen

Create an `index.html` file in your project’s `public` directory (or equivalent) and add the following code:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveKit Join Screen</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="join-screen">
        <h1>Join a Room</h1>
        <input type="text" id="room-id" placeholder="Enter Room ID" required>
        <button id="join-button">Join Room</button>
    </div>
    <script src="app.js"></script>
</body>
</html>
```

#### [b] CSS for Styling (Optional)

Create a `styles.css` file in the same directory and add basic styling:

```css title="CSS"
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#join-screen {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#join-screen input, #join-screen button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
}
```

#### [c] JavaScript for Handling Join Action

Create an `app.js` file in the same directory and add the following code to handle the join button click event:

```javascript title="JavaScript"
document.getElementById('join-button').addEventListener('click', joinRoom);

function joinRoom() {
    const roomId = document.getElementById('room-id').value;
    if (roomId) {
        // Redirect to the room page or initialize WebRTC connection
        window.location.href = `/room.html?roomId=${roomId}`;
    } else {
        alert('Please enter a Room ID');
    }
}
```

#### Explanation of the Code

1. **HTML Structure:** The `index.html` file sets up the basic structure with an input field and a button.
2. **CSS Styling:** The `styles.css` file adds simple styling to center the join screen and make it visually appealing.
3. **JavaScript Logic:** The `app.js` file contains the logic to capture the room ID input and handle the join action.

With this setup, users can enter a room ID and join a session by clicking the join button. The next steps will cover adding more functionalities and enhancing the user experience in your LiveKit WebRTC application.

## Step 4: Implement Controls

Implementing user controls is a key step in developing your LiveKit WebRTC application. Controls allow users to manage their audio and video streams, providing functionality such as muting, unmuting, and toggling the video. These features enhance the user experience and make the application more interactive and user-friendly.

### Adding User Controls

To implement the user controls, you need to create buttons for each control and write the corresponding JavaScript functions to handle the actions. Here’s how you can do it:

#### [a] HTML Code for User Controls

Add the following HTML code to your `room.html` file, which is loaded after the user joins a room:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveKit Room</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="controls">
        <button id="mute-button">Mute</button>
        <button id="video-button">Stop Video</button>
        <button id="leave-button">Leave Room</button>
    </div>
    <div id="participants"></div>
    <script src="app.js"></script>
</body>
</html>
```

#### [b] CSS for Styling Controls

Update your `styles.css` file to style the controls:

```css title="CSS"
#controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
}

#controls button {
    margin: 0 5px;
    padding: 10px;
    background: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
```

#### [c] JavaScript for Handling Controls

Add the following JavaScript code to your `app.js` file to handle the control actions:

```javascript title="JavaScript"
document.getElementById('mute-button').addEventListener('click', toggleMute);
document.getElementById('video-button').addEventListener('click', toggleVideo);
document.getElementById('leave-button').addEventListener('click', leaveRoom);

function toggleMute() {
    const isMuted = localStream.getAudioTracks()[0].enabled;
    localStream.getAudioTracks()[0].enabled = !isMuted;
    document.getElementById('mute-button').textContent = isMuted ? 'Unmute' : 'Mute';
}

function toggleVideo() {
    const isVideoOn = localStream.getVideoTracks()[0].enabled;
    localStream.getVideoTracks()[0].enabled = !isVideoOn;
    document.getElementById('video-button').textContent = isVideoOn ? 'Start Video' : 'Stop Video';
}

function leaveRoom() {
    // Code to leave the room and disconnect
    window.location.href = '/';
}
```

#### Explanation of the Code

1. **HTML Structure:** The `room.html` file includes buttons for muting, stopping video, and leaving the room.
2. **CSS Styling:** The `styles.css` file styles the controls to be fixed at the bottom of the screen, centered, and visually appealing.
3. **JavaScript Logic:** The `app.js` file contains the logic for toggling the mute and video states and leaving the room. The `toggleMute` and `toggleVideo` functions update the text content of the buttons based on the current state.

By implementing these controls, you provide users with essential functionalities to manage their audio and video streams, making your LiveKit WebRTC application more interactive and user-friendly. In the next step, we will focus on displaying participants in the room.

How to Build Ant Media WebRTC App?

How to Build LiveKit WebRTC App with Go?

LiveKit WebRTC

## Step 5: Implement Participant View

### Displaying Participants in the Call

To enhance the user experience, it’s essential to display all participants in the call. This involves rendering participant views dynamically as users join and leave the call.

#### Update the CallScreen
Open `call_screen.dart` and modify the `CallScreen` class to include a list of participants:

```dart title="Dart"
import 'package:flutter/material.dart';

class CallScreen extends StatefulWidget {
  final String name;
  final String roomId;

  CallScreen({@required this.name, @required this.roomId});

  @override
  _CallScreenState createState() => _CallScreenState();
}

class _CallScreenState extends State<CallScreen> {
  List<String> participants = [];

  @override
  void initState() {
    super.initState();
    // Mock participants
    participants = ['Alice', 'Bob', 'Charlie'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Call with ${widget.name}'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.call_end),
            onPressed: () {
              // Handle call end logic
              Navigator.pop(context);
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: participants.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.person),
                  title: Text(participants[index]),
                );
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.mic),
                onPressed: () {
                  // Handle mute logic
                },
              ),
              IconButton(
                icon: Icon(Icons.mic_off),
                onPressed: () {
                  // Handle unmute logic
                },
              ),
              IconButton(
                icon: Icon(Icons.call_end),
                onPressed: () {
                  // Handle disconnect logic
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}
```

#### Explanation of Participant View
**ListView.builder:**
- Dynamically renders a list of participants in the call.

**ListTile Widget:**
- Displays each participant with an icon and their name.

#### Managing Participant States
The `participants` list is currently mocked with sample data. In a real-world application, this list would be updated based on actual participants joining and leaving the call. Integration with Ion WebRTC would handle these events and update the UI accordingly.

By implementing the participant view, users can see who is currently in the call, enhancing the collaborative experience. This dynamic rendering ensures that the participant list is always up-to-date, reflecting the real-time nature of the communication.

## Step 6: Run Your Code Now

### Running the Application

Now that you’ve set up your Ion WebRTC application, it’s time to run the code and test the functionality. Follow these steps to ensure everything is working as expected:

#### Start the Backend
   - Navigate to your backend directory where `main.go` is located.
   - Run the Go server with the command: `go run main.go`
   - Ensure there are no errors and that the server starts successfully, listening on the specified port.

#### Run the Flutter Application
   - Open your terminal and navigate to the Flutter project directory.
   - Run the app using: `flutter run`
   - This will compile the Flutter code and launch the application on your connected device or emulator.

#### Test the Functionality
   - Open the app on your device or emulator.
   - Navigate through the Join Screen and enter a name and room ID.
   - Test joining a call, using the provided controls to mute, unmute, and disconnect.
   - Verify that participants are displayed correctly as they join and leave the call.

### Debugging Tips and Common Issues

#### Server Errors
  - Check for any errors in the terminal where the Go server is running.
  - Ensure all dependencies are installed and configured correctly.

#### UI Issues
  - Verify that the Flutter app is running without errors.
  - Ensure all necessary permissions are granted for the app to access the microphone and camera.

By following these steps, you can run your Ion WebRTC application and ensure all functionalities are working correctly.

## Conclusion

Ion WebRTC offers a powerful and flexible solution for building real-time communication applications. By leveraging the strengths of Go and Flutter, developers can create scalable, high-performance video and audio communication tools. The SFU architecture ensures efficient media stream management, making Ion WebRTC ideal for a variety of use cases such as teleconferencing, online education, and remote work.

Learn how to build real-time communication applications using Ion WebRTC with Go and Flutter. This guide covers setup, code examples, UI design, and participant management.

## Introduction to Ion WebRTC Technology

### What is Ion WebRTC?

Ion WebRTC is an open-source project designed to simplify the development of real-time communication applications. Leveraging the power of WebRTC (Web Real-Time Communication), Ion WebRTC allows developers to build high-quality, scalable video and audio communication apps. This technology supports a wide range of use cases, from simple peer-to-peer video calls to complex multi-party conferencing systems.

### Importance and Applications in Real-Time Communication

In today's digital age, real-time communication is crucial for various applications, including teleconferencing, online education, gaming, and remote work. Ion WebRTC stands out by providing a robust infrastructure for developing these applications, ensuring low latency and high performance.

### Technology Stack

Ion WebRTC is built using the Go programming language, known for its concurrency capabilities and performance efficiency. The frontend can be developed using the Flutter framework, which allows for a seamless cross-platform user experience. The core of Ion WebRTC relies on an SFU (Selective Forwarding Unit) architecture, which optimizes media stream distribution, making it scalable for multiple users. Additionally, several SDKs are available to facilitate integration and development across different platforms.

## Getting Started with the Code!

### Create a New Ion WebRTC App

To begin building an application with Ion WebRTC, start by creating a new project. This involves setting up your development environment for both Go and Flutter, ensuring you have all necessary tools and dependencies installed.

#### Install Go
   - Download and install Go from the [official site](https://golang.org/dl/).
   - Verify the installation by running `go version` in your terminal.

#### Install Flutter
   - Follow the installation guide on the [Flutter documentation site](https://flutter.dev/docs/get-started/install).
   - Verify the installation by running `flutter doctor` in your terminal.

#### Install Ion WebRTC
   - Clone the Ion WebRTC repository from GitHub: `git clone https://github.com/ionorg/ion`
   - Navigate to the project directory: `cd ion`
   - Install dependencies: `go mod download`

### Structure of the Project

The Ion WebRTC project is structured to separate backend and frontend components, providing a clean and organized development environment. The backend, written in Go, handles the core logic and real-time communication processes. The frontend, built with Flutter, manages the user interface and interactions.

### App Architecture
![ion-webrtc](https://strapi.videosdk.live/uploads/Sequence_diagram_of_how_Ion_Web_RTC_work_5e9c018d00.png)
The application architecture follows a client-server model where the Go backend acts as the server, managing media streams and signaling, while the Flutter frontend serves as the client, providing the user interface. This separation allows for scalable and maintainable code, enabling developers to easily update and expand either component without affecting the other.

By setting up your development environment and understanding the project structure, you're ready to dive into the specifics of building your Ion WebRTC application.

## Step 1: Get Started with the Main File

### Setting Up the Main File

To kickstart your Ion WebRTC application, you need to set up the main file. This file serves as the entry point for your application, initializing necessary components and configuring the initial settings.

#### [a] Initialize the Project
Navigate to the backend directory in your Ion WebRTC project. Create a new file named `main.go`.

#### [b] Main File Content
Open `main.go` and add the following code:

```go title="Go"
package main

import (
    "github.com/pion/webrtc/v3"
    "log"
    "net/http"
    "github.com/ionorg/ion-sfu/pkg/sfu"
)

func main() {
    // Configure SFU
    s := sfu.NewSFU(sfu.Config{
        WebRTC: sfu.WebRTCConfig{
            ICEPortRange: []uint16{5000, 5100},
            ICEAgents:    []string{"stun:stun.l.google.com:19302"},
        },
    })

    // Create HTTP server
    http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
        s.ServeWebRTC(w, r)
    })

    // Start server
    log.Println("Starting server on :8080")
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatalf("failed to start server: %v", err)
    }
}
```

#### Explanation of Main Components

**Package Imports**
- `github.com/pion/webrtc/v3`: A Go implementation of WebRTC.
- `github.com/ionorg/ion-sfu/pkg/sfu`: Provides SFU functionalities for managing media streams.

**SFU Configuration**
- `sfu.NewSFU`: Initializes the SFU with WebRTC configurations, including ICE servers and port ranges.

**HTTP Server:**
- `http.HandleFunc("/ws", ...)`: Sets up an endpoint to handle WebRTC signaling.
- `http.ListenAndServe(":8080", nil)`: Starts the HTTP server on port 8080.

By following these steps, you have set up the main file, which initializes the core components of your Ion WebRTC application. This file serves as the foundation upon which you will build the remaining functionalities.

## Step 2: Wireframe All the Components

### Creating the UI Layout

Now that the backend is set up, it’s time to design the user interface using Flutter. This involves creating a basic layout for your Ion WebRTC application, focusing on the core components that users will interact with.

#### [a] Set Up the Flutter Project
   - Navigate to your Flutter project directory.
   - If you haven’t already, create a new Flutter project using: `flutter create ion_app`
   - Open the `lib/main.dart` file in your Flutter project.

#### [b] Basic UI Components
Modify `main.dart` to include the basic structure of your application:

```dart title="Dart"
import 'package:flutter/material.dart';

void main() => runApp(IonApp());

class IonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ion WebRTC App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ion WebRTC'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // Navigate to join screen
              },
              child: Text('Join Call'),
            ),
          ],
        ),
      ),
    );
  }
}
```

#### Explanation of UI Components

**IonApp Class:**
- `MaterialApp`: Sets up the overall theme and routes for the application.
- `HomeScreen`: The main screen users see when they open the app.

**HomeScreen Class:**
- `AppBar`: A top navigation bar with the title of the app.
- `Center` and `Column`: Layout widgets that center the content and arrange child widgets vertically.
- `ElevatedButton`: A button that will navigate users to the join screen.

This basic wireframe sets up the structure for the user interface, providing a clear layout that includes a button to join a call. As you proceed, you will add more functionality and refine the UI to ensure a seamless user experience.

## Step 3: Implement Join Screen

### Creating the Join Screen Functionality
The join screen is a critical part of your Ion WebRTC application, where users can enter the necessary details to join a call. This step involves setting up the user interface for the join screen and handling user input.

#### [a] Update the Navigation
Open `lib/main.dart` and update the `HomeScreen` class to navigate to the join screen:

```dart title="Dart"
import 'package:flutter/material.dart';
import 'join_screen.dart';

void main() => runApp(IonApp());

class IonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ion WebRTC App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ion WebRTC'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => JoinScreen()),
                );
              },
              child: Text('Join Call'),
            ),
          ],
        ),
      ),
    );
  }
}
```

#### [b] Create JoinScreen
Create a new file named `join_screen.dart` in the `lib` directory and add the following code:

```dart title="Dart"
import 'package:flutter/material.dart';

class JoinScreen extends StatefulWidget {
  @override
  _JoinScreenState createState() => _JoinScreenState();
}

class _JoinScreenState extends State<JoinScreen> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _roomController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Join Call'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _roomController,
                decoration: InputDecoration(labelText: 'Room ID'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a room ID';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    // Handle joining call logic
                  }
                },
                child: Text('Join'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

#### Explanation of Join Screen Components

**Form Widgets:**
- `TextFormField`: Collects the user's name and room ID with validation.
- `ElevatedButton`: Triggers the form validation and handles the logic to join the call.

**Form Validation:**
Ensures that both fields are filled before proceeding.

By setting up the join screen, users can input their name and room ID to join a call. The next steps will focus on handling the logic to connect to a call using Ion WebRTC.

## Step 4: Implement Controls

### Adding Controls for the Application

Implementing controls in your Ion WebRTC application allows users to interact with the app during a call. This includes functionalities like mute, unmute, and disconnect, which are essential for a seamless user experience.

#### [a] Update the Join Screen
Open `join_screen.dart` and modify the `_JoinScreenState` class to include navigation to the call screen upon successful validation:

```dart title="Dart"
import 'package:flutter/material.dart';
import 'call_screen.dart';

class JoinScreen extends StatefulWidget {
  @override
  _JoinScreenState createState() => _JoinScreenState();
}

class _JoinScreenState extends State<JoinScreen> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _roomController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Join Call'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _roomController,
                decoration: InputDecoration(labelText: 'Room ID'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a room ID';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => CallScreen(
                          name: _nameController.text,
                          roomId: _roomController.text,
                        ),
                      ),
                    );
                  }
                },
                child: Text('Join'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

#### [b] Create CallScreen
Create a new file named `call_screen.dart` in the `lib` directory and add the following code:

```dart title="Dart"
import 'package:flutter/material.dart';

class CallScreen extends StatelessWidget {
  final String name;
  final String roomId;

  CallScreen({@required this.name, @required this.roomId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Call with $name'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.call_end),
            onPressed: () {
              // Handle call end logic
              Navigator.pop(context);
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Connected to Room: $roomId'),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.mic),
                  onPressed: () {
                    // Handle mute logic
                  },
                ),
                IconButton(
                  icon: Icon(Icons.mic_off),
                  onPressed: () {
                    // Handle unmute logic
                  },
                ),
                IconButton(
                  icon: Icon(Icons.call_end),
                  onPressed: () {
                    // Handle disconnect logic
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```

#### Explanation of Controls

**CallScreen Class:**
- Displays the current call details and provides control buttons.

**IconButton Widgets:**
- `mic`: Mutes the microphone.
- `mic_off`: Unmutes the microphone.
- `call_end`: Ends the call and navigates back to the previous screen.

By implementing these controls, users can manage their call experience directly within the app, ensuring they have the necessary tools to interact effectively during their communication sessions.

How to Build Ion WebRTC App with Go?

Ion WebRTC

## Step 5: Implement Participant View

In this section, we will implement the functionality to display participant video streams in our Kurento WebRTC application. This involves setting up the WebRTC connection, handling media streams, and dynamically managing the display of multiple participants.

### Displaying Participants

To display video streams from multiple participants, we need to enhance our JavaScript to handle incoming media streams and update the HTML to accommodate multiple video elements.

### HTML Structure for Participant Views

#### [a] Update the HTML File
Modify the `index.html` file to include a container for participant video elements.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Kurento WebRTC Join Screen</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1>Join WebRTC Session</h1>
           <form id="joinForm">
               <input type="text" id="username" placeholder="Enter your name" required>
               <button type="submit">Join</button>
           </form>
           <div id="controls" class="hidden">
               <button id="playPauseBtn">Play</button>
               <button id="muteUnmuteBtn">Mute</button>
               <button id="stopBtn">Stop</button>
           </div>
           <div id="participantContainer" class="hidden">
               
           </div>
       </div>
       <script src="script.js"></script>
   </body>
   </html>
```

#### [b] Styling the Participant Container
Update the `styles.css` file to style the container and participant video elements.

```css title="CSS"
   body {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background-color: #f0f0f0;
       margin: 0;
       font-family: Arial, sans-serif;
   }

   .container {
       background-color: white;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       text-align: center;
       width: 100%;
       max-width: 640px;
   }

   input {
       width: 80%;
       padding: 10px;
       margin: 10px 0;
       border: 1px solid #ccc;
       border-radius: 5px;
   }

   button {
       padding: 10px 20px;
       background-color: #28a745;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       margin: 5px;
   }

   button:hover {
       background-color: #218838;
   }

   .hidden {
       display: none;
   }

   video {
       width: 100%;
       max-width: 640px;
       margin-top: 20px;
   }

   #participantContainer {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 10px;
       margin-top: 20px;
   }

   .participant {
       flex: 1 1 calc(50% - 10px);
       max-width: calc(50% - 10px);
   }

   .participant video {
       width: 100%;
       height: auto;
       border: 1px solid #ccc;
       border-radius: 5px;
   }
```

### Handling Media Streams

#### JavaScript for Managing Participants
Update the `script.js` file to manage participant connections and display their video streams.

```javascript title="JavaScript"
   document.getElementById('joinForm').addEventListener('submit', function(event) {
       event.preventDefault();
       const username = document.getElementById('username').value;
       if (username) {
           joinSession(username);
       }
   });

   function joinSession(username) {
       console.log(`Joining session as ${username}`);
       document.getElementById('controls').classList.remove('hidden');
       document.getElementById('participantContainer').classList.remove('hidden');

       // Example WebRTC connection logic (to be replaced with actual implementation)
       // const webRtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function (error) {
       //     if (error) return console.error(error);
       //     this.generateOffer(onOffer);
       // });

       // function onOffer(error, offerSdp) {
       //     if (error) return console.error(error);
       //     // Send the offer to the server
       // }
   }

   document.getElementById('playPauseBtn').addEventListener('click', function() {
       const videoElement = document.querySelector('.participant video');
       if (videoElement.paused) {
           videoElement.play();
           this.textContent = 'Pause';
       } else {
           videoElement.pause();
           this.textContent = 'Play';
       }
   });

   document.getElementById('muteUnmuteBtn').addEventListener('click', function() {
       const videoElement = document.querySelector('.participant video');
       if (videoElement.muted) {
           videoElement.muted = false;
           this.textContent = 'Mute';
       } else {
           videoElement.muted = true;
           this.textContent = 'Unmute';
       }
   });

   document.getElementById('stopBtn').addEventListener('click', function() {
       const videoElement = document.querySelector('.participant video');
       videoElement.pause();
       videoElement.srcObject = null;
       document.getElementById('controls').classList.add('hidden');
   });

   // Function to add a participant video element
   function addParticipant(name, stream) {
       const participantContainer = document.getElementById('participantContainer');
       const participantElement = document.createElement('div');
       participantElement.className = 'participant';
       participantElement.innerHTML = `
           <h3>${name}</h3>
           <video autoplay></video>
       `;
       participantContainer.appendChild(participantElement);

       const videoElement = participantElement.querySelector('video');
       videoElement.srcObject = stream;
   }

   // Example usage:
   // addParticipant('User1', someMediaStream);
```

### Explanation of Key Components

- **joinSession Function**: Initializes the session, reveals the controls, and prepares the application for participant management.
- **addParticipant Function**: Dynamically adds a new participant's video stream to the participant container.
- **Event Listeners**: Manage the play/pause, mute/unmute, and stop functionalities for the video elements.

### Handling Multiple Participants

To manage multiple participants, you need to handle incoming streams dynamically. This involves updating the signaling mechanism to handle new participant connections and streams.

```javascript title="JavaScript"
// Example signaling mechanism to handle new participants
// Assume signalingChannel is an established signaling mechanism (e.g., WebSocket)

signalingChannel.onmessage = function(message) {
    const parsedMessage = JSON.parse(message.data);

    switch (parsedMessage.id) {
        case 'newParticipant':
            const newStream = getStreamFromMessage(parsedMessage); // Replace with actual stream extraction
            addParticipant(parsedMessage.name, newStream);
            break;
        // Handle other message types as needed
    }
};

// Function to simulate receiving a new participant stream
function getStreamFromMessage(message) {
    // Placeholder function to simulate receiving a media stream
    // Replace this with actual WebRTC stream handling logic
    const mediaStream = new MediaStream();
    // Add tracks to the mediaStream
    return mediaStream;
}
```

With the participant view implemented, your Kurento WebRTC application can now display video streams from multiple participants dynamically. This feature is essential for creating a fully interactive video communication platform. In the next step, we will finalize the application by running and testing the code.

## Step 6: Run Your Code Now

With all the components in place, it's time to run and test your Kurento WebRTC application. This step will guide you through compiling, running, and troubleshooting the application to ensure everything works as expected.

### Testing and Running the Application

#### [a] Compile the Application
Ensure your development environment is set up to compile the C++ code. Use CMake to configure and build your project.

```bash title="bash"
   mkdir build
   cd build
   cmake ..
   make
```

This will generate the executable file for your Kurento application.

#### [b] Start Kurento Media Server
Before running your application, make sure the Kurento Media Server (KMS) is up and running.

```bash title="bash"
   sudo service kurento-media-server start
```

#### [c] Run the Application
Execute the compiled application binary to start your Kurento WebRTC application.

```bash title="bash"
   ./kurento-webrtc-app
```

#### [d] Open the Application in a Browser
Open your browser and navigate to the local server where your application is running (e.g., `http://localhost:8000`). You should see the join screen where you can enter your name and join a WebRTC session.

### Troubleshooting Common Issues

Here are some common issues you might encounter and how to resolve them:

#### Kurento Media Server Not Starting
   - Ensure all dependencies are installed correctly.
   - Check the KMS logs for any errors.
   - Restart the server if necessary.

```bash title="bash"
   sudo service kurento-media-server restart
```

#### WebRTC Connection Fails
   - Verify the signaling server is working and correctly configured.
   - Ensure ICE candidates are being exchanged correctly.
   - Check network configurations and firewall settings.

#### No Video or Audio
   - Ensure media permissions are granted in the browser.
   - Check the media stream sources and tracks.
   - Verify that the correct media codecs are being used.

## Conclusion

Congratulations! You've successfully built a Kurento WebRTC application from scratch. Here's a recap of what we've covered:

- **Introduction to Kurento WebRTC**: Understanding the core functionalities and benefits of using Kurento for real-time communication.
- **Setting Up the Environment**: Installing Kurento Media Server and setting up the project structure.
- **Implementing the Join Screen**: Creating a user-friendly interface for users to join WebRTC sessions.
- **Adding Media Controls**: Providing users with control over media playback, mute, and session management.
- **Displaying Participant Views**: Handling and displaying video streams from multiple participants dynamically.
- **Running and Testing the Application**: Compiling, running, and troubleshooting your Kurento WebRTC application.

By following these steps, you have created a robust and interactive WebRTC application using Kurento. This application serves as a solid foundation for further development and customization to meet specific project requirements.

Learn how to build a WebRTC application with Kurento Media Server. This comprehensive guide covers installation, setup, implementation steps, media controls and more.

How to Build Jitsi WebRTC App?

How to Build OvenMediaEngine WebRTC App?

Build WebRTC App with Kurento Media Server in C++?

Kurento WebRTC

## Step 5: Implement Participant View

In this step, we will focus on implementing the participant view for your Licode WebRTC application. The participant view allows users to see and interact with other participants in the video conference. This involves managing video streams and dynamically updating the participant list.

### Displaying Participants

To display participants, we need to handle the video streams and update the participant list in real-time as users join or leave the room.

#### [a] HTML Structure for Participant View
Ensure your `index.html` includes a section for displaying video streams and a participant list.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Licode WebRTC App</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div id="video-area">
           
       </div>
       <div id="controls">
           <button id="mute-btn">Mute</button>
           <button id="unmute-btn">Unmute</button>
           <button id="start-video-btn">Start Video</button>
           <button id="stop-video-btn">Stop Video</button>
       </div>
       <div id="participant-list">
           <h3>Participants</h3>
           <ul id="participants">
               
           </ul>
       </div>
       <script src="app.js"></script>
   </body>
   </html>
```

#### [b] JavaScript for Managing Video Streams
In `app.js`, implement functions to handle video streams and update the participant list.

```javascript title="JavaScript"
   // Initialize Licode client
   let licodeClient;
   let localStream;
   let remoteStreams = [];

   function initLicode() {
       // Initialize Licode client and join room
       const room = 'exampleRoom';
       const username = 'exampleUser';

       Licode.init({ room, user: username })
           .then(client => {
               licodeClient = client;
               setupLocalStream();
               setupEventListeners();
           })
           .catch(error => {
               console.error('Error initializing Licode:', error);
           });
   }

   function setupLocalStream() {
       // Create and publish local stream
       localStream = Licode.createLocalStream({ audio: true, video: true });
       licodeClient.publish(localStream);
       addStreamToVideoArea(localStream, true);
   }

   function setupEventListeners() {
       // Handle remote stream addition
       licodeClient.on('stream-added', stream => {
           licodeClient.subscribe(stream);
       });

       // Handle remote stream subscription
       licodeClient.on('stream-subscribed', stream => {
           remoteStreams.push(stream);
           addStreamToVideoArea(stream, false);
       });

       // Handle participant joining
       licodeClient.on('participant-joined', participant => {
           addParticipantToList(participant);
       });

       // Handle participant leaving
       licodeClient.on('participant-left', participant => {
           removeParticipantFromList(participant);
       });
   }

   function addStreamToVideoArea(stream, isLocal) {
       const videoArea = document.getElementById('video-area');
       const videoElement = document.createElement('video');
       videoElement.srcObject = stream.mediaStream;
       videoElement.autoplay = true;
       videoElement.muted = isLocal;
       videoArea.appendChild(videoElement);
   }

   function addParticipantToList(participant) {
       const participantList = document.getElementById('participants');
       const listItem = document.createElement('li');
       listItem.textContent = participant.name;
       listItem.id = `participant-${participant.id}`;
       participantList.appendChild(listItem);
   }

   function removeParticipantFromList(participant) {
       const listItem = document.getElementById(`participant-${participant.id}`);
       if (listItem) {
           listItem.remove();
       }
   }

   // Initialize Licode when the document is ready
   document.addEventListener('DOMContentLoaded', initLicode);
```

### Managing Video Streams

Managing multiple video streams efficiently is key to a smooth user experience. We'll handle adding, updating, and removing video streams as participants join or leave.

#### [a] Handling Multiple Video Streams
Ensure the `addStreamToVideoArea` function can handle multiple streams without performance issues.

```javascript title="JavaScript"
   function addStreamToVideoArea(stream, isLocal) {
       const videoArea = document.getElementById('video-area');
       const videoContainer = document.createElement('div');
       videoContainer.className = 'video-container';

       const videoElement = document.createElement('video');
       videoElement.srcObject = stream.mediaStream;
       videoElement.autoplay = true;
       videoElement.muted = isLocal;

       videoContainer.appendChild(videoElement);
       videoArea.appendChild(videoContainer);
   }
```

#### [b] Optimizing Video Quality and Performance
   Use Licode's features to optimize video quality and performance. This includes adjusting video resolution and bitrate dynamically based on network conditions.

```javascript title="JavaScript"
   function setupLocalStream() {
       // Create and publish local stream with specified options
       localStream = Licode.createLocalStream({
           audio: true,
           video: true,
           videoSize: [640, 480, 640, 480], // Minimum and maximum video size
           frameRate: 30,
           bitrate: 500 // Adjust based on your requirements
       });
       licodeClient.publish(localStream);
       addStreamToVideoArea(localStream, true);
   }
```

#### [c] Handling Stream Removal
Implement logic to handle the removal of streams when participants leave the room.

```javascript title="JavaScript"
   licodeClient.on('stream-removed', stream => {
       const videoContainer = document.querySelector(`.video-container[data-stream-id="${stream.id}"]`);
       if (videoContainer) {
           videoContainer.remove();
       }
   });
```

By implementing these features, you will create a dynamic and responsive participant view that enhances the overall user experience of your Licode WebRTC application. The final step will be to run and test your application to ensure everything is working correctly.

## Step 6: Run Your Code Now

With all components set up and implemented, the final step is to run your Licode WebRTC application and ensure everything is working smoothly. This involves testing the application locally, addressing any issues, and preparing for deployment.

### Testing the Application Locally

#### [a] Run the Basic Example
   Start by running the basic example provided by Licode to ensure that the core functionalities are working correctly.

```bash title="bash"
   ./scripts/initBasicExample.sh
```

   Open a web browser and navigate to `http://localhost:3001`. This will allow you to test the basic video conferencing features and verify that your Licode setup is functioning as expected.

#### [b] Run Your Custom Application
Ensure your custom application files (`index.html`, `styles.css`, `app.js`) are placed in the appropriate directory, typically the `www` folder. Start the Licode server and access your custom application.

```bash title="bash"
   ./scripts/initLicode.sh
```

Navigate to your custom application's URL, typically `http://localhost:3001`, to test the full functionality.

#### [c] Common Issues and Solutions
   - **No Video/Audio:** Ensure your browser has granted permission to use the camera and microphone.
   - **Connection Issues:** Verify that the Licode server is running and properly configured. Check network configurations and firewall settings.
   - **Console Errors:** Inspect the browser console for any errors. These can provide clues for troubleshooting issues with your code.

### Deploying Licode

Once you have tested your application locally and confirmed that everything is working correctly, the next step is to deploy it to a server.

#### [a] Choose a Hosting Environment
Licode can be deployed on various hosting environments, such as AWS, Google Cloud, or DigitalOcean. Choose an environment that suits your needs and set up a server.

#### [b] Configure the Server
Install necessary dependencies on the server, including Node.js, Git, and any other required tools.

```bash title="bash"
   sudo apt-get update
   sudo apt-get install -y build-essential cmake git nodejs
```

#### [c] Clone the Licode Repository
Clone your Licode project to the server and install dependencies.

```bash title="bash"
   git clone https://github.com/lynckia/licode.git
   cd licode
   ./scripts/installUbuntuDeps.sh
   ./scripts/installErizo.sh
```

#### [d] Set Up Environment Variables
Configure environment variables for your server. Edit the `licode_config.js` file to match your server's public IP and other settings.

```javascript title="JavaScript"
   var config = {
       cloudProvider: 'amazon',
       network: {
           'publicIP': 'YOUR_SERVER_PUBLIC_IP',
           'privateIP': 'YOUR_SERVER_PRIVATE_IP',
           'port': 443
       },
       ...
   };
   module.exports = config;
```

#### [e] Start the Licode Services
Run the initialization scripts to start all necessary services on your server.

```bash title="bash"
   ./scripts/initLicode.sh
```

#### [f] Access Your Application
Open a web browser and navigate to your server's IP address to access your Licode WebRTC application. Ensure that the application functions correctly in the deployed environment.

## Conclusion
By following these steps, you have successfully set up and deployed a Licode WebRTC application. This application allows for real-time video conferencing, leveraging the power of Licode's open-source platform. Here, we summarize the key points and address common questions.

### Summary of Key Points
- **Licode Overview:** Licode is an open-source WebRTC platform that uses C++ and Node.js to provide robust real-time communication features.
- **Setup and Configuration:** Detailed steps to set up the development environment, build Licode, and configure the application.
- **UI Implementation:** Creation of a join screen, controls, and participant views to enhance user interaction.
- **Deployment:** Instructions for deploying Licode to a server and accessing the application remotely.

Explore the comprehensive guide on how Licode WebRTC operates. Learn about its architecture, setup, implementation of UI components, and deployment. Perfect for developers looking to leverage Licode for real-time communication applications.

How to Build Licode WebRTC App with JavaScript?

Licode WebRTC

## Step 5: Implement Participant View

### Participant View Design

The participant view is a crucial component of your Jitsi WebRTC application. It displays the video streams of all participants in a conference, allowing users to see and interact with each other. A well-designed participant view should be responsive, scalable, and easy to navigate.

#### Design Principles

1. **Responsiveness:** Ensure the layout adjusts smoothly across different screen sizes and devices.
2. **Scalability:** Handle a varying number of participants efficiently, maintaining performance and usability.
3. **Clarity:** Provide a clear and organized display of video streams, avoiding clutter and confusion.

### UI/UX Considerations

- **Grid Layout:** Use a grid layout to organize video streams uniformly.
- **Dynamic Adjustment:** Automatically adjust the layout based on the number of participants.
- **Participant Labels:** Include labels or names for each participant to identify them easily.

### Code Snippets
Here are the code snippets to implement the participant view in your Jitsi WebRTC application.

#### HTML for Participant View

The HTML structure for the participant view was set up in Part 4. Here it is for reference:

```html title="HTML"
<div id="participant-view">
    
</div>
```

#### CSS for Participant View

Add styling to ensure the participant view is responsive and organized. Here’s the relevant section in `styles.css`:

```css title="CSS"
#participant-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#participant-view > div {
    width: 200px;
    height: 150px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.participant-label {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 3px;
}
```

#### JavaScript for Participant View

To dynamically add and manage participant video streams, modify the `app.js` file as follows:

- **[a] Initialize Jitsi Meet API and Participant Handling:**

```javascript title="JavaScript"
let api;

function joinConference(conferenceId) {
    const domain = 'meet.jit.si';
    const options = {
        roomName: conferenceId,
        width: '100%',
        height: '100%',
        parentNode: document.querySelector('#participant-view'),
        configOverwrite: {},
        interfaceConfigOverwrite: {}
    };
    api = new JitsiMeetExternalAPI(domain, options);

    api.addEventListener('videoConferenceJoined', () => {
        console.log('Successfully joined the conference');
        document.getElementById('join-screen').style.display = 'none';
        document.getElementById('controls').style.display = 'flex';
        document.getElementById('participant-view').style.display = 'flex';
    });

    api.addEventListener('participantJoined', handleParticipantJoined);
    api.addEventListener('participantLeft', handleParticipantLeft);
}

function handleParticipantJoined(participant) {
    console.log('Participant joined:', participant);
    addParticipantView(participant.id, participant.displayName);
}

function handleParticipantLeft(participant) {
    console.log('Participant left:', participant);
    removeParticipantView(participant.id);
}
```

- **[b] Functions to Add and Remove Participant Views**

```javascript title="JavaScript"
function addParticipantView(id, displayName) {
    const participantContainer = document.createElement('div');
    participantContainer.id = `participant-${id}`;
    participantContainer.classList.add('participant');

    const participantLabel = document.createElement('div');
    participantLabel.classList.add('participant-label');
    participantLabel.textContent = displayName || 'Anonymous';

    participantContainer.appendChild(participantLabel);
    document.getElementById('participant-view').appendChild(participantContainer);
}

function removeParticipantView(id) {
    const participantContainer = document.getElementById(`participant-${id}`);
    if (participantContainer) {
        participantContainer.remove();
    }
}
```

### Explanation of the Code

- **Event Listeners:** The Jitsi Meet API event listeners handle participants joining and leaving the conference.
- **Participant View Functions:** These functions dynamically add or remove video elements in the participant view, ensuring the interface updates in real-time.

### Testing the Participant View

After implementing the participant view, test the following scenarios to ensure everything works correctly:

- When a participant joins, their video stream should appear in the participant view.
- When a participant leaves, their video stream should be removed from the participant view.
- The layout should adjust dynamically as participants join and leave, maintaining an organized grid.

By following these steps, you have successfully implemented a responsive and scalable participant view in your Jitsi WebRTC application. This component is essential for providing a clear and organized display of video streams, enhancing the overall user experience. The next step will guide you through running and testing your complete application.

## Step 6 - Run Your Code Now

### Final Steps

Now that you have implemented the key components of your Jitsi WebRTC application, it's time to run the application and test its functionality. Follow these final steps to ensure your application is up and running smoothly.

### Running the Application

#### [a] Start the Server
Ensure your Jitsi Videobridge server is running. If you haven't started it yet, use the following command:

```bash title="bash"
   ./jvb.sh --apis=xmpp,rest
```

#### [b] Open the Application
Open your HTML file in a web browser. You can do this by navigating to the directory containing your HTML file and opening it directly, or by setting up a local server.

```bash title="bash"
   # Using Python's HTTP server for quick setup
   python3 -m http.server
```

Navigate to `http://localhost:8000` in your browser to view the application.

#### [c] Join a Conference
Enter a conference ID in the join screen and click the "Join" button. This will initiate the connection to the Jitsi Videobridge and display the participant view and controls.

### Testing the Application
Ensure all components are working as expected:

- **Join Screen:** Verify that entering a conference ID and clicking "Join" successfully connects to the conference.
- **Controls:** Test each control button (mute, unmute, video on, video off) to ensure they perform the expected actions.
- **Participant View:** Confirm that participant video streams are displayed correctly and adjust dynamically as participants join or leave.

## Conclusion
Congratulations! You have successfully built a functional Jitsi WebRTC application using Java/Kotlin, incorporating key features such as a join screen, control elements, and a participant view. This application demonstrates the power and flexibility of Jitsi's open-source tools, providing a robust foundation for building scalable and efficient communication solutions.

Learn how to build a scalable video conferencing application using Jitsi WebRTC with Java/Kotlin.

How to Build Kurento Media WebRTC App?

How to Build Jitsi WebRTC App with JavaScript?

Jitsi WebRTC

## Step 5: Implement Participant View

### Building the Participant View

The participant view is an essential component of your FreeSwitch WebRTC application. It allows users to see and interact with multiple participants in a session. In this section, we will implement the participant view, including the layout for displaying multiple video streams and managing participant streams and layouts.

### Displaying Multiple Participants

To display multiple participants, we need to dynamically create video elements for each participant and add them to the participant view. The main interface HTML will have a container for remote video elements.

#### [a] HTML
Update your main communication interface HTML file to include a container for remote videos:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FreeSwitch WebRTC Main Interface</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main-interface">
        <div id="local-video-container">
            <video id="local-video" autoplay muted></video>
        </div>
        <div id="remote-video-container">
            
        </div>
        <div class="control-panel">
            <button id="mute-audio">Mute Audio</button>
            <button id="toggle-video">Stop Video</button>
            <button id="switch-camera">Switch Camera</button>
            <button id="end-call">End Call</button>
        </div>
    </div>
    <script src="webrtc.js"></script>
</body>
</html>
```

#### [b] CSS
Add styling for the remote video container to your `styles.css` file:

```css title="CSS"
#remote-video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.remote-video {
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```

### Managing Participant Streams and Layouts

We will now update the JavaScript to handle multiple participant streams and manage their layout dynamically.

#### [c] JavaScript (webrtc.js)

```javascript title="JavaScript"
document.addEventListener("DOMContentLoaded", function () {
    const muteAudioButton = document.getElementById("mute-audio");
    const toggleVideoButton = document.getElementById("toggle-video");
    const switchCameraButton = document.getElementById("switch-camera");
    const endCallButton = document.getElementById("end-call");

    let localStream;
    let remoteStreams = {};
    let isAudioMuted = false;
    let isVideoStopped = false;

    // Get user media
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
            localStream = stream;
            document.getElementById("local-video").srcObject = stream;
            // Initialize connection to signaling server
            initializeWebSocket();
        })
        .catch(error => {
            console.error("Error accessing media devices.", error);
        });

    // WebSocket initialization and handling
    function initializeWebSocket() {
        // Replace with your actual WebSocket signaling server URL
        const signalingServerUrl = "wss://your-signaling-server-url";
        const ws = new WebSocket(signalingServerUrl);

        ws.onopen = function () {
            console.log("Connected to the signaling server");

            // Send join message
            const joinMessage = {
                type: "join",
                username: "user",
                roomId: "room"
            };
            ws.send(JSON.stringify(joinMessage));
        };

        ws.onmessage = function (message) {
            console.log("Received message from server:", message.data);

            const data = JSON.parse(message.data);
            switch (data.type) {
                case "joined":
                    console.log(`${data.username} joined room ${data.roomId}`);
                    break;
                case "new-participant":
                    handleNewParticipant(data.participantId);
                    break;
                case "participant-left":
                    handleParticipantLeft(data.participantId);
                    break;
                case "offer":
                    handleOffer(data.offer, data.participantId);
                    break;
                case "answer":
                    handleAnswer(data.answer, data.participantId);
                    break;
                case "ice-candidate":
                    handleIceCandidate(data.candidate, data.participantId);
                    break;
                // Handle other message types as needed
            }
        };

        ws.onerror = function (error) {
            console.error("WebSocket error:", error);
        };

        ws.onclose = function () {
            console.log("Disconnected from the signaling server");
        };
    }

    function handleNewParticipant(participantId) {
        // Create new video element for the participant
        const remoteVideo = document.createElement("video");
        remoteVideo.id = `remote-video-${participantId}`;
        remoteVideo.classList.add("remote-video");
        remoteVideo.autoplay = true;
        document.getElementById("remote-video-container").appendChild(remoteVideo);

        // Initialize a new RTCPeerConnection
        const peerConnection = new RTCPeerConnection();

        // Add local stream tracks to the peer connection
        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

        // Handle incoming tracks
        peerConnection.ontrack = function (event) {
            if (remoteVideo.srcObject !== event.streams[0]) {
                remoteVideo.srcObject = event.streams[0];
                console.log("Received remote stream");
            }
        };

        // Handle ICE candidates
        peerConnection.onicecandidate = function (event) {
            if (event.candidate) {
                const candidateMessage = {
                    type: "ice-candidate",
                    candidate: event.candidate,
                    participantId: participantId
                };
                ws.send(JSON.stringify(candidateMessage));
            }
        };

        remoteStreams[participantId] = peerConnection;

        // Create and send an offer
        peerConnection.createOffer()
            .then(offer => {
                return peerConnection.setLocalDescription(offer);
            })
            .then(() => {
                const offerMessage = {
                    type: "offer",
                    offer: peerConnection.localDescription,
                    participantId: participantId
                };
                ws.send(JSON.stringify(offerMessage));
            })
            .catch(error => {
                console.error("Error creating offer:", error);
            });
    }

    function handleParticipantLeft(participantId) {
        // Remove the video element for the participant
        const remoteVideo = document.getElementById(`remote-video-${participantId}`);
        if (remoteVideo) {
            remoteVideo.remove();
        }

        // Close the peer connection
        if (remoteStreams[participantId]) {
            remoteStreams[participantId].close();
            delete remoteStreams[participantId];
        }
    }

    function handleOffer(offer, participantId) {
        const peerConnection = new RTCPeerConnection();

        // Add local stream tracks to the peer connection
        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

        // Handle incoming tracks
        peerConnection.ontrack = function (event) {
            const remoteVideo = document.getElementById(`remote-video-${participantId}`);
            if (remoteVideo.srcObject !== event.streams[0]) {
                remoteVideo.srcObject = event.streams[0];
                console.log("Received remote stream");
            }
        };

        // Handle ICE candidates
        peerConnection.onicecandidate = function (event) {
            if (event.candidate) {
                const candidateMessage = {
                    type: "ice-candidate",
                    candidate: event.candidate,
                    participantId: participantId
                };
                ws.send(JSON.stringify(candidateMessage));
            }
        };

        peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
            .then(() => {
                return peerConnection.createAnswer();
            })
            .then(answer => {
                return peerConnection.setLocalDescription(answer);
            })
            .then(() => {
                const answerMessage = {
                    type: "answer",
                    answer: peerConnection.localDescription,
                    participantId: participantId
                };
                ws.send(JSON.stringify(answerMessage));
            })
            .catch(error => {
                console.error("Error handling offer:", error);
            });

        remoteStreams[participantId] = peerConnection;
    }

    function handleAnswer(answer, participantId) {
        const peerConnection = remoteStreams[participantId];
        peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
            .catch(error => {
                console.error("Error setting remote description:", error);
            });
    }

    function handleIceCandidate(candidate, participantId) {
        const peerConnection = remoteStreams[participantId];
        peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
            .catch(error => {
                console.error("Error adding ICE candidate:", error);
            });
    }

    // Mute/Unmute Audio
    muteAudioButton.addEventListener("click", function () {
        isAudioMuted = !isAudioMuted;
        localStream.getAudioTracks()[0].enabled = !isAudioMuted;
        muteAudioButton.textContent = isAudioMuted ? "Unmute Audio" : "Mute Audio";
    });

    // Start/Stop Video
    toggleVideoButton.addEventListener("click", function () {
        isVideoStopped = !isVideoStopped;
        localStream.getVideoTracks()[0].enabled = !isVideoStopped;
        toggleVideoButton.textContent = isVideoStopped ? "Start Video" : "Stop Video";
    });

    // Switch Camera
    switchCameraButton.addEventListener("click", async function () {
        if (localStream) {
            const videoTrack =

 localStream.getVideoTracks()[0];
            const currentConstraints = videoTrack.getConstraints();

            const devices = await navigator.mediaDevices.enumerateDevices();
            const videoDevices = devices.filter(device => device.kind === 'videoinput');

            if (videoDevices.length > 1) {
                const currentDeviceId = videoTrack.getSettings().deviceId;
                const newDeviceId = videoDevices.find(device => device.deviceId !== currentDeviceId).deviceId;

                const newConstraints = {
                    video: {
                        deviceId: { exact: newDeviceId }
                    }
                };

                const newStream = await navigator.mediaDevices.getUserMedia(newConstraints);
                const newVideoTrack = newStream.getVideoTracks()[0];
                localStream.removeTrack(videoTrack);
                localStream.addTrack(newVideoTrack);

                document.getElementById("local-video").srcObject = localStream;
            }
        }
    });

    // End Call
    endCallButton.addEventListener("click", function () {
        if (localStream) {
            localStream.getTracks().forEach(track => track.stop());
        }
        // Implement additional logic to handle call termination
        window.location.href = "join.html";
    });
});
```

### Explanation of the JavaScript Code

#### WebSocket Initialization and Handling
   - Establishes a WebSocket connection to the signaling server and handles incoming messages.
   - Manages participant join, leave, offer, answer, and ICE candidate messages.

#### Handling New Participants
   - Creates a new video element for each participant.
   - Initializes a new RTCPeerConnection for each participant.
   - Adds local stream tracks to the peer connection.
   - Handles incoming tracks and ICE candidates.
   - Creates and sends an offer to the new participant.

#### Handling Participant Left
   - Removes the video element for the participant who left.
   - Closes the peer connection and removes it from the `remoteStreams` object.

#### Handling Offers and Answers
   - Sets up the RTCPeerConnection for incoming offers and answers.
   - Manages remote descriptions and ICE candidates.

#### Implementing Control Features
   - Mute/unmute audio.
   - Start/stop video.
   - Switch camera.
   - End call and redirect to the join screen.

This completes the implementation of the participant view for your FreeSwitch WebRTC application. Users can now see and interact with multiple participants in a session. In the next part, we will cover how to run your code and test the application to ensure everything works as expected.

## Step 6: Run Your Code Now

### Running the Application

Now that you have implemented all the core features of your FreeSwitch WebRTC application, it’s time to run and test your code. This section will guide you through the steps to ensure your application is up and running smoothly.

### Steps to Run the FreeSwitch WebRTC App

#### Start FreeSwitch**
   - Ensure FreeSwitch is properly configured and running.
   - Start FreeSwitch by running:

```sh title="sh"
     sudo freeswitch -nc
```

#### Launch the Web Server
   - Serve your HTML, CSS, and JavaScript files using a web server. You can use a simple HTTP server like `http-server` for this purpose.
   - Install `http-server` if you haven't already:

```sh title="sh"
     npm install -g http-server
```

   - Navigate to the directory containing your `index.html` file and start the server:
     
```sh title="sh"
     http-server
```

   - The server will start and provide you with a URL (e.g., `http://localhost:8080`).

#### Access the Application
   - Open a web browser and navigate to the URL provided by your HTTP server (e.g., `http://localhost:8080`).
   - You should see the join screen of your FreeSwitch WebRTC application.

### Testing and Debugging Tips

#### Test the Join Screen
   - Enter a username and room ID, then click the "Join" button.
   - Ensure the WebSocket connection to the signaling server is established and that you can join the session without errors.

#### Test Audio and Video Controls
   - Verify that you can mute/unmute audio and start/stop video using the respective buttons.
   - Check that switching the camera works if you have multiple video input devices.

#### Test Participant View
   - Open multiple browser tabs or windows and join the same room from different tabs.
   - Ensure that video streams from all participants are displayed correctly.
   - Test the handling of participants joining and leaving the session.

#### Check Console Logs
   - Open the browser's developer console (usually accessible with F12 or right-clicking the page and selecting "Inspect").
   - Look for any error messages or warnings in the console log that might indicate issues with your WebRTC implementation.

#### Network Debugging
   - Use the network tab in the browser's developer tools to monitor WebSocket communication and network traffic.
   - Ensure that signaling messages (offer, answer, ICE candidates) are being sent and received correctly.

### Troubleshooting Common Issues

#### WebSocket Connection Issues**
- Ensure that the signaling server URL is correct and that the server is running.
- Check network connectivity and firewall settings that might block WebSocket connections.

#### Media Device Access Errors
- Verify that your browser has permission to access the microphone and camera.
- Check that the correct media devices are selected and available.

#### ICE Candidate Gathering Issues
- Ensure that ICE candidates are being gathered and sent correctly.
- Verify that STUN/TURN servers are configured if necessary.

#### Video/Audio Stream Issues
- Ensure that video and audio tracks are being added to the RTCPeerConnection.
 - Check that the correct video and audio elements are being updated with the media streams.

### Example Scenario: Testing a Two-Participant Session

#### Participant 1
   - Open a browser window and navigate to `http://localhost:8080`.
   - Enter a username (e.g., "User1") and a room ID (e.g., "TestRoom").
   - Click "Join" to enter the session.

#### Participant 2
- Open another browser window or tab and navigate to `http://localhost:8080`.
- Enter a different username (e.g., "User2") and the same room ID (e.g., "TestRoom").
- Click "Join" to enter the session.

#### Verify Interaction
- Ensure that both participants can see each other's video streams.
- Test the audio and video controls for both participants.
- Verify that messages and streams are handled correctly by the signaling server.

## Conclusion

Congratulations! You have successfully built a FreeSwitch WebRTC application that allows users to join sessions, control their audio and video, and interact with multiple participants. This guide covered the essential steps, from setting up FreeSwitch and configuring WebRTC to implementing the user interface and testing the application.

Learn how to integrate FreeSwitch with WebRTC to build powerful real-time communication applications. This guide covers installation, configuration, control implementation, and participant management, ensuring a seamless and scalable communication solution.

How to Build MiroTalk SFU WebRTC App?

How to Build FreeSwitch WebRTC App with JavaScript?

FreeSwitch WebRTC

## Step 5: Implement Participant View

In this section, we will focus on implementing the participant view for your WebRTC-Streamer application. The participant view is crucial for applications that involve multiple participants in a streaming session, such as video conferencing or webinars. We will create a dynamic layout to display multiple video streams and ensure an optimal viewing experience.

### Display Multiple Participants

To handle and display multiple participants, we need to dynamically create video elements for each participant and manage their layouts. We will use HTML, CSS, and JavaScript to achieve this.

#### HTML for Participant View

Here is the HTML code to set up the participant view:

```html title="HTML"
<!DOCTYPE html>
<html>
<head>
    <title>WebRTC-Streamer</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="participant-view">
        <h1>Participants</h1>
        <div id="videoContainer" class="video-container"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

#### CSS for Participant View

To style the participant view and create a grid layout for multiple video streams, use the following CSS code:

```css title="CSS"
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

.participant-view {
    margin-top: 50px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
    width: 80%;
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

video {
    width: 200px;
    height: 150px;
    background-color: black;
}
```

#### JavaScript to Manage Participant Streams

Next, we will add JavaScript to dynamically create and manage video elements for each participant.

Here’s the JavaScript code to handle multiple participant streams:

```javascript title="JavaScript"
document.addEventListener('DOMContentLoaded', (event) => {
    const videoContainer = document.getElementById('videoContainer');

    // Example participant streams (replace with actual streams)
    const participantStreams = [
        'stream1.mp4',
        'stream2.mp4',
        'stream3.mp4'
    ];

    // Function to add a participant video element
    function addParticipantStream(streamSrc) {
        const videoElement = document.createElement('video');
        videoElement.src = streamSrc;
        videoElement.controls = true;
        videoElement.autoplay = true;
        videoContainer.appendChild(videoElement);
    }

    // Add all participant streams to the container
    participantStreams.forEach(streamSrc => {
        addParticipantStream(streamSrc);
    });

    // Example: Function to add a new participant dynamically
    function addNewParticipant(streamSrc) {
        addParticipantStream(streamSrc);
    }

    // Simulate adding a new participant after 5 seconds (for demo purposes)
    setTimeout(() => {
        addNewParticipant('stream4.mp4');
    }, 5000);
});
```

In this script, we first create a container for the video elements. We then define an array of participant streams (replace these with actual stream URLs or WebRTC stream sources). The `addParticipantStream` function creates a video element for each stream and adds it to the container. The script also includes an example of dynamically adding a new participant after a delay, which can be useful in real-time applications where participants can join or leave at any time.

### Optimizing View Layout
To ensure an optimal viewing experience, especially when the number of participants changes dynamically, you might need to adjust the layout. Consider using CSS Grid or Flexbox for responsive design.

#### Responsive Layout Example

Modify the CSS to create a responsive grid layout:

```css title="CSS"
.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    justify-items: center;
}
```

This CSS uses a grid layout that adjusts the number of columns based on the available width, ensuring that the video elements are evenly distributed and responsive to different screen sizes.

In this step, you have implemented the participant view for your WebRTC-Streamer application. This includes creating a dynamic layout to display multiple video streams, styling the layout for a better user experience, and managing participant streams with JavaScript. The participant view is essential for applications involving multiple users, providing a clear and organized way to view all participants in the stream. Next, we will finalize the application by running the code and ensuring everything works seamlessly.

## Step 6: Run Your Code Now

In this final section, we will cover the steps to run your WebRTC-Streamer application, ensuring that everything is set up correctly and troubleshooting common issues that might arise. By the end of this section, your application should be ready for deployment.

### Final Steps to Execute the Application

Now that we have implemented the key components of the WebRTC-Streamer application, it's time to run the code and see it in action.

#### [a] Ensure All Dependencies are Installed
Make sure that all necessary dependencies are installed as covered in Part 2. This includes the WebRTC libraries, V4L2, RTSP libraries, and other required packages.

#### [b] Build the Application
Navigate to your project directory and run the build command to compile your application:

```sh title="sh"
   cd build
   make
```

#### [c] Run the Application
Once the build process is complete, you can run the application with the following command:

```sh title="sh"
   ./webrtc-streamer
```

#### [d] Access the Application in a Browser
   Open your web browser and navigate to the URL where your application is hosted. If running locally, this will typically be:

```
   http://localhost:8000
```

#### [e] Test the Join Screen
   - Enter the streaming URL and select the video source (V4L2 or RTSP).
   - Click the "Join" button to start the streaming session.

#### [f] Interact with the Controls
   - Use the play, pause, stop, and volume controls to interact with the video stream.
   - Check if the full-screen toggle works as expected.

#### [g] Verify the Participant View
   - Ensure that multiple participant streams are displayed correctly.
   - Check the layout responsiveness and the dynamic addition of new participants.

### Troubleshooting Common Issues

Here are some common issues you might encounter and their possible solutions:

#### Application Fails to Start 
   - **Check for Missing Dependencies:** Ensure all required libraries are installed.
   - **Review Build Logs:** Look for errors during the build process and resolve them.

#### Video Stream Not Displaying
   - **Check Stream URL:** Verify that the URL entered in the join screen is correct.
   - **Network Issues:** Ensure there are no network issues blocking the stream.

#### Controls Not Working
   - **JavaScript Errors:** Check the browser console for JavaScript errors and resolve them.
   - **Incorrect Element References:** Ensure that the HTML elements referenced in the JavaScript match the IDs in the code.

#### Layout Issues
   - **CSS Problems:** Review the CSS to ensure proper styling and layout.
   - **Responsive Design:** Test the application on different screen sizes to verify responsiveness.

## Conclusion

In this comprehensive guide, we have walked through the process of creating a WebRTC-Streamer application using C++, V4L2, RTSP, and WebRTC technologies. Starting from the project setup and dependency installation, we moved through implementing the main application logic, designing the user interface, adding user controls, and handling multiple participants. Finally, we ran the application and provided troubleshooting tips for common issues.

By following this guide, you should now have a fully functional WebRTC-Streamer application that can handle real-time video streaming from various sources and provide a seamless user experience. We encourage you to explore further customization and additional features to enhance your application even more.

Learn how to set up and implement WebRTC-Streamer for real-time video streaming. This guide covers installation, coding examples, and integration with Jitsi and Janus.

How to Build WebRTC Streamer App with C++?

WebRTC Streamer

## Step 5: Implement Participant View

### Participant View
The participant view is essential for displaying all participants in the streaming session. This view helps manage and present multiple video streams in an organized manner. Here’s how to implement the participant view for your OvenMediaEngine application.

#### [a] HTML Structure for Participant View
Modify the HTML to include a section for displaying participant video streams.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Stream</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="participant-container">
           <div class="participant" id="participant-template" style="display:none;">
               <video class="participant-video" autoplay></video>
               <p class="participant-name"></p>
           </div>
       </div>
       <script src="participants.js"></script>
   </body>
   </html>
```

#### [b] CSS Styling for Participant View 
Style the participant view to ensure a clean and organized layout.
   
```css title="CSS"
   .participant-container {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
       padding: 20px;
   }
   .participant {
       background: white;
       padding: 10px;
       border-radius: 5px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       text-align: center;
   }
   .participant-video {
       width: 200px;
       height: 150px;
       border-radius: 5px;
   }
   .participant-name {
       margin-top: 10px;
       font-weight: bold;
   }
```

#### [c] JavaScript Functionality for Participant View
Implement the JavaScript to dynamically add participants to the view.

```javascript title="JavaScript"
   const participantsContainer = document.querySelector('.participant-container');
   const participantTemplate = document.getElementById('participant-template');

   function addParticipant(name, stream) {
       const newParticipant = participantTemplate.cloneNode(true);
       newParticipant.style.display = 'block';
       newParticipant.querySelector('.participant-video').srcObject = stream;
       newParticipant.querySelector('.participant-name').textContent = name;
       participantsContainer.appendChild(newParticipant);
   }

   // Example usage with dummy data
   navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
       addParticipant('Participant 1', stream);
       addParticipant('Participant 2', stream);
   });
```

#### [d] Testing the Participant View
   - Test the participant view by simulating multiple participants.
   - Ensure that each participant’s video stream is displayed correctly and that their names are shown.

By implementing the participant view, you enable the application to display multiple video streams simultaneously. This step ensures a more interactive and engaging streaming experience, especially for applications requiring collaboration or audience participation.

## Step 6: Run Your Code Now

### Testing and Running the Application

After setting up the join screen, controls, and participant view, it’s time to run and test your OvenMediaEngine application. This final step will ensure that all components are working seamlessly together.

#### [a] Starting the Server
Ensure that your OvenMediaEngine server is running. If you are using Docker, you can start the server with:

```bash title="bash"
     docker start ome
```

#### [b] Launching the Application
Open your web browser and navigate to the join screen of your application, typically something like `http://localhost:8080/join.html`.

#### [c] Joining a Stream
   - Enter a username and a stream ID to join a stream. This will take you to the main streaming interface where you can see the participant view and controls.

#### [d] Testing the Controls
   - Use the play/pause button, volume control, and fullscreen toggle to ensure they work as expected.
   - Verify that you can join a stream and see your video as well as other participants' videos.

#### [e] Simulating Multiple Participants
   - Open multiple browser tabs or use different devices to join the same stream. This will help you test the participant view and ensure that it displays multiple streams correctly.

### Troubleshooting
   - If you encounter any issues, check the browser console for errors.
   - Ensure that all necessary ports are open and not blocked by firewalls.
   - Verify that your configuration files are correctly set up.

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OvenMediaEngine Stream</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="join-container">
        <h1>Join Stream</h1>
        <input type="text" id="username" placeholder="Enter your username">
        <input type="text" id="stream-id" placeholder="Enter stream ID">
        <button onclick="joinStream()">Join</button>
    </div>
    <div class="video-container">
        <video id="stream-video" controls autoplay></video>
        <div class="controls">
            <button id="play-pause" onclick="togglePlayPause()">Play</button>
            <input type="range" id="volume-control" min="0" max="1" step="0.1" onchange="setVolume(this.value)">
            <button id="fullscreen" onclick="toggleFullscreen()">Fullscreen</button>
        </div>
    </div>
    <div class="participant-container">
        <div class="participant" id="participant-template" style="display:none;">
            <video class="participant-video" autoplay></video>
            <p class="participant-name"></p>
        </div>
    </div>
    <script src="app.js"></script>
    <script src="controls.js"></script>
    <script src="participants.js"></script>
</body>
</html>
```

By following these steps, you will have a fully functional streaming application built with OvenMediaEngine. This comprehensive setup allows you to test and ensure that all features work harmoniously, providing a robust real-time streaming experience for your users.

## Conclusion
In this article, we explored how to create a real-time streaming application using OvenMediaEngine and WebRTC. We covered the essential steps, from setting up the server and configuring files to implementing the join screen, adding media controls, and creating a participant view. By following this guide, you can build a robust and scalable streaming application tailored to your needs.


Learn how to create a real-time streaming application using OvenMediaEngine and WebRTC. Follow our step-by-step guide to set up, configure, and implement essential features for a robust streaming solution.

## Introduction to OvenMediaEngine WebRTC

### What is OvenMediaEngine WebRTC?

OvenMediaEngine (OME) is an open-source streaming server developed by AirenSoft, designed to handle real-time communication and streaming with sub-second latency. It supports various streaming protocols, including WebRTC, SRT, RTMP, RTSP, and MPEG2-TS over HTLS, making it a versatile solution for large-scale live streaming applications.

### Understanding WebRTC Technology

WebRTC (Web Real-Time Communication) is a powerful technology that enables peer-to-peer communication through simple API calls. It is widely used for video conferencing, live streaming, and any application requiring real-time communication over the web. WebRTC's ability to establish direct connections between users reduces latency, ensuring a smooth and interactive streaming experience.

### OvenMediaEngine and Its Integrated Technologies

OvenMediaEngine leverages a suite of advanced technologies to deliver high-quality streaming with minimal delay. These include:

- **SRT (Secure Reliable Transport):** A protocol designed for secure, low-latency streaming, ideal for unpredictable networks.
- **RTMP (Real-Time Messaging Protocol):** A widely used protocol for live streaming that facilitates real-time data transmission.
- **RTSP (Real-Time Streaming Protocol):** A protocol used for establishing and controlling media sessions between endpoints.
- **MPEG2-TS over HTLS:** A transport stream protocol for transmitting video, audio, and data over the internet, ensuring compatibility and reliability.

With these technologies, OvenMediaEngine is capable of handling diverse streaming needs, from simple broadcasts to complex, large-scale live streaming events. The combination of WebRTC and these protocols allows for seamless integration and robust performance, making OME a go-to solution for developers looking to implement real-time streaming applications.

## Getting Started with the Code! 

### Create a New OvenMediaEngine App
To start building your streaming application with OvenMediaEngine, you first need to set up a new project. Here’s a step-by-step guide:

#### Prerequisites
   - Ensure you have the necessary development environment, including a C/C++ compiler, Git, and a suitable IDE (like Visual Studio Code or CLion).
   - Install Docker, as it simplifies the deployment process.

#### Cloning the Repository

```bash title="bash"
   git clone https://github.com/AirenSoft/OvenMediaEngine.git
   cd OvenMediaEngine
```

#### Setting Up the Environment
Navigate to the project directory and ensure all dependencies are installed. Follow the instructions provided in the repository’s README file to install any missing packages or libraries.

### Install

The installation process involves setting up the OvenMediaEngine server on your local machine. Here’s how to do it:

#### [a] Build the Docker Image 

```bash title="bash"
   docker build -t ovenmediaengine .
```

#### [b] Run the Docker Container

```bash title="bash"
   docker run -d --name ome -p 1935:1935 -p 3333:3333 -p 4000-4005:4000-4005/udp -p 8080:8080 ovenmediaengine
```

#### [c] Verify Installation 
Open your browser and navigate to `http://localhost:8080`. You should see the OvenMediaEngine dashboard, indicating that your installation is successful.

### Structure of the Project
Understanding the project structure is crucial for efficient development. Here’s a breakdown of the key components in the OvenMediaEngine project:

1. **src:** Contains the source code for the server, including core functionalities and protocol implementations.
2. **conf:** Holds configuration files for various modules such as WebRTC, RTMP, and SRT.
3. **build:** Scripts and files necessary for building the project.
4. **docker:** Docker-related files for containerization.
5. **web:** Web interface files for the management dashboard.

Each directory is designed to keep the project organized and modular, making it easier to manage and extend.

### App Architecture
![OvenMediaEngine-WebRTC](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Oven_Media_Engine_Web_RTC_work_4e52dd9688.png)
The app architecture of OvenMediaEngine is designed to handle high-performance streaming with low latency. Here’s an overview:

1. **Input Module:** Handles various input protocols (WebRTC, RTMP, SRT, etc.), capturing and processing incoming media streams.
2. **Transcoding Module:** Optionally transcodes media streams to different formats or bitrates.
3. **Output Module:** Delivers the processed streams to end-users through supported protocols.
4. **Management Interface:** Provides a web-based dashboard for managing and monitoring the server.

### Example Architecture Flow

1. **Client:** A user starts a stream using a WebRTC-compatible browser.
2. **OME Server:** The server receives the stream via the WebRTC input module.
3. **Transcoding:** If necessary, the server transcodes the stream.
4. **Delivery:** The server delivers the stream to other users via WebRTC, RTMP, or any other supported protocol.

This architecture ensures scalability and flexibility, allowing developers to customize and optimize their streaming solutions based on specific needs.

By following these steps, you’ll have a solid foundation for developing a streaming application using OvenMediaEngine. The next sections will guide you through implementing specific features and functionalities.

## Step 1: Get Started with Configuration Files

### Setting Up Configuration
Before diving into the code, it’s essential to configure OvenMediaEngine (OME) to suit your streaming needs. Configuration files define how OME handles incoming and outgoing streams, manages resources, and interacts with various protocols. Here’s how to get started with the primary configuration files.

#### [a] Locate Configuration Files
The main configuration files are located in the `conf` directory of your OME project. These files include settings for WebRTC, RTMP, and other protocols.

#### [b] Modify `Server.xml`
Open `Server.xml` to configure server-wide settings.

Example configuration for a basic setup:
     
```xml title="xml"
     <Server>
         <Network>
             <Address>0.0.0.0</Address>
             <Port>3333</Port>
         </Network>
         <App>
             <Name>live</Name>
             <Source>
                 <Protocol>rtmp</Protocol>
             </Source>
             <Stream>
                 <Protocol>webrtc</Protocol>
             </Stream>
         </App>
     </Server>
```
This setup allows OME to accept RTMP streams and deliver them via WebRTC.

#### [c] Configure `WebRTC.xml`
Open `WebRTC.xml` to adjust WebRTC-specific settings.

Example configuration:

```xml title="xml"
     <WebRTC>
         <Port>4000-4005</Port>
         <Stun>
             <Server>stun:stun.l.google.com:19302</Server>
         </Stun>
     </WebRTC>
```

This setting defines the ports WebRTC will use and specifies a STUN server for NAT traversal.

#### [d] Configure `RTMP.xml`
Open `RTMP.xml` to set up RTMP streaming.

Example configuration:

```xml title="xml"
     <RTMP>
         <Port>1935</Port>
     </RTMP>
```
This configuration sets the RTMP port to 1935, the default port for RTMP streams.

#### [e] Review and Save
After modifying the configuration files, review your changes to ensure correctness.

Save the files and restart the OME server to apply the new settings:

```bash title="bash"
     docker restart ome
```

By setting up these configuration files, you ensure that OvenMediaEngine is tailored to your specific streaming requirements. This initial setup lays the groundwork for a smooth streaming experience and prepares you for the next steps in implementing your application.

## Step 2: Wireframe All the Components

### Designing the Layout
Creating a wireframe for your OvenMediaEngine application is a crucial step in planning the overall structure and user interface. This blueprint will guide the development process, ensuring that all necessary components are accounted for and properly organized. Here’s how to wireframe your streaming application.

#### Identify Key Components
- **Join Screen:** The entry point for users to join the streaming session.
- **Controls:** Play, pause, volume, and other interactive controls for the media.
- **Participant View:** Displays all participants in the stream.
- **Chat Interface:** Optional component for text-based communication during the stream.
- **Settings:** Configuration options for adjusting stream quality and other preferences.

#### Create a Basic Layout
   - Sketch a simple layout using a tool like Balsamiq, Figma, or even pen and paper. Focus on the placement of key components.
- **Header:** Title and navigation options.
- **Main Content Area:** 
     - **Left Sidebar:** List of participants.
     - **Main Video Area:** Display the active stream.
     - **Right Sidebar:** Chat interface (if included).
- **Footer:** Media controls and settings.

#### Detail Each Component
- **Join Screen:**
     - Input fields for username and stream ID.
     - Join button.
- **Controls:**
     - Play/Pause button.
     - Volume slider.
     - Fullscreen toggle.
- **Participant View:**
     - Grid layout to display multiple participants.
     - Highlight speaker view.

#### User Flow
   - Define how users will interact with each component.
   - Example: User enters the stream ID on the join screen, joins the stream, interacts with media controls, and participates in the chat.

#### Iterate and Refine
   - Review the wireframe with stakeholders or team members.
   - Make necessary adjustments based on feedback to ensure the layout meets user needs.

By wireframing all components, you create a clear and organized structure for your streaming application. This visual guide helps streamline the development process, ensuring each part of the application is thoughtfully designed and implemented.

## Step 3: Implement Join Screen

### Building the Join Screen
The join screen is the entry point for users to access your streaming application. It should be user-friendly and efficient, enabling users to quickly join a stream with minimal effort. Here’s how to implement the join screen for your OvenMediaEngine application.

#### [a] HTML Structure 
Create an HTML file to define the layout of the join screen. Include input fields for the stream ID and username, and a button to join the stream.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Join Stream</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="join-container">
           <h1>Join Stream</h1>
           <input type="text" id="username" placeholder="Enter your username">
           <input type="text" id="stream-id" placeholder="Enter stream ID">
           <button onclick="joinStream()">Join</button>
       </div>
       <script src="app.js"></script>
   </body>
   </html>
```

#### [b] CSS Styling 
Create a CSS file to style the join screen. Ensure the design is clean and responsive.

```css title="CSS"
   body {
       font-family: Arial, sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background-color: #f0f0f0;
       margin: 0;
   }
   .join-container {
       background: white;
       padding: 20px;
       border-radius: 5px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       text-align: center;
   }
   .join-container input {
       width: 100%;
       padding: 10px;
       margin: 10px 0;
       border: 1px solid #ccc;
       border-radius: 5px;
   }
   .join-container button {
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       background-color: #007bff;
       color: white;
       cursor: pointer;
   }
   .join-container button:hover {
       background-color: #0056b3;
   }
```

#### [c] JavaScript Functionality
Create a JavaScript file to handle the join action. This script will capture the input values and redirect the user to the streaming page.
   
```javascript title="JavaScript"
   function joinStream() {
       const username = document.getElementById('username').value;
       const streamId = document.getElementById('stream-id').value;

       if (username && streamId) {
           // Redirect to the streaming page with username and stream ID as query parameters
           window.location.href = `stream.html?username=${username}&streamId=${streamId}`;
       } else {
           alert('Please enter both username and stream ID.');
       }
   }
```

#### [d] Testing the Join Screen 
   - Open the HTML file in a web browser and test the functionality.
   - Ensure that the inputs are working correctly and the join button redirects to the appropriate page with the correct query parameters.

By implementing the join screen with this approach, you create a simple and effective entry point for users to access your streaming application. This step ensures that users can quickly and easily join a stream, enhancing their overall experience.

## Step 4: Implement Controls 

### Adding Controls

In this step, you will implement the media controls for your streaming application. These controls will enable users to interact with the stream, providing functionalities like play, pause, volume adjustment, and fullscreen mode. Here’s how to add these controls to your application.

#### [a] HTML Structure for Controls
Add the control elements to your HTML file. This will typically include buttons for play/pause, volume control, and fullscreen toggle.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Stream</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="video-container">
           <video id="stream-video" controls></video>
           <div class="controls">
               <button id="play-pause" onclick="togglePlayPause()">Play</button>
               <input type="range" id="volume-control" min="0" max="1" step="0.1" onchange="setVolume(this.value)">
               <button id="fullscreen" onclick="toggleFullscreen()">Fullscreen</button>
           </div>
       </div>
       <script src="controls.js"></script>
   </body>
   </html>
```

#### [b] CSS Styling for Controls
Style the controls to make them user-friendly and visually appealing.

```css title="CSS"
   .video-container {
       position: relative;
       max-width: 100%;
       margin: auto;
   }
   .controls {
       position: absolute;
       bottom: 10px;
       left: 10px;
       right: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: rgba(0, 0, 0, 0.5);
       padding: 10px;
       border-radius: 5px;
   }
   .controls button, .controls input {
       margin: 0 5px;
       padding: 10px;
       background: white;
       border: none;
       border-radius: 5px;
   }
   .controls button:hover, .controls input:hover {
       background: #ddd;
   }
```

#### [c] JavaScript Functionality for Controls
Implement the functionality for each control in your JavaScript file.

```javascript title="JavaScript"
   const video = document.getElementById('stream-video');
   const playPauseButton = document.getElementById('play-pause');
   const volumeControl = document.getElementById('volume-control');

   function togglePlayPause() {
       if (video.paused || video.ended) {
           video.play();
           playPauseButton.textContent = 'Pause';
       } else {
           video.pause();
           playPauseButton.textContent = 'Play';
       }
   }

   function setVolume(value) {
       video.volume = value;
   }

   function toggleFullscreen() {
       if (!document.fullscreenElement) {
           video.requestFullscreen().catch(err => {
               alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
           });
       } else {
           document.exitFullscreen();
       }
   }
```

#### Testing the Controls
   - Open the streaming page in a web browser and test the functionality of each control.
   - Ensure that the play/pause button works correctly, the volume control adjusts the volume, and the fullscreen button toggles fullscreen mode.

By adding these controls, you enhance the user experience by providing essential functionalities for interacting with the stream. This step ensures that users have a smooth and intuitive way to manage their viewing experience.

How to Build OvenMediaEngine WebRTC App with JavaScript?

OvenMediaEngine WebRTC

## Step 5: Implement Participant View

### Displaying Participants

Displaying participants in a WebRTC session is crucial for a collaborative and interactive experience. Each participant's video stream should be visible to others in the room. We will enhance our `RoomLive` module and template to manage and display these streams effectively.

First, update the `RoomLive` module to handle participants joining and leaving, as well as managing their video streams. Open `lib/membrane_webrtc_app_web/live/room_live.ex`:

```elixir title="Elixir"
defmodule MembraneWebrtcAppWeb.RoomLive do
  use MembraneWebrtcAppWeb, :live_view

  def mount(%{"room_id" => room_id, "username" => username}, _session, socket) do
    if connected?(socket) do
      MembraneWebrtcAppWeb.Endpoint.subscribe("room:#{room_id}")
    end

    {:ok, assign(socket, room_id: room_id, username: username, muted: false, video_off: false, participants: [])}
  end

  def handle_info(%{event: "new_peer", payload: %{peer_id: peer_id, username: username}}, socket) do
    participants = [%{id: peer_id, username: username} | socket.assigns.participants]
    {:noreply, assign(socket, participants: participants)}
  end

  def handle_info(%{event: "peer_left", payload: %{peer_id: peer_id}}, socket) do
    participants = Enum.reject(socket.assigns.participants, fn p -> p.id == peer_id end)
    {:noreply, assign(socket, participants: participants)}
  end

  # ... other handle_event functions for mute, toggle_video, hang_up

end
```

Here, we subscribe to the `room:#{room_id}` topic to receive notifications when new peers join or leave the room. The `handle_info/2` functions manage the participants list accordingly.

Next, update the `RoomChannel` to broadcast these events. Open `lib/membrane_webrtc_app_web/channels/room_channel.ex`:

```elixir title="Elixir"
defmodule MembraneWebrtcAppWeb.RoomChannel do
  use MembraneWebrtcAppWeb, :channel

  def join("room:" <> room_id, %{"username" => username}, socket) do
    send(self(), {:after_join, %{room_id: room_id, username: username}})
    {:ok, assign(socket, room_id: room_id, username: username)}
  end

  def handle_info({:after_join, %{room_id: room_id, username: username}}, socket) do
    broadcast!(socket, "new_peer", %{peer_id: socket.id, username: username})
    {:noreply, socket}
  end

  def handle_in("peer_left", %{"peer_id" => peer_id}, socket) do
    broadcast!(socket, "peer_left", %{peer_id: peer_id})
    {:reply, :ok, socket}
  end

  # ... other handle_in functions

end
```

This code broadcasts a `new_peer` event when a user joins and a `peer_left` event when they leave. The `RoomLive` module listens for these events and updates the participants list accordingly.

Finally, update the `room_live.html.leex` template to display the participants' video streams. Open `lib/membrane_webrtc_app_web/templates/live/room_live.html.leex`:

```html title="HTML"
<div>
  <h1>Room: <%= @room_id %></h1>
  <div id="video-streams">
    <%= for participant <- @participants do %>
      <div class="participant">
        <video id="video-<%= participant.id %>" autoplay></video>
        <p><%= participant.username %></p>
      </div>
    <% end %>
  </div>
  <div id="controls">
    <button phx-click="mute"><%= if @muted, do: "Unmute", else: "Mute" %></button>
    <button phx-click="toggle_video"><%= if @video_off, do: "Video On", else: "Video Off" %></button>
    <button phx-click="hang_up">Hang Up</button>
  </div>
</div>
```

This template includes a `for` loop to iterate over the `@participants` list and display a video element for each participant.

### Managing Participant States

Managing the states of participants, such as handling active speakers or indicating who is muted, enhances the interaction quality in a WebRTC session. You can extend the `RoomLive` module to update and display these states.

Add state management in the `handle_event` functions for mute and toggle video:

```elixir title="Elixir"
def handle_event("mute", _params, socket) do
  muted = !socket.assigns.muted
  broadcast(socket, "mute", %{peer_id: socket.id, muted: muted})
  {:noreply, assign(socket, muted: muted)}
end

def handle_event("toggle_video", _params, socket) do
  video_off = !socket.assigns.video_off
  broadcast(socket, "toggle_video", %{peer_id: socket.id, video_off: video_off})
  {:noreply, assign(socket, video_off: video_off)}
end
```

Update the `RoomChannel` to handle these broadcasts:

```elixir title="Elixir"
def handle_in("mute", %{"peer_id" => peer_id, "muted" => muted}, socket) do
  broadcast!(socket, "mute", %{peer_id: peer_id, muted: muted})
  {:reply, :ok, socket}
end

def handle_in("toggle_video", %{"peer_id" => peer_id, "video_off" => video_off}, socket) do
  broadcast!(socket, "toggle_video", %{peer_id: peer_id, video_off: video_off})
  {:reply, :ok, socket}
end
```

And update the `RoomLive` module to manage these events:

```elixir title="Elixir"
def handle_info(%{event: "mute", payload: %{peer_id: peer_id, muted: muted}}, socket) do
  participants = Enum.map(socket.assigns.participants, fn
    p when p.id == peer_id -> %{p | muted: muted}
    p -> p
  end)
  {:noreply, assign(socket, participants: participants)}
end

def handle_info(%{event: "toggle_video", payload: %{peer_id: peer_id, video_off: video_off}}, socket) do
  participants = Enum.map(socket.assigns.participants, fn
    p when p.id == peer_id -> %{p | video_off: video_off}
    p -> p
  end)
  {:noreply, assign(socket, participants: participants)}
end
```

This ensures that the state of each participant is updated in real-time and displayed correctly.

## Step 6: Run Your Code Now

### Running the Application

Now that all the components of your Membrane WebRTC application are implemented, it's time to run your code and see everything in action. Follow these steps to start your application:

#### [a] Compile the Project
Ensure that all dependencies are compiled and up to date. Run the following command in your terminal:

```bash title="bash"
   mix deps.get
   mix compile
```

#### [b] Start the Phoenix Server
Start the Phoenix development server to run your application locally:

```bash title="bash"
   mix phx.server
```

Your application will be available at `http://localhost:4000`.

#### [c] Access the Application
Open a web browser and navigate to `http://localhost:4000`. You should see the join screen where you can enter a username and room ID.

#### [d] Join a Room
Enter a username and a room ID to join the room. Open the same URL in multiple browser tabs or different browsers to simulate multiple participants joining the room.

#### [e] Test the Controls
   - **Mute/Unmute:** Test the mute button to ensure it mutes and unmutes the audio correctly.
   - **Video On/Off:** Test the video toggle button to turn the video on and off.
   - **Hang Up:** Test the hang-up button to leave the room and close the connection.

#### [f] Check the Participant View
Ensure that all participants' video streams are displayed correctly in each browser tab. Verify that the state updates (mute, video off) are reflected in real-time across all participants.

### Testing and Debugging

Testing and debugging are crucial to ensure your application runs smoothly. Here are some tips to help you with this process:

#### [a] Console Logs
Use `IO.inspect/2` in Elixir and `console.log` in JavaScript to print useful information to the console. This can help you understand the flow of data and identify any issues.

#### [b] Phoenix Live Dashboard
Phoenix Live Dashboard provides real-time performance monitoring and debugging tools for your Phoenix application. Add it to your project by updating your `mix.exs`:

```elixir title="Elixir"
   defp deps do
     [
       {:phoenix_live_dashboard, "~> 0.6"}
     ]
   end
```

Fetch the new dependency:

```bash title="bash"
   mix deps.get
```

Add the dashboard route to your router:

```elixir title="Elixir"
   scope "/" do
     pipe_through :browser
     live_dashboard "/dashboard", metrics: MembraneWebrtcAppWeb.Telemetry
   end
```

Access the dashboard at `http://localhost:4000/dashboard` for real-time insights.

#### [c] WebRTC Internals
Modern browsers provide a `chrome://webrtc-internals` (in Chrome) page where you can inspect WebRTC connections. This tool is invaluable for debugging WebRTC-specific issues.

#### [d] Unit Tests
Write unit tests for your Elixir code using ExUnit. Create test files in the `test` directory and run your tests with:

```bash title="bash"
   mix test
```

#### [e] Network and Performance Testing:**
Simulate different network conditions to ensure your application performs well under various scenarios. Tools like [Network Link Conditioner](https://developer.apple.com/download/more/) (for macOS) can help.

#### [f] Error Handling
Ensure that your application gracefully handles errors. For instance, if a user loses connection, display a helpful message and try to reconnect.

By following these steps and tips, you can run, test, and debug your Membrane WebRTC application effectively, ensuring a robust and user-friendly experience.

## Conclusion

In this article, we have explored how to build a WebRTC application using the Membrane framework. We started with an introduction to Membrane WebRTC, highlighting its key features and advantages. We then walked through setting up the environment, creating a new Membrane WebRTC application, and configuring the necessary components. Following this, we designed and implemented the join screen, added essential control features, and managed participant views. Finally, we ran the application, tested it, and provided tips for debugging.

Membrane WebRTC, with its modular architecture and robust performance, offers a powerful solution for real-time communication applications. By following the steps outlined in this guide, you can create a scalable and efficient WebRTC application tailored to your specific needs.

Learn how to build high-performance real-time communication applications using Membrane WebRTC with Elixir and C++.

How to Build Kamailio WebRTC App?

How to Build GO2RTC WebRTC App?

How to Build Membrane WebRTC App with Elixir?

Membrane WebRTC

## Step 5: Implementing Participant View

The participant view is a crucial feature in any WebRTC application, allowing users to see and manage other participants in a call. This involves displaying participant information, handling real-time updates, and managing media streams effectively. This section guides you through implementing the participant view in your Kamailio WebRTC application.

### Displaying Participants

To display participants, you need to fetch participant information and render it in the user interface. Here’s how to implement this functionality using JavaScript:

#### [a] HTML Structure for Participant View

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Participant View</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="participant-view">
        <h1>Participants</h1>
        <div id="participants"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>
```

#### [b] CSS for Participant View

```css title="CSS"
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
}

.participant-view {
    width: 80%;
    max-width: 1200px;
    margin: 20px auto;
}

.participant-view h1 {
    text-align: center;
    margin-bottom: 20px;
}

#participants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.participant {
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.participant video {
    width: 100%;
    border-radius: 8px;
}
```

#### [c] JavaScript for Fetching and Displaying Participants

```javascript title="JavaScript"
let localStream;
let peerConnections = {};
const participantsContainer = document.getElementById('participants');

// Function to add a participant
function addParticipant(stream, participantId) {
    const participantElement = document.createElement('div');
    participantElement.className = 'participant';
    participantElement.id = participantId;

    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.autoplay = true;

    participantElement.appendChild(videoElement);
    participantsContainer.appendChild(participantElement);
}

// Function to remove a participant
function removeParticipant(participantId) {
    const participantElement = document.getElementById(participantId);
    if (participantElement) {
        participantElement.remove();
    }
}

// Setting up local stream
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        localStream = stream;
        addParticipant(stream, 'local');
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

// Example function to handle new participant connection
function handleNewParticipant(participantId) {
    const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
    const peerConnection = new RTCPeerConnection(configuration);

    peerConnection.addStream(localStream);

    peerConnection.onaddstream = event => {
        addParticipant(event.stream, participantId);
    };

    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            // Send the candidate to the remote peer
            sendMessage({
                type: 'candidate',
                candidate: event.candidate,
                participantId
            });
        }
    };

    peerConnections[participantId] = peerConnection;

    // Create an offer and send it to the new participant
    peerConnection.createOffer()
        .then(offer => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            sendMessage({
                type: 'offer',
                offer: peerConnection.localDescription,
                participantId
            });
        })
        .catch(error => {
            console.error('Error creating offer.', error);
        });
}

// Example function to handle incoming messages
function handleMessage(message) {
    const { type, participantId, offer, answer, candidate } = message;

    const peerConnection = peerConnections[participantId];

    switch (type) {
        case 'offer':
            peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
                .then(() => {
                    return peerConnection.createAnswer();
                })
                .then(answer => {
                    return peerConnection.setLocalDescription(answer);
                })
                .then(() => {
                    sendMessage({
                        type: 'answer',
                        answer: peerConnection.localDescription,
                        participantId
                    });
                })
                .catch(error => {
                    console.error('Error handling offer.', error);
                });
            break;

        case 'answer':
            peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
                .catch(error => {
                    console.error('Error setting remote description.', error);
                });
            break;

        case 'candidate':
            peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
                .catch(error => {
                    console.error('Error adding received ice candidate.', error);
                });
            break;

        default:
            break;
    }
}

// Function to send messages (to be implemented according to your signaling server)
function sendMessage(message) {
    // Implement your signaling server communication here
}
```

### Managing Participant States

Managing participant states involves handling their active or inactive status, muting/unmuting their audio, and starting/stopping their video streams.

#### Handling Participant States

```javascript title="JavaScript"
function toggleParticipantMute(participantId) {
    const participantElement = document.getElementById(participantId);
    if (participantElement) {
        const videoElement = participantElement.querySelector('video');
        const audioTracks = videoElement.srcObject.getAudioTracks();
        audioTracks.forEach(track => {
            track.enabled = !track.enabled;
        });
    }
}

function toggleParticipantVideo(participantId) {
    const participantElement = document.getElementById(participantId);
    if (participantElement) {
        const videoElement = participantElement.querySelector('video');
        const videoTracks = videoElement.srcObject.getVideoTracks();
        videoTracks.forEach(track => {
            track.enabled = !track.enabled;
        });
    }
}
```

### Real-Time Updates using WebRTC

Handling real-time updates involves managing participant connections and disconnections. Ensure your signaling server is set up to broadcast these events to all participants.

#### Signaling Server Communication (Node.js)

```javascript title="JavaScript"
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

let participants = {};

wss.on('connection', ws => {
    const participantId = generateUniqueId();
    participants[participantId] = ws;

    ws.on('message', message => {
        const parsedMessage = JSON.parse(message);
        handleSignalingMessage(participantId, parsedMessage);
    });

    ws.on('close', () => {
        delete participants[participantId];
        broadcastMessage({ type: 'participantDisconnected', participantId });
    });

    broadcastMessage({ type: 'participantConnected', participantId });
});

function handleSignalingMessage(participantId, message) {
    const { type, targetParticipantId } = message;

    if (type === 'offer' || type === 'answer' || type === 'candidate') {
        const targetWs = participants[targetParticipantId];
        if (targetWs) {
            targetWs.send(JSON.stringify({ ...message, participantId }));
        }
    }
}

function broadcastMessage(message) {
    Object.values(participants).forEach(ws => {
        ws.send(JSON.stringify(message));
    });
}

function generateUniqueId() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
```

Implementing the participant view in your Kamailio WebRTC application enhances the user experience by allowing users to see and manage other participants in real-time. By fetching participant information, handling real-time updates, and managing media streams, you create a dynamic and interactive communication environment. This step ensures that users can effectively engage in WebRTC sessions, making your application more robust and user-friendly.

## Step 6: Run Your Code Now

Now that you have set up your Kamailio WebRTC application with the necessary configurations, user interfaces, and controls, it's time to run and test your application. This step involves compiling your code, starting the necessary services, and performing tests to ensure everything works as expected.

### Compiling and Running the Application

To run your Kamailio WebRTC application, follow these steps:

#### Start Kamailio SIP Server
Ensure your `kamailio.cfg` file is correctly configured.

Start the Kamailio server using the following command:

```sh title="sh"
     sudo kamailio -f /usr/local/etc/kamailio/kamailio.cfg -DD -E
```

The `-DD` flag runs Kamailio in debug mode, and the `-E` flag logs all messages to the console, which is useful for debugging.

#### Start the RTPengine (if used for media handling):
Make sure RTPengine is installed and configured correctly.

Start the RTPengine service:

```sh title="sh"
     sudo systemctl start rtpengine
```

#### Start the Signaling Server
If you have a custom signaling server (like the WebSocket server example provided earlier), start it:

```sh title="sh"
     node signalingServer.js
```

#### Serve the Web Application**:
Ensure your web application files (HTML, CSS, JavaScript) are served by a web server.

You can use a simple HTTP server like `http-server` for testing:

```sh title="sh"
     npx http-server ./path-to-your-webapp
```

Open your browser and navigate to the local server URL (e.g., `http://localhost:8080`) to access the join screen and participant view.

### Testing and Debugging
Testing your application is crucial to ensure that all components work together seamlessly. Here are some tips for testing and debugging your Kamailio WebRTC application:

#### Test User Registration and Login
   - Open the join screen and attempt to log in with different user credentials.
   - Ensure that the authentication backend and Kamailio handle the registration process correctly.

#### Test Call Setup and Controls 
   - After logging in, initiate a call and test the basic controls (mute, hold, transfer).
   - Verify that the call setup, signaling, and media streams function as expected.

#### Test Participant View 
   - Join the call with multiple participants and check that all participant views are displayed correctly.
   - Ensure that participant states (active, inactive) are updated in real-time.

#### Monitor Logs for Errors 
   - Keep an eye on the Kamailio console logs for any errors or warnings.
   - Check the browser console for any JavaScript errors.

#### Debugging Common Issues
   - **Connection Issues**: Ensure that WebSocket and WSS configurations are correct and that there are no firewall or network issues blocking connections.
   - **Media Issues**: Verify that media streams are correctly negotiated and handled by RTPengine (if used). Check for any errors in the media server logs.
   - **Signaling Issues**: Ensure that your signaling server correctly handles and relays messages between participants.

By following these steps, you can compile and run your Kamailio WebRTC application, ensuring all components are correctly configured and working together. Thorough testing and debugging help identify and resolve any issues, providing a robust and reliable real-time communication solution. Now you are ready to deploy your application and provide users with a seamless WebRTC experience.

## Conclusion

Integrating Kamailio with WebRTC creates a powerful, scalable, and flexible communication solution that can handle high call volumes and real-time media streams. Throughout this guide, we covered the essential steps to set up Kamailio for WebRTC, including creating the necessary configuration files, wireframing components, implementing the join screen, adding call controls, and managing participant views. By following these steps, you can build a robust WebRTC application that leverages the strengths of Kamailio to provide seamless and efficient communication.

Learn how to integrate Kamailio with WebRTC for real-time communication. This guide covers setup, configuration, and step-by-step implementation for a robust WebRTC application.

How to Build Membrane WebRTC App?

How to Build Asterisk WebRTC App?

How to Build Kamailio WebRTC App with C?

Kamailio WebRTC

## Step 5: Implementing Participant View

In this section, we will implement a participant view for your GO2RTC streaming application. The participant view allows displaying multiple participants' streams, making it ideal for scenarios like video conferencing or multi-camera setups.

### Implement Participant View

**Enhancing the User Interface for Multiple Participants**

#### [a] HTML for Participant View
Modify your `index.html` file to accommodate multiple participant streams.

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>GO2RTC Streaming App</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <header>
               <h1>GO2RTC Streaming App</h1>
           </header>
           <div id="join-screen">
               <h2>Join Stream</h2>
               <form id="join-form">
                   <label for="username">Username:</label>
                   <input type="text" id="username" name="username" required>
                   <label for="stream-key">Stream Key:</label>
                   <input type="text" id="stream-key" name="stream-key" required>
                   <button type="submit">Join</button>
               </form>
           </div>
           <main id="stream-screen" style="display: none;">
               <div class="participant" id="participant1">
                   <h2>Participant 1</h2>
                   <video id="video1" controls autoplay></video>
                   <div class="controls">
                       <button id="play1">Play</button>
                       <button id="pause1">Pause</button>
                       <button id="stop1">Stop</button>
                   </div>
               </div>
               <div class="participant" id="participant2">
                   <h2>Participant 2</h2>
                   <video id="video2" controls autoplay></video>
                   <div class="controls">
                       <button id="play2">Play</button>
                       <button id="pause2">Pause</button>
                       <button id="stop2">Stop</button>
                   </div>
               </div>
               <div class="participant" id="participant3">
                   <h2>Participant 3</h2>
                   <video id="video3" controls autoplay></video>
                   <div class="controls">
                       <button id="play3">Play</button>
                       <button id="pause3">Pause</button>
                       <button id="stop3">Stop</button>
                   </div>
               </div>
               <div class="participant" id="participant4">
                   <h2>Participant 4</h2>
                   <video id="video4" controls autoplay></video>
                   <div class="controls">
                       <button id="play4">Play</button>
                       <button id="pause4">Pause</button>
                       <button id="stop4">Stop</button>
                   </div>
               </div>
           </main>
           <footer>
               <p>&copy; 2024 GO2RTC Streaming App</p>
           </footer>
       </div>
       <script src="scripts.js"></script>
   </body>
   </html>
```

#### [b] CSS for Participant View
Update your `styles.css` file to style the participant streams.

```css title="CSS"
   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
       background-color: #f4f4f4;
   }

   .container {
       width: 80%;
       margin: 0 auto;
       padding: 20px;
       background-color: #fff;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   header {
       text-align: center;
       margin-bottom: 20px;
   }

   #join-screen {
       text-align: center;
   }

   form {
       display: inline-block;
       text-align: left;
       margin-top: 20px;
   }

   label {
       display: block;
       margin-bottom: 8px;
   }

   input {
       width: 100%;
       padding: 8px;
       margin-bottom: 10px;
       border: 1px solid #ccc;
       border-radius: 4px;
   }

   button {
       padding: 10px 20px;
       background-color: #4CAF50;
       color: #fff;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       margin-right: 5px;
   }

   button:hover {
       background-color: #45a049;
   }

   main {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .participant {
       width: 48%;
       background-color: #ececec;
       padding: 10px;
       margin-bottom: 20px;
       border-radius: 5px;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }

   video {
       width: 100%;
       height: auto;
       border-radius: 5px;
   }

   .controls {
       text-align: center;
       margin-top: 10px;
   }

   footer {
       text-align: center;
       margin-top: 20px;
       padding-top: 10px;
       border-top: 1px solid #ddd;
   }
```

**Implementing JavaScript Functions for Multiple Participants**

#### [c] JavaScript for Participant Streams
Update your `scripts.js` file to handle the video streams and control functionalities for multiple participants.

```javascript title="JavaScript"
   document.addEventListener("DOMContentLoaded", function() {
       const joinForm = document.getElementById('join-form');
       const joinScreen = document.getElementById('join-screen');
       const streamScreen = document.getElementById('stream-screen');

       // Participant video elements
       const videos = [
           document.getElementById('video1'),
           document.getElementById('video2'),
           document.getElementById('video3'),
           document.getElementById('video4')
       ];

       // Control buttons
       const controls = [
           { play: document.getElementById('play1'), pause: document.getElementById('pause1'), stop: document.getElementById('stop1') },
           { play: document.getElementById('play2'), pause: document.getElementById('pause2'), stop: document.getElementById('stop2') },
           { play: document.getElementById('play3'), pause: document.getElementById('pause3'), stop: document.getElementById('stop3') },
           { play: document.getElementById('play4'), pause: document.getElementById('pause4'), stop: document.getElementById('stop4') }
       ];

       joinForm.addEventListener('submit', function(event) {
           event.preventDefault();

           // Retrieve form values
           const username = document.getElementById('username').value;
           const streamKey = document.getElementById('stream-key').value;

           // Validate credentials (for simplicity, we just check if not empty)
           if (username && streamKey) {
               // Hide join screen and show stream screen
               joinScreen.style.display = 'none';
               streamScreen.style.display = 'flex';

               // Initialize video streams
               initVideoStream(videos[0], 'rtsp://your_camera_ip_address1');
               initVideoStream(videos[1], 'rtsp://your_camera_ip_address2');
               initVideoStream(videos[2], 'rtsp://your_camera_ip_address3');
               initVideoStream(videos[3], 'rtsp://your_camera_ip_address4');
           } else {
               alert('Please enter valid credentials.');
           }
       });

       // Function to initialize video streams
       function initVideoStream(videoElement, streamUrl) {
           videoElement.src = streamUrl;
           videoElement.play().catch(error => {
               console.error('Error playing video:', error);
           });
       }

       // Add event listeners for controls
       controls.forEach((control, index) => {
           control.play.addEventListener('click', function() {
               videos[index].play().catch(error => {
                   console.error('Error playing video:', error);
               });
           });

           control.pause.addEventListener('click', function() {
               videos[index].pause();
           });

           control.stop.addEventListener('click', function() {
               videos[index].pause();
               videos[index].currentTime = 0;
           });
       });
   });
```

With these steps, you have successfully implemented a participant view that allows displaying multiple streams simultaneously. The HTML structure includes multiple participant sections, the CSS styles these sections, and the JavaScript manages the video streams and their controls.

The participant view enhances the application's functionality by supporting multiple streams, making it suitable for video conferencing and other multi-camera scenarios.

In the next section, we will focus on running your code to ensure everything works as expected and troubleshooting any common issues that may arise.

## Step 6: Running Your Code

In this section, we will focus on running your GO2RTC application to ensure everything works as expected. We will also cover troubleshooting common issues that may arise during the process.

### Running Your Code

#### [a] Ensure Dependencies are Installed
Before running your application, make sure all the necessary dependencies are installed. If you haven't already, navigate to your project directory and install the required Go packages:

```sh title="sh"
    go mod tidy
```

#### [b] Run the GO2RTC Application
Use the following command to run your application:

```sh title="sh"
    go run main.go
```
This command will start your GO2RTC application, initializing the streams and setting up the web server to serve your HTML interface.

#### [c] Access the Application in a Browser
- Open your web browser and navigate to `http://localhost:8080` (or the port specified in your GO2RTC configuration).
- You should see the join screen where you can enter your username and stream key.

#### [d] Join the Stream
Enter a valid username and stream key, then click the "Join" button. If the credentials are valid, the join screen will be replaced by the participant view, displaying the video streams.

### Troubleshooting Common Issues

**Common Issues and Solutions**

#### Video Stream Not Playing
- **Check Stream URLs**: Ensure the RTSP/RTMP/HTTP-FLV/WebRTC URLs in your `config.yaml` file are correct and accessible.
- **Console Errors**: Open the browser console (F12) to check for any errors. Common issues include incorrect stream URLs, network problems, or CORS issues.
- **Firewall and Network Settings**: Make sure there are no firewall or network settings blocking the streams.

#### Credentials Validation Failure
- **Input Fields**: Ensure the username and stream key fields are not empty.
- **Form Handling**: Verify that the form submission is correctly handled in your `scripts.js` file.
- **Configuration**: Check if the validation logic (if any) for the credentials is correctly implemented.

#### Application Crashes or Errors
- **Go Code**: Check the logs in your terminal for any errors in the Go code. Common issues might include configuration file errors or missing dependencies.
- **Debugging**: Use Go’s debugging tools to step through the code and identify issues.

#### Stream Control Issues
- **Button Functionality**: Ensure the play, pause, and stop buttons are correctly wired to their respective video elements.
- **JavaScript Errors**: Check for any JavaScript errors in the browser console that might prevent the controls from working.

#### Example Debugging Session
Here’s an example of how you might debug an issue where the video stream is not playing:

1. **Open the Browser Console**:
Press `F12` to open the developer tools and navigate to the "Console" tab.

2. **Check for Errors**:
Look for any error messages related to the video elements or the stream URLs.

3. **Verify Stream URL**:
Copy the stream URL from your `config.yaml` and try to access it directly in a media player like VLC to verify it’s working.

4. **Network Tab**:
Use the "Network" tab in the developer tools to check if the video streams are being requested correctly and if there are any network-related issues.

5. **Adjust Configuration**:
If the issue is related to the configuration, make the necessary changes in your `config.yaml` file and restart the application.

By following these steps, you should be able to successfully run your GO2RTC application and troubleshoot any issues that arise.

## Conclusion
In this article, we have covered the setup and implementation of a GO2RTC streaming application using WebRTC technology. We started with the basic environment setup, moved on to creating a user interface, implemented a join screen, added controls for video streams, and finally, implemented a participant view.

Learn how to set up and use GO2RTC with WebRTC for real-time streaming and communication. This guide covers installation, configuration, user interface design, and more.

How to Build GO2RTC WebRTC App with Go?

GO2RTC WebRTC

## Step 5: Implement Participant View

In this step, we will implement the participant view to display video streams of all connected participants. This includes handling the addition and removal of video elements dynamically as participants join and leave the conference.

### Displaying Participants

#### [a] Setting Up Peer Connections

To manage multiple participants, we will use RTCPeerConnection objects to handle the media streams. Each participant will have their own RTCPeerConnection.

**JavaScript - `app.js`**

```javascript title="JavaScript"
let localStream;
let peerConnections = {}; // To store peer connections
const signalingServerUrl = 'wss://your-signaling-server-url';
let signalingSocket;

document.getElementById('joinButton').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    if (username) {
        joinConference(username);
    } else {
        alert('Please enter a username');
    }
});

document.getElementById('muteButton').addEventListener('click', function() {
    toggleMute(true);
});

document.getElementById('unmuteButton').addEventListener('click', function() {
    toggleMute(false);
});

document.getElementById('hangUpButton').addEventListener('click', function() {
    hangUpCall();
});

async function joinConference(username) {
    document.getElementById('joinScreen').style.display = 'none';
    document.getElementById('controlsPanel').style.display = 'block';
    document.getElementById('participantView').style.display = 'block';

    try {
        await initializeWebRTC(username);
    } catch (error) {
        console.error('Error joining conference:', error);
    }
}

async function initializeWebRTC(username) {
    console.log(`Joining conference as ${username}`);

    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    const localVideo = document.createElement('video');
    localVideo.srcObject = localStream;
    localVideo.autoplay = true;
    localVideo.muted = true;
    document.getElementById('participantView').appendChild(localVideo);

    signalingSocket = new WebSocket(signalingServerUrl);

    signalingSocket.onopen = () => {
        console.log('Connected to the signaling server');
        signalingSocket.send(JSON.stringify({ type: 'join', username }));
    };

    signalingSocket.onmessage = async (message) => {
        const data = JSON.parse(message.data);
        console.log('Received message:', data);

        switch (data.type) {
            case 'offer':
                handleOffer(data.offer, data.sender);
                break;
            case 'answer':
                handleAnswer(data.answer, data.sender);
                break;
            case 'candidate':
                handleCandidate(data.candidate, data.sender);
                break;
            case 'leave':
                handleLeave(data.sender);
                break;
        }
    };

    signalingSocket.onerror = (error) => {
        console.error('Signaling server error:', error);
    };

    signalingSocket.onclose = () => {
        console.log('Disconnected from the signaling server');
    };
}

async function handleOffer(offer, sender) {
    const peerConnection = createPeerConnection(sender);
    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    signalingSocket.send(JSON.stringify({ type: 'answer', answer, recipient: sender }));
}

async function handleAnswer(answer, sender) {
    const peerConnection = peerConnections[sender];
    await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function handleCandidate(candidate, sender) {
    const peerConnection = peerConnections[sender];
    peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

function handleLeave(sender) {
    const videoElement = document.getElementById(sender);
    if (videoElement) {
        videoElement.remove();
    }
    const peerConnection = peerConnections[sender];
    if (peerConnection) {
        peerConnection.close();
        delete peerConnections[sender];
    }
}

function createPeerConnection(participantId) {
    const peerConnection = new RTCPeerConnection();
    peerConnections[participantId] = peerConnection;

    peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
            signalingSocket.send(JSON.stringify({
                type: 'candidate',
                candidate: event.candidate,
                recipient: participantId
            }));
        }
    };

    peerConnection.ontrack = (event) => {
        const remoteVideo = document.createElement('video');
        remoteVideo.id = participantId;
        remoteVideo.srcObject = event.streams[0];
        remoteVideo.autoplay = true;
        document.getElementById('participantView').appendChild(remoteVideo);
    };

    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    return peerConnection;
}

function toggleMute(mute) {
    localStream.getAudioTracks().forEach(track => {
        track.enabled = !mute;
    });
    console.log(`Audio ${mute ? 'muted' : 'unmuted'}`);
}

function hangUpCall() {
    for (let participantId in peerConnections) {
        peerConnections[participantId].close();
        delete peerConnections[participantId];
        document.getElementById(participantId).remove();
    }
    if (signalingSocket) {
        signalingSocket.close();
        signalingSocket = null;
    }
    document.getElementById('controlsPanel').style.display = 'none';
    document.getElementById('participantView').innerHTML = '';
    document.getElementById('joinScreen').style.display = 'block';
    console.log('Call ended');
}
```

#### [b] Handling Remote Streams
**ontrack Event**: The `ontrack` event handler adds a video element for each remote stream. When a remote stream is received, a new video element is created and added to the participant view.

#### [c] Handling ICE Candidates
**onicecandidate Event**: This event handler sends ICE candidates to the signaling server. These candidates are necessary for establishing a peer-to-peer connection.

#### [d] Handling Signaling Messages

- **Offer**: When an offer is received, the client sets the remote description and creates an answer.
- **Answer**: When an answer is received, the client sets the remote description.
- **Candidate**: When a candidate is received, it is added to the peer connection.
- **Leave**: When a participant leaves, their video element and peer connection are removed.

By implementing these functionalities, you enable your WebRTC application to handle multiple participants dynamically, ensuring that all video streams are displayed correctly in the participant view. The next section will cover running your code and testing the complete setup to ensure everything works as expected.

## Step 6: Run Your Code Now

In this final step, we'll focus on running your complete WebRTC application and ensuring everything is working as expected. This includes testing the signaling server, WebRTC connections, and user interface.

### Testing the Application

#### [a] Start the Signaling Server**
Ensure your signaling server is running. If you're using the Node.js signaling server example provided earlier, start it by running the following command in your terminal:

```sh title="sh"
node signaling-server.js
```

This should output a message indicating that the signaling server is running and listening for connections.

#### [b] Open the Application in Your Browser
Open your web browser and navigate to the URL where your `index.html` file is hosted. If you're running a local server, the URL might look something like `http://localhost:8080`.

#### [c] Join the Conference
- Enter a username in the input field and click the "Join" button.
- Allow the browser to access your camera and microphone when prompted.

#### [d] Verify Video and Audio
- Ensure that your local video stream is displayed in the participant view.
- Use another device or open another browser window/tab to join the conference with a different username and repeat the steps.

#### [e] Test the Controls
- **Mute/Unmute**: Click the "Mute" and "Unmute" buttons to toggle your audio stream. Verify that the audio track is enabled/disabled accordingly.
- **Hang Up**: Click the "Hang Up" button to end the call. Ensure that the WebRTC connection is closed and the UI returns to the join screen.

#### [f] Debugging Common Issues
- **No Video/Audio**: Ensure that your browser has permission to access the camera and microphone. Check the console for any errors related to media devices.
- **Connection Issues**: Verify that your signaling server is running and accessible. Check for any WebSocket connection errors in the console.
- **ICE Candidate Errors**: Ensure that your network allows peer-to-peer connections. Check for any ICE candidate errors and ensure that candidates are being exchanged properly.

## Conclusion
By following this guide, you have successfully created a WebRTC application integrated with Asterisk, complete with functionalities to join a conference, manage user controls, and display participant video streams dynamically. This setup provides a solid foundation for building more advanced communication features.

Learn how to integrate Asterisk with WebRTC for real-time audio, video, and data communication directly through web browsers. Follow this step-by-step guide to set up, configure, and test your Asterisk WebRTC application.

How to Build Asterisk WebRTC App with C?

Asterisk WebRTC

## Step 5: Implement Participant View

### UI for Participant View

The participant view is the main interface where users can see the video streams of all participants. This involves setting up a video grid that dynamically adjusts based on the number of participants. 

### Streaming Setup

First, ensure your `room.html` file has a designated area for the video grid. The `#video-grid` element will contain all the video elements for the participants:

```html title="HTML"
<div id="video-grid"></div>
```

Update the `styles.css` file to style the video grid:

```css title="CSS"
#video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}

#video-grid video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: black;
}
```

### Managing Multiple Participants

Next, add JavaScript to manage video streams for multiple participants. Update the `scripts.js` file to handle adding new video elements to the video grid:

```javascript title="JavaScript"
const videoGrid = document.getElementById('video-grid');
let localStream;
let peerConnections = {};

async function init() {
    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    addVideoStream(localStream, 'local');

    socket.on('user-connected', userId => {
        connectToNewUser(userId, localStream);
    });

    socket.on('user-disconnected', userId => {
        if (peerConnections[userId]) peerConnections[userId].close();
        document.getElementById(userId).remove();
    });
}

function addVideoStream(stream, id) {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.id = id;
    video.addEventListener('loadedmetadata', () => {
        video.play();
    });
    videoGrid.append(video);
}

function connectToNewUser(userId, stream) {
    const call = peer.call(userId, stream);
    const video = document.createElement('video');
    call.on('stream', userVideoStream => {
        addVideoStream(userVideoStream, userId);
    });
    call.on('close', () => {
        video.remove();
    });
    peerConnections[userId] = call;
}

init();
```

This script initializes the local video stream, handles the addition of new participants, and removes participants who disconnect. The `addVideoStream` function creates a video element for each participant and adds it to the video grid.

### Handling Video Streams

The `connectToNewUser` function sets up a connection to new users using WebRTC's peer-to-peer connection. When a new user connects, their video stream is added to the video grid, and their disconnection removes the video element.

By implementing the participant view, you create a dynamic and responsive interface where users can see and interact with all participants in the MiroTalk SFU WebRTC application. This setup ensures a smooth and engaging video conferencing experience.

## Step 6: Run Your Code Now

### Testing the Application

With all the components in place, it's time to test your MiroTalk SFU WebRTC application. Ensure your development environment is set up correctly and all necessary dependencies are installed. Start the server using the following command:

```bash title="bash"
npm start
```

Open your browser and navigate to `http://localhost:3000`. Enter a username on the join screen and click "Join" to enter the meeting room. Open another browser window or tab and repeat the process to simulate multiple participants joining the meeting.

### Debugging Common Issues

If you encounter any issues, here are a few common troubleshooting steps:

1. **Check Console for Errors**: Open the browser's developer console to check for any JavaScript errors or warnings.
2. **Verify Configuration**: Ensure your `.env` file is correctly set up with the proper IP addresses and ports.
3. **Network Permissions**: Make sure your browser has permissions to access the camera and microphone.

### Optimization Tips

To enhance performance and scalability, consider the following optimization tips:

1. **Media Constraints**: Adjust media constraints for video and audio to balance quality and bandwidth usage.
2. **Load Balancing**: Implement load balancing techniques to distribute the load across multiple servers.
3. **Scalability**: Use scalable infrastructure solutions like Kubernetes or Docker to manage and deploy your application efficiently.

### Example Configuration for Media Constraints

You can adjust the media constraints in your `scripts.js` file to improve performance:

```javascript title="JavaScript"
const constraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 }
    },
    audio: true
};

navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        // Your code to handle the stream
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
```

By following these steps, you can run your MiroTalk SFU WebRTC application smoothly and efficiently. Testing the application thoroughly and applying optimization techniques will ensure a robust and scalable video conferencing solution.

## Conclusion

In this guide, we've walked through the process of setting up and implementing a MiroTalk SFU WebRTC application using C++/Node.js and MediaSoup. From initial configuration and environment setup to designing the user interface and managing real-time video streams, each step has been carefully outlined to help you build a robust and scalable video conferencing solution. By following these steps, you can create an efficient SFU-based WebRTC application that meets modern communication needs.

Learn how to build a MiroTalk SFU WebRTC app using JavaScript. Step-by-step guide for creating scalable, real-time video communication with MiroTalk and WebRTC.

## What is MiroTalk SFU WebRTC?

MiroTalk SFU WebRTC is an advanced video conferencing solution designed to handle real-time communication efficiently. Leveraging the Selective Forwarding Unit (SFU) architecture, it optimizes media streaming by selectively forwarding media streams to participants, rather than mixing them, which significantly reduces latency and resource consumption.

### Importance and Benefits of SFU in WebRTC

The SFU model stands out in WebRTC for its scalability and performance. Unlike the Multipoint Control Unit (MCU), which mixes all video streams into one, the SFU selectively forwards multiple streams, allowing for more efficient bandwidth usage and lower latency. This makes MiroTalk SFU ideal for large-scale video conferencing applications where performance and scalability are critical.

### Underlying Technologies

MiroTalk SFU is built on robust technologies like C++ and Node.js, with MediaSoup as its core. MediaSoup is a powerful library for building multiparty video conferencing applications, providing the backbone for handling media streams efficiently. The combination of these technologies ensures that MiroTalk SFU delivers high performance and reliability for real-time communication needs.

## Getting Started to Build MiroTalk SFU WebRTC Application

### Create a New MiroTalk SFU App

To get started with MiroTalk SFU WebRTC, the first step is to set up a new project. Clone the MiroTalk SFU repository from GitHub and navigate to the project directory:

```bash title="bash"
git clone https://github.com/miroslavpejic85/mirotalksfu
cd mirotalksfu
```

### Install Dependencies

MiroTalk SFU relies on several dependencies that need to be installed. Run the following command to install the necessary packages:

```bash title="bash"
npm install
```

This command will install all required Node.js packages and dependencies listed in the `package.json` file.

### Structure of the Project

Understanding the project structure is crucial for effective development. The main directories and files in the MiroTalk SFU project include:

- `src/`: Contains the source code for the application.
- `config/`: Configuration files for the server and MediaSoup.
- `public/`: Static files served by the application, including HTML, CSS, and JavaScript.
- `scripts/`: Scripts for managing the project, such as startup and build scripts.

### App Architecture
![mirotalk-sfu-webrtc](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Miro_Talk_SFU_work_e6f3067b12.png)
MiroTalk SFU's architecture is designed to handle real-time communication efficiently. The main components include:

- **Server**: Built using Node.js, the server handles client connections, signaling, and MediaSoup integration.
- **MediaSoup**: Acts as the core media server, managing media streams between participants.
- **Frontend**: The user interface, built with HTML, CSS, and JavaScript, interacts with the backend to facilitate video conferencing.

By understanding and setting up the project structure and architecture, you are now ready to dive into the development and customization of your MiroTalk SFU WebRTC application.

## Step 1: Get Started with Initial Setup

### Configuration Files
The first step in setting up MiroTalk SFU is to configure the necessary files. This involves setting up environment variables and MediaSoup configurations to ensure the application runs smoothly. Create a `.env` file in the root directory and add the following basic configuration:

```bash title="bash"
# .env file
NODE_ENV=development
LISTEN_PORT=3000
MEDIASOUP_LISTEN_IP=0.0.0.0
MEDIASOUP_ANNOUNCED_IP=<YOUR_PUBLIC_IP>
```

Replace `<YOUR_PUBLIC_IP>` with the actual public IP address of your server. This configuration ensures that MediaSoup can correctly announce its IP address to participants.

### Environment Setup
Ensure your development environment is properly set up. You will need Node.js and npm (Node Package Manager) installed. Verify the installations with:

```bash title="bash"
node -v
npm -v
```

These commands should return the versions of Node.js and npm installed on your machine. If not, download and install them from the [official Node.js website](https://nodejs.org/).

### Basic Server Setup
With your environment ready, you can now set up the basic server. Create a file named `server.js` in the root directory and add the following code:

```javascript title="JavaScript"
const express = require('express');
const { Server } = require('socket.io');
const http = require('http');
const mediasoup = require('mediasoup');
const app = express();
const server = http.createServer(app);
const io = new Server(server);

// Basic server setup
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

server.listen(process.env.LISTEN_PORT, () => {
  console.log(`Server is running on port ${process.env.LISTEN_PORT}`);
});
```

This basic setup initializes an Express server and sets up Socket.IO for real-time communication. The server listens on the port specified in the `.env` file.

### Running the Basic Server

To ensure everything is set up correctly, run the server with the following command:

```bash title="bash"
npm start
```

You should see a message indicating that the server is running. Open a browser and navigate to `http://localhost:3000` (or the configured port) to see the initial setup in action.

By completing this initial setup, you are now ready to proceed with building the core functionalities of your MiroTalk SFU WebRTC application.

## Step 2: Wireframe All the Components 

### Component Breakdown

Before diving into the implementation, it's essential to break down the main components of the MiroTalk SFU WebRTC application. This will help in structuring the development process and ensuring that each part of the application is well-defined and manageable. The key components include:

- **Join Screen**: The initial screen where users enter their names and join the meeting.
- **Control Panel**: Interface elements for managing media controls like mute, unmute, video on/off, and screen sharing.
- **Participant View**: The main screen displaying video streams of all participants.
- **Chat Interface**: Optional component for text-based communication among participants.

### Designing the Wireframe

Creating a visual wireframe is a crucial step in designing the user interface. This wireframe will serve as a blueprint for the layout and structure of the application. Here is a simple wireframe outline for MiroTalk SFU:

#### Join Screen
   - Input field for username
   - Join button

#### Control Panel
   - Mute/Unmute button
   - Video on/off button
   - Screen share button
   - Leave meeting button

#### Participant View
   - Video grid displaying all participants
   - Dynamic layout adjusting based on the number of participants

#### Chat Interface (Optional)
   - Text input field
   - Send button
   - Chat history display

### Tools for Wireframing

Using wireframing tools can simplify the design process. Tools like Figma, Sketch, or Adobe XD allow you to create interactive and detailed wireframes. For this guide, a basic wireframe can be sketched out on paper or using simple software like Microsoft PowerPoint or Google Slides.

### Implementation Plan

With the wireframe in place, the next steps involve translating these designs into actual components using HTML, CSS, and JavaScript. The wireframe will guide the development process, ensuring a consistent and user-friendly interface. The focus should be on creating a responsive design that works seamlessly across different devices and screen sizes.

By defining and wireframing all the components, you have a clear roadmap for the development of your MiroTalk SFU WebRTC application. This structure will ensure that the implementation is systematic and efficient, leading to a robust and user-friendly video conferencing solution.

## Step 3: Implement Join Screen on MiroTalk SFU WebRTC application

### UI/UX Design

The join screen is the first interaction users have with your MiroTalk SFU WebRTC application, so it needs to be intuitive and welcoming. The design should be clean, with a focus on simplicity and ease of use. Key elements include an input field for the username and a join button.

#### Frontend Implementation

To implement the join screen, create an HTML file named `index.html` in the `public` directory. Add the following code to set up the basic structure:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiroTalk SFU WebRTC</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="join-screen">
        <h1>Welcome to MiroTalk SFU</h1>
        <input type="text" id="username" placeholder="Enter your name" />
        <button id="join-button">Join</button>
    </div>
    <script src="scripts.js"></script>
</body>
</html>
```

#### Styling the Join Screen

Next, create a CSS file named `styles.css` in the `public` directory to style the join screen:

```css title="CSS"
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#join-screen {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#username {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#join-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#join-button:hover {
    background-color: #0056b3;
}
```

### Backend Integration

In the `scripts.js` file, add the following JavaScript to handle the join button click and initiate the connection to the server:

```javascript title="JavaScript"
document.getElementById('join-button').addEventListener('click', () => {
    const username = document.getElementById('username').value;
    if (username) {
        // Redirect to the main conference room with the username as a query parameter
        window.location.href = `/room?username=${username}`;
    } else {
        alert('Please enter your name');
    }
});
```

### Server-side Routing

In your `server.js`, add a route to handle the room page:

```javascript title="JavaScript"
app.get('/room', (req, res) => {
    const username = req.query.username;
    if (username) {
        res.sendFile(__dirname + '/public/room.html');
    } else {
        res.redirect('/');
    }
});
```

By implementing the join screen, you provide users with a seamless entry point into your MiroTalk SFU WebRTC application. This screen sets the stage for the user experience, ensuring a smooth start to their video conferencing journey.

## Step 4: Implement Controls 

### Control Elements

Implementing control elements is essential for a user-friendly video conferencing experience. These controls typically include buttons for muting/unmuting audio, turning the video on/off, starting/stopping screen sharing, and leaving the meeting.

### Adding Functionality

To start, create a basic layout for the control panel in the `room.html` file. This file should be in the `public` directory and includes the following HTML:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiroTalk SFU Room</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="video-grid"></div>
    <div id="controls">
        <button id="mute-button">Mute</button>
        <button id="video-button">Video Off</button>
        <button id="screen-share-button">Share Screen</button>
        <button id="leave-button">Leave</button>
    </div>
    <script src="scripts.js"></script>
</body>
</html>
```

### Real-Time Interaction on MiroTalk SFU WebRTC Application

Next, update the `styles.css` file to style the control panel:

```css title="CSS"
#controls {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

#controls button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#controls button:hover {
    background-color: #0056b3;
}
```

Now, add functionality to the control buttons in `scripts.js`:

```javascript title="JavaScript"
const muteButton = document.getElementById('mute-button');
const videoButton = document.getElementById('video-button');
const screenShareButton = document.getElementById('screen-share-button');
const leaveButton = document.getElementById('leave-button');

muteButton.addEventListener('click', () => {
    const enabled = localStream.getAudioTracks()[0].enabled;
    if (enabled) {
        localStream.getAudioTracks()[0].enabled = false;
        muteButton.textContent = 'Unmute';
    } else {
        localStream.getAudioTracks()[0].enabled = true;
        muteButton.textContent = 'Mute';
    }
});

videoButton.addEventListener('click', () => {
    const enabled = localStream.getVideoTracks()[0].enabled;
    if (enabled) {
        localStream.getVideoTracks()[0].enabled = false;
        videoButton.textContent = 'Video On';
    } else {
        localStream.getVideoTracks()[0].enabled = true;
        videoButton.textContent = 'Video Off';
    }
});

screenShareButton.addEventListener('click', async () => {
    try {
        const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        const screenTrack = displayStream.getVideoTracks()[0];

        screenTrack.onended = () => {
            const videoTrack = localStream.getVideoTracks()[0];
            const sender = currentPeerConnection.getSenders().find(s => s.track.kind === videoTrack.kind);
            sender.replaceTrack(videoTrack);
        };

        const sender = currentPeerConnection.getSenders().find(s => s.track.kind === screenTrack.kind);
        sender.replaceTrack(screenTrack);
    } catch (err) {
        console.error('Error sharing screen:', err);
    }
});

leaveButton.addEventListener('click', () => {
    window.location.href = '/';
});
```

This code adds basic interactivity to the control elements. Users can mute/unmute their audio, turn their video on/off, share their screen, and leave the meeting. 

By implementing these controls, you enhance the user experience, making the MiroTalk SFU WebRTC application more interactive and functional. These controls are crucial for effective real-time communication and collaboration.

Building MiroTalk SFU WebRTC App with JavaScript

MiroTalk SFU WebRTC

## Step 5: Implement Participant View
In this section, we will enhance the RTSPtoWeb WebRTC application by implementing a participant view. This will allow multiple viewers to join and watch the same stream concurrently, offering a more interactive and scalable streaming experience.

### HTML Structure for Participant View

We will extend the existing HTML to support multiple participants. Modify your `index.html` file to include a list of participants and a container for their streams:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTSPtoWeb WebRTC</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #join-screen {
            margin: 20px;
        }
        #video-container {
            display: none;
            margin-top: 20px;
        }
        #controls {
            margin-top: 10px;
        }
        button {
            margin: 0 10px;
        }
        #participants {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }
        .participant {
            margin: 10px;
        }
        video {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <h1>Join a Live Stream</h1>
    <div id="join-screen">
        <label for="stream-select">Select Stream:</label>
        <select id="stream-select">
            <option value="example_stream">Example Stream</option>
            
        </select>
        <button id="join-button">Join</button>
    </div>
    <div id="video-container">
        <video id="video" autoplay playsinline controls></video>
        <div id="controls">
            <button id="play-button">Play</button>
            <button id="pause-button">Pause</button>
            <button id="stop-button">Stop</button>
        </div>
    </div>
    <div id="participants"></div>
    <script src="webrtc.js"></script>
</body>
</html>
```

In this structure, the `#participants` div will hold individual video elements for each participant.

### JavaScript Code for Participant View

Now, we need to update our JavaScript to handle multiple participants. Modify your `webrtc.js` file with the following code:

```javascript title="JavaScript"
document.getElementById('join-button').addEventListener('click', function() {
    const streamName = document.getElementById('stream-select').value;
    joinStream(streamName);
});

document.getElementById('play-button').addEventListener('click', function() {
    const videoElement = document.getElementById('video');
    videoElement.play();
});

document.getElementById('pause-button').addEventListener('click', function() {
    const videoElement = document.getElementById('video');
    videoElement.pause();
});

document.getElementById('stop-button').addEventListener('click', function() {
    const videoElement = document.getElementById('video');
    videoElement.pause();
    videoElement.currentTime = 0; // Reset the video to the beginning
});

function joinStream(streamName) {
    const videoContainer = document.getElementById('video-container');
    const videoElement = document.getElementById('video');
    const participantsContainer = document.getElementById('participants');
    
    // Show the video container
    videoContainer.style.display = 'block';

    // Replace with actual WebRTC setup code
    const wsUrl = `wss://yourserver.com/ws/${streamName}`; // WebSocket URL for the WebRTC stream
    const pc = new RTCPeerConnection();
    const ws = new WebSocket(wsUrl);

    ws.onmessage = (message) => {
        const signal = JSON.parse(message.data);
        if (signal.sdp) {
            pc.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(() => {
                if (signal.sdp.type === 'offer') {
                    pc.createAnswer().then(answer => {
                        pc.setLocalDescription(answer).then(() => {
                            ws.send(JSON.stringify({ 'sdp': pc.localDescription }));
                        });
                    });
                }
            });
        } else if (signal.candidate) {
            pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
        }
    };

    pc.onicecandidate = (event) => {
        if (event.candidate) {
            ws.send(JSON.stringify({ 'candidate': event.candidate }));
        }
    };

    pc.ontrack = (event) => {
        videoElement.srcObject = event.streams[0];
        addParticipantView(event.streams[0]);
    };

    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
        stream.getTracks().forEach(track => pc.addTrack(track, stream));
    }).catch(error => {
        console.error('Error accessing media devices.', error);
    });

    // Start WebRTC negotiation
    pc.createOffer().then(offer => {
        pc.setLocalDescription(offer).then(() => {
            ws.send(JSON.stringify({ 'sdp': pc.localDescription }));
        });
    });
}

function addParticipantView(stream) {
    const participantsContainer = document.getElementById('participants');
    const participantDiv = document.createElement('div');
    participantDiv.className = 'participant';
    const participantVideo = document.createElement('video');
    participantVideo.autoplay = true;
    participantVideo.playsinline = true;
    participantVideo.srcObject = stream;
    participantDiv.appendChild(participantVideo);
    participantsContainer.appendChild(participantDiv);
}
```

### Explanation of the JavaScript Code

#### Event Listeners for Control Buttons
   - **Play Button**: Resumes the video playback by calling the `play` method on the video element.
   - **Pause Button**: Pauses the video playback by calling the `pause` method on the video element.
   - **Stop Button**: Pauses the video and resets the current time to the beginning, effectively stopping the video.

#### Join Stream Function
   - The `joinStream` function displays the video container and sets up the WebRTC connection.
   - A WebSocket connection is established to the server using the URL for the selected stream.
   - The WebRTC peer connection (`RTCPeerConnection`) is created, and signaling messages are exchanged via WebSocket to establish the connection.
   - The video stream is set as the source for the video element, and the `addParticipantView` function is called to add the stream to the participant view.

#### Add Participant View Function
   - This function creates a new `div` for each participant, including a `video` element to display their stream.
   - The participant view is appended to the `#participants` container, allowing multiple viewers to be displayed concurrently.

By implementing the participant view, you enable multiple viewers to join and watch the same stream, enhancing the interactivity and scalability of your RTSPtoWeb WebRTC application. In the next step, we will focus on running your code and troubleshooting any common issues.

## Step 6: Run Your Code Now

Now that you have set up the RTSPtoWeb WebRTC application with a join screen, user controls, and participant view, it’s time to run your code and see everything in action. This section will guide you through the process of running the application and troubleshooting common issues.

### Running the Application

#### Start the RTSPtoWeb Application
Ensure you have your Go environment set up and dependencies installed as mentioned in Part 2. Then, run the application with the following command:

```bash title="bash"
   go run main.go
```

You should see output indicating that the RTSPtoWeb server is running and ready to accept connections.

#### Access the Web Interface
Open a web browser and navigate to `http://localhost:8083`. You should see the join screen where you can select a stream and click the "Join" button to start watching the live stream.

#### Interacting with the Stream

   - **Play**: Click the "Play" button to resume playback if the video is paused.
   - **Pause**: Click the "Pause" button to pause the video stream.
   - **Stop**: Click the "Stop" button to stop the video and reset it to the beginning.

### Troubleshooting Common Issues

#### Server Not Starting
If the server fails to start, check the following:
   - Ensure Go is installed correctly and your environment variables are set up.
   - Verify that you have installed all dependencies using `go mod tidy`.
   - Check the `config.json` file for any syntax errors or incorrect configurations.

#### WebSocket Connection Issues
If you encounter WebSocket connection issues:
   - Ensure that the WebSocket URL in the `webrtc.js` file is correct and matches your server’s address.
   - Verify that your server is running and accessible from the browser.

#### No Video Stream
If the video stream is not appearing:
   - Ensure your RTSP stream source is working correctly and accessible.
   - Check the browser console for any errors related to WebRTC or media devices.
   - Make sure the `addParticipantView` function is correctly adding the video elements to the DOM.

#### Cross-Origin Resource Sharing (CORS) Issues
If you encounter CORS issues:
   - Make sure your server is configured to allow CORS requests from your web application’s domain.

## Conclusion 
Congratulations! You have successfully set up the RTSPtoWeb WebRTC application. By following the steps outlined in this guide, you now have a functional application that allows multiple users to join and watch live RTSP streams through their web browsers. This setup provides a robust and scalable solution for real-time streaming applications.

Learn how to use RTSPtoWeb to convert RTSP streams to WebRTC format for seamless browser compatibility. This guide covers installation, setup, and implementation using Go.

How to Build Ion SFU WebRTC App?

How to Build RTSPtoWeb WebRTC App?

RTSPtoWeb WebRTC

## Step 5: Implement Participant View

### Participant View Overview
The participant view is a crucial component of your Medooze WebRTC application. It provides a visual representation of all participants in the session, allowing users to see who is in the meeting, their video feeds, and their status. Implementing an effective participant view enhances the user experience by making interactions more intuitive and engaging.

#### Key Elements to Display:
- Participant names
- Video streams
- Audio status (muted/unmuted)
- Active speaker indication

### Implementation Steps

#### HTML Structure for Participant View

Add a section to display participants’ video streams:

```html title="HTML"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medooze WebRTC Session</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="join-container">
        
    </div>
    <div class="controls-container" id="controls" style="display:none;">
        
    </div>
    <div class="participants-container" id="participants" style="display:none;">
        
    </div>
    <script src="script.js"></script>
</body>
</html>
```

#### CSS Styling

```css title="CSS"
/* styles.css (extended) */
.participants-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.participant video {
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: #000;
}

.participant .name {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
}
```

#### JavaScript for Rendering Participant Information

Implement JavaScript to dynamically add participant views:

```javascript title="JavaScript"
// script.js (extended)
document.getElementById('join-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const room = document.getElementById('room').value;

    if (username && room) {
        // Hide join screen and show controls and participants container
        document.querySelector('.join-container').style.display = 'none';
        document.getElementById('controls').style.display = 'flex';
        document.getElementById('participants').style.display = 'flex';
        
        // Initialize WebRTC connection and other functionalities here
        initializeWebRTC(username, room);
    } else {
        alert('Please enter both your name and room ID.');
    }
});

function initializeWebRTC(username, room) {
    // Initialize WebRTC connection
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
            // Display local video stream
            addParticipantView(username, stream, true);

            // Initialize signaling and peer connections (example)
            const peerConnection = new RTCPeerConnection(configuration);
            stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
            
            // Handle remote streams (example)
            peerConnection.ontrack = event => {
                event.streams.forEach(stream => {
                    addParticipantView('Remote Participant', stream, false);
                });
            };

            // Connect to signaling server and join room logic here

        }).catch(error => {
            console.error('Error accessing media devices.', error);
        });
}

function addParticipantView(name, stream, isLocal) {
    const participantsContainer = document.getElementById('participants');
    const participantDiv = document.createElement('div');
    participantDiv.className = 'participant';

    const video = document.createElement('video');
    video.srcObject = stream;
    video.autoplay = true;
    if (isLocal) {
        video.muted = true; // Mute local video to avoid feedback
    }

    const nameDiv = document.createElement('div');
    nameDiv.className = 'name';
    nameDiv.textContent = name;

    participantDiv.appendChild(video);
    participantDiv.appendChild(nameDiv);
    participantsContainer.appendChild(participantDiv);
}
```

### Optimization

For optimizing the participant view:
- **Efficient DOM Manipulation:** Minimize reflows and repaints by batching DOM updates.
- **Media Stream Handling:** Ensure streams are efficiently managed to avoid memory leaks and performance degradation.
- **Responsive Design:** Use CSS media queries to ensure the participant view adapts to different screen sizes and orientations.

#### Example of Media Stream Handling Optimization

```javascript title="JavaScript"
function initializeWebRTC(username, room) {
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    addParticipantView(username, localStream, true);

    const peerConnection = new RTCPeerConnection(configuration);
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    peerConnection.ontrack = event => {
        event.streams.forEach(stream => {
            addParticipantView('Remote Participant', stream, false);
        });
    };

    // Cleanup event listener to avoid memory leaks
    window.addEventListener('beforeunload', () => {
        peerConnection.close();
        localStream.getTracks().forEach(track => track.stop());
    });
}
```

### Common Challenges and Solutions

- **Stream Synchronization:** Ensure audio and video streams are synchronized.
  - **Solution:** Use WebRTC’s built-in synchronization features and handle tracks appropriately.
- **Handling Multiple Streams:** Efficiently manage multiple participant streams to prevent performance issues.
  - **Solution:** Optimize the number of streams displayed at any time and use lower resolutions if necessary.

In this part, you have implemented the participant view for your Medooze WebRTC application, allowing you to display and manage participant information and streams dynamically. Next, we will move on to running your code and ensuring everything works together seamlessly.

## Step 6: Run Your Code Now

### Running the Application

Once you have implemented all the necessary components for your Medooze WebRTC application, it's time to run your code and test the entire setup. Follow these steps to ensure everything is working correctly.

- **Final Steps to Run the Medooze WebRTC Application**

#### Compile the C++ Code
Ensure your C++ code, especially `main.cpp`, is compiled without errors.

```bash title="bash"
   g++ -o media-server main.cpp -lmedooze
```

#### Start the Signaling Server
Run your Node.js signaling server.

```bash title="bash"
   node server.js
```

#### Open the HTML File
Open `index.html` in your browser to load the client interface.

### Code Snippet for Running the Server

Make sure your server and client are properly linked and ready to communicate.

```bash title="bash"
// Run the media server
./media-server

// Run the signaling server
node server.js
```

### Verification

To verify the application is working correctly, follow these steps:

1. **Open Multiple Browser Tabs:**
   Open `index.html` in multiple tabs or different browsers to simulate multiple participants.
2. **Join a Session:**
   Use the join screen to enter a session with each participant.
3. **Test Controls:**
   Verify that all control functionalities (mute, unmute, camera on/off) are working as expected.
4. **Check Participant View:**
   Ensure all participants' video streams are displayed correctly.

### Checklist of Key Functionalities to Test

- **Join Session:** Participants can join the session using the join screen.
- **Stream Management:** Video and audio streams are properly managed and displayed.
- **Controls Functionality:** Mute, unmute, and camera controls work seamlessly.
- **Multiple Participants:** The application handles multiple participants without issues.

## Conclusion
In this article, we have walked through the process of setting up a Medooze WebRTC application from scratch. We've covered everything from initializing the project, installing dependencies, and setting up the main components, to implementing key features like the join screen, controls, and participant view. By following these steps, you can build a robust real-time communication application using Medooze WebRTC.

Learn how to set up and implement Medooze WebRTC with our comprehensive guide. This article covers everything from initialization and configuration to implementing control features and participant views, ensuring you create a robust real-time communication application.

How to Build Medooze WebRTC App with JavaScript?

Medooze WebRTC

## Step 5: Implement Participant View

### Designing the Participant View

The participant view is a crucial component of your AIORTC WebRTC application, displaying the video and audio streams of all participants in the session. This step involves creating a responsive and adaptive layout that can dynamically adjust as participants join or leave the session.

#### [a] Layout and Design Considerations

The participant view should be flexible and able to handle multiple video streams. A grid layout is ideal for this purpose, ensuring that all video streams are visible and appropriately sized.

**HTML Structure for Participant View (`templates/index.html`)**:

Ensure the participant view container is included in your existing HTML structure:

```html title="HTML"
<body>
    <div id="join-screen">
        <h2>Join the Session</h2>
        <input type="text" id="username" placeholder="Enter your name">
        <button id="join-button">Join</button>
    </div>
    <div id="control-panel" style="display: none;">
        <button id="mute-button">Mute</button>
        <button id="video-button">Stop Video</button>
    </div>
    <div id="participant-view" style="display: none;">
        
    </div>
    <script src="static/js/main.js"></script>
</body>
```

**CSS for Participant View (`static/css/style.css`)**:

```css title="CSS"
#participant-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

#participant-view video {
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 30%;
    max-width: 400px;
}
```

#### [b] Real-time Data Handling

The JavaScript logic for handling the participant view involves dynamically adding and removing video elements as participants join or leave the session.

**JavaScript for Handling Participant View (`static/js/main.js`)**:

Enhance the existing JavaScript to manage the participant view effectively.

```javascript title="JavaScript"
document.addEventListener('DOMContentLoaded', () => {
    const joinButton = document.getElementById('join-button');
    const muteButton = document.getElementById('mute-button');
    const videoButton = document.getElementById('video-button');

    let localStream = null;
    let pc = null;
    const participantView = document.getElementById('participant-view');

    joinButton.addEventListener('click', async () => {
        const username = document.getElementById('username').value.trim();
        if (username) {
            try {
                await joinSession(username);
                document.getElementById('join-screen').style.display = 'none';
                document.getElementById('control-panel').style.display = 'block';
                participantView.style.display = 'flex';
            } catch (error) {
                console.error('Error joining session:', error);
            }
        } else {
            alert('Please enter your name');
        }
    });

    muteButton.addEventListener('click', () => {
        if (localStream) {
            const audioTrack = localStream.getAudioTracks()[0];
            audioTrack.enabled = !audioTrack.enabled;
            muteButton.textContent = audioTrack.enabled ? 'Mute' : 'Unmute';
        }
    });

    videoButton.addEventListener('click', () => {
        if (localStream) {
            const videoTrack = localStream.getVideoTracks()[0];
            videoTrack.enabled = !videoTrack.enabled;
            videoButton.textContent = videoTrack.enabled ? 'Stop Video' : 'Start Video';
        }
    });

    async function joinSession(username) {
        const response = await fetch('/offer', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username })
        });

        if (!response.ok) {
            throw new Error('Failed to join session');
        }

        const data = await response.json();
        pc = new RTCPeerConnection();
        pc.ontrack = (event) => {
            const video = document.createElement('video');
            video.srcObject = event.streams[0];
            video.autoplay = true;
            participantView.appendChild(video);
        };

        localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
        localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

        const offer = new RTCSessionDescription(data);
        await pc.setRemoteDescription(offer);
        const answer = await pc.createAnswer();
        await pc.setLocalDescription(answer);

        await fetch('/answer', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                sdp: pc.localDescription.sdp,
                type: pc.localDescription.type
            })
        });
    }
});
```

#### [c] Managing Participant Data

The `ontrack` event handler in the JavaScript code dynamically creates and appends video elements to the `participant-view` container when new media streams are received. This ensures that all participants' video streams are displayed in real-time.

#### [d] Handling Participant Disconnects

To ensure the participant view remains clean and organized, you should also handle the removal of video elements when participants leave the session. This can be done by listening for the `onremovetrack` event or implementing a custom mechanism to detect when participants disconnect.

**JavaScript for Handling Participant Disconnects (`static/js/main.js`)**:

```javascript title="JavaScript"
pc.onremovetrack = (event) => {
    const stream = event.streams[0];
    const videoElements = document.querySelectorAll('video');
    videoElements.forEach(video => {
        if (video.srcObject === stream) {
            video.remove();
        }
    });
};
```

By implementing the participant view, you ensure that your AIORTC WebRTC application can dynamically display video streams, providing a seamless and interactive real-time communication experience. In the final step, you will focus on running and testing your application to ensure everything works as expected.

## Step 6: Run Your Code Now

### Final Steps

Now that you've implemented the key components of your AIORTC WebRTC application, it's time to run and test the application to ensure everything works as expected.

#### Running and Testing the Application

Ensure your virtual environment is activated, and run the `main.py` script to start the server:

```bash title="bash"
python main.py
```

Open a web browser and navigate to `http://localhost:8080`. You should see the join screen where you can enter your name and join the session. Test the following functionalities:

- Enter your name and click the "Join" button to initiate the WebRTC connection.
- Verify that the control panel and participant view are displayed after joining the session.
- Test the mute/unmute button to ensure the microphone can be toggled on and off.
- Test the start/stop video button to ensure the video stream can be toggled on and off.
- Join the session from multiple devices/browsers to ensure that all participants' video streams are displayed correctly.

#### Debugging Common Issues

During testing, you might encounter some common issues. Here are a few troubleshooting tips:

- **No Video or Audio**: Ensure that your browser has permissions to access the camera and microphone. Check the browser's security settings and allow access if necessary.
- **Connection Errors**: Verify that the signaling server is running correctly and that the WebRTC connection setup messages are being exchanged properly. Check the browser console for any error messages and debug accordingly.
- **UI Not Updating**: Ensure that the JavaScript functions handling the UI updates are correctly implemented and that the DOM elements are being manipulated as expected.

### Deployment Considerations

Once you have thoroughly tested your application locally, you may want to deploy it to a production environment. Here are some best practices for deploying AIORTC WebRTC applications:

#### Use a Reverse Proxy
Utilize a reverse proxy server like Nginx to handle incoming requests and forward them to your AIORTC application. This can improve performance, security, and scalability.

#### Secure Your Application
Implement HTTPS to secure the communication between clients and your server. Obtain an SSL certificate and configure your web server to use HTTPS.

#### Scalability
Consider using a cloud-based service for deploying your application, such as AWS, Google Cloud, or Azure. These platforms provide scalable infrastructure and additional services that can help manage your application effectively.

#### Monitoring and Logging
Implement monitoring and logging to keep track of your application's performance and identify any issues. Use tools like Prometheus, Grafana, and ELK Stack for monitoring and logging.

## Conclusion 
In this article, we have explored how to build a real-time communication application using AIORTC WebRTC. We started with setting up the development environment and installing the necessary dependencies. We then structured our project and implemented key components, including the join screen, control panel, and participant view. Finally, we tested our application to ensure everything works as expected and discussed deployment considerations for a production environment.

Learn how to create a real-time communication application using AIORTC WebRTC with Python. This step-by-step guide covers installation, setup, and implementation, making it perfect for developers working on IoT and server applications.

How to Build AIORTC WebRTC App with Python?

AIORTC WebRTC

Python SDK for Enhanced WebRTC Integration

## Step 5: Implement Participant View

In this section, we will implement the participant view for our WebRTC application. This view will manage and display multiple participants in a session, handling the video and audio streams for each user.

### Setting Up the Participant View

To support multiple participants, we need to update our HTML and JavaScript to dynamically handle and display multiple video streams.

#### [a] Update HTML for Participant View

Modify your `index.html` file to include a container for multiple video elements:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust WebRTC.rs Application</title>
</head>
<body>
    <h1>Rust WebRTC.rs Application</h1>
    <div>
        <input type="text" id="room" placeholder="Enter room name">
        <button id="join">Join</button>
        <button id="start" disabled>Start</button>
        <button id="stop" disabled>Stop</button>
    </div>
    <div id="videos"></div>
    <script src="app.js"></script>
</body>
</html>
```

This HTML update replaces the individual video elements with a single `div` container that will hold multiple video elements dynamically.

### Handling Multiple Participants

Next, we will update our JavaScript code to manage multiple participants and their respective video streams.

#### [b] JavaScript for Managing Participants

Update your `app.js` file to include logic for handling multiple participants:

```javascript title="JavaScript"
let localStream;
let peerConnection;
const signalingServerUrl = "ws://127.0.0.1:3030/signaling";
let signalingSocket;
const remoteStreams = {};

document.getElementById("join").addEventListener("click", async () => {
    const room = document.getElementById("room").value;
    if (!room) {
        alert("Please enter a room name");
        return;
    }

    signalingSocket = new WebSocket(signalingServerUrl);
    signalingSocket.onopen = () => {
        signalingSocket.send(JSON.stringify({ type: "join", room }));
    };

    signalingSocket.onmessage = async (message) => {
        const data = JSON.parse(message.data);
        switch (data.type) {
            case "offer":
                await handleOffer(data.offer, data.sender);
                break;
            case "answer":
                await handleAnswer(data.answer);
                break;
            case "candidate":
                await handleCandidate(data.candidate);
                break;
            default:
                break;
        }
    };

    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    addVideoStream("localVideo", localStream, true);

    // Enable control buttons
    document.getElementById("start").disabled = false;
    document.getElementById("stop").disabled = false;
});

document.getElementById("start").addEventListener("click", () => {
    startSession();
});

document.getElementById("stop").addEventListener("click", () => {
    stopSession();
});

async function startSession() {
    if (!peerConnection) {
        peerConnection = createPeerConnection();
    }
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingSocket.send(JSON.stringify({ type: "offer", offer }));
}

function stopSession() {
    if (peerConnection) {
        peerConnection.close();
        peerConnection = null;
    }
    localStream.getTracks().forEach(track => track.stop());
    clearVideoStreams();
    document.getElementById("start").disabled = true;
    document.getElementById("stop").disabled = true;
}

async function handleOffer(offer, sender) {
    peerConnection = createPeerConnection();
    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    signalingSocket.send(JSON.stringify({ type: "answer", answer }));
}

function createPeerConnection() {
    const pc = new RTCPeerConnection();
    pc.onicecandidate = (event) => {
        if (event.candidate) {
            signalingSocket.send(JSON.stringify({ type: "candidate", candidate: event.candidate }));
        }
    };
    pc.ontrack = (event) => {
        const stream = event.streams[0];
        const streamId = event.track.id;
        if (!remoteStreams[streamId]) {
            remoteStreams[streamId] = stream;
            addVideoStream(streamId, stream);
        }
    };
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
    return pc;
}

async function handleAnswer(answer) {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

async function handleCandidate(candidate) {
    await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

function addVideoStream(id, stream, isLocal = false) {
    const videoContainer = document.getElementById("videos");
    const videoElement = document.createElement("video");
    videoElement.id = id;
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    if (isLocal) {
        videoElement.muted = true;
    }
    videoContainer.appendChild(videoElement);
}

function clearVideoStreams() {
    const videoContainer = document.getElementById("videos");
    videoContainer.innerHTML = "";
    Object.keys(remoteStreams).forEach(streamId => {
        remoteStreams[streamId].getTracks().forEach(track => track.stop());
    });
    remoteStreams = {};
}
```

This JavaScript code includes the following updates:
- **Remote Streams Management**: A `remoteStreams` object to manage multiple remote streams.
- **Handling Multiple Tracks**: The `ontrack` event handler now creates a new video element for each remote stream and adds it to the DOM.
- **Dynamic Video Elements**: The `addVideoStream` function dynamically creates and adds video elements to the `videos` container.
- **Clear Video Streams**: The `clearVideoStreams` function clears all video elements and stops their tracks when the session is stopped.

### Connecting and Managing Participants

With these changes, our application can now handle multiple participants by dynamically creating video elements for each participant's stream. The peer connection setup and signaling handling ensure that each participant's video and audio are correctly managed and displayed.

By implementing the participant view, you have enhanced the functionality of your WebRTC application to support multiple users in a session. The next step will cover running the application and troubleshooting common issues.

## Step 6: Run Your Code Now

In this section, we will go through the steps required to run your Rust WebRTC.rs application. We will also cover troubleshooting common issues you might encounter during the setup and execution process.

### Running the Application

#### [a] Start the Signaling Server

First, you need to start the signaling server. The signaling server handles the communication between peers and is essential for establishing WebRTC connections. Make sure your `src/main.rs` includes the signaling server setup:

```rust title="Rust"
use warp::Filter;

#[tokio::main]
async fn main() {
    // Create the signaling server routes
    let routes = warp::path("signaling")
        .and(warp::ws())
        .map(|ws: warp::ws::Ws| {
            ws.on_upgrade(handle_signaling)
        });

    // Start the signaling server
    warp::serve(routes).run(([127, 0, 0, 1], 3030)).await;
}

// Handle signaling messages
async fn handle_signaling(ws: warp::ws::WebSocket) {
    // WebSocket handling code here...
}
```

Run the signaling server using Cargo:

```sh title="sh"
cargo run
```

This command compiles and runs your Rust application, starting the signaling server on `http://127.0.0.1:3030/signaling`.

#### [b] Serve the HTML and JavaScript Files

You need to serve the `index.html` and `app.js` files to access the user interface. A simple way to do this is to use a static file server. You can use any server like `http-server` (Node.js) or Python's built-in HTTP server.

Using Python's built-in HTTP server, navigate to the directory containing your `index.html` file and run:

```sh title="sh"
python3 -m http.server 8000
```

This command starts a server that serves files from the current directory at `http://localhost:8000`.

#### [c] Open the Application in a Browser

Open your browser and navigate to `http://localhost:8000`. You should see the user interface of your WebRTC application.

### Testing the Application

#### Join a Room

- Enter a room name in the input field and click the "Join" button.
- This should connect you to the signaling server and enable the "Start" and "Stop" buttons.

#### Start the Session

- Click the "Start" button to initiate the WebRTC session.
- Your local video stream should appear on the screen.

#### Open Another Browser Window

- Open another browser window or tab and navigate to `http://localhost:8000`.
- Join the same room name as the first participant.
- Both participants should see each other's video streams.

#### Stop the Session

- Click the "Stop" button to end the WebRTC session.
- This should stop the video streams and clear the video elements.

### Troubleshooting Common Issues

Here are some common issues you might encounter and how to troubleshoot them:

#### WebSocket Connection Errors
   - Ensure the signaling server is running and accessible at `ws://127.0.0.1:3030/signaling`.
   - Check the WebSocket URL in your `app.js` file.

#### No Video or Audio Stream
   - Ensure that your browser has permissions to access the camera and microphone.
   - Check the console for any errors related to media devices.

#### ICE Candidate Errors
   - Ensure that your network configuration allows peer-to-peer connections.
   - Check the console for errors related to ICE candidates and ensure they are being exchanged properly.

#### Peer Connection Not Established
   - Verify that the signaling messages (offer, answer, and ICE candidates) are being sent and received correctly.
   - Check the order of signaling events to ensure the peer connection setup is followed correctly.

By following these steps, you should be able to run and test your Rust WebRTC.rs application successfully. The next section will cover the conclusion and provide answers to frequently asked questions (FAQs) to help you further understand and troubleshoot your WebRTC application.

## Conclusion
In this comprehensive guide, we've walked through the process of building a real-time communication application using Rust and the WebRTC.rs library. By following the steps outlined in this article, you have learned how to set up your Rust environment, create a new WebRTC application, handle signaling, manage peer connections, and implement essential features such as join screens, control buttons, and participant views.

Rust WebRTC.rs offers a robust and efficient way to implement real-time communication applications, leveraging Rust's performance and safety features. Whether you are developing a video conferencing tool, a live streaming application, or any other peer-to-peer communication platform, Rust WebRTC.rs provides the tools you need to build a high-performance and reliable solution.

Learn how to build real-time communication applications using Rust WebRTC.rs. This guide covers setup, coding, and implementation of key features such as signaling, peer connection, and media streams.

How to Build Pion WebRTC App?

How to Build Rust WebRTC.rs App?

Rust WebRTC.rs

## Step 5: Implement Participant View

### Participant View

In a WebRTC application, handling multiple participant streams is essential for a seamless communication experience. This section will focus on implementing the participant view, where each participant’s video stream is displayed on the main communication screen.

### Rendering Participant Views

We will enhance the existing `main.html` to dynamically create and manage video elements for each participant. This involves setting up peer connections, handling media streams, and updating the UI accordingly.

### Updated JavaScript Code

Here's the complete JavaScript code for `main.html`, including the implementation for managing multiple participant views:

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Communication Screen</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; }
        #video-container { display: flex; flex-wrap: wrap; justify-content: center; }
        video { margin: 10px; width: 300px; height: 200px; background-color: black; }
        #controls { margin-top: 20px; }
        button { margin: 5px; padding: 10px 20px; }
    </style>
</head>
<body>
    <h1>Communication Room</h1>
    <div id="video-container"></div>
    <div id="controls">
        <button id="mute-btn">Mute</button>
        <button id="unmute-btn">Unmute</button>
        <button id="end-call-btn">End Call</button>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        const roomId = localStorage.getItem('roomId');
        let localStream;
        let peerConnections = {};

        // Get user media (audio/video)
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                localStream = stream;
                const videoElement = document.createElement('video');
                videoElement.srcObject = stream;
                videoElement.autoplay = true;
                videoElement.muted = true; // Mute local video to avoid feedback
                document.getElementById('video-container').appendChild(videoElement);

                // Join room and send offer
                socket.emit('join', { roomId });
            })
            .catch(error => {
                console.error('Error accessing media devices.', error);
            });

        // Handle offer from other peers
        socket.on('offer', async data => {
            const { offer, socketId } = data;
            const peerConnection = new RTCPeerConnection();
            peerConnections[socketId] = peerConnection;

            peerConnection.onicecandidate = event => {
                if (event.candidate) {
                    socket.emit('candidate', { candidate: event.candidate, roomId });
                }
            };

            peerConnection.ontrack = event => {
                const videoElement = document.createElement('video');
                videoElement.srcObject = event.streams[0];
                videoElement.autoplay = true;
                videoElement.id = socketId;
                document.getElementById('video-container').appendChild(videoElement);
            };

            peerConnection.addStream(localStream);
            await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
            const answer = await peerConnection.createAnswer();
            await peerConnection.setLocalDescription(answer);

            socket.emit('answer', { answer, roomId });
        });

        // Handle answer from other peers
        socket.on('answer', async data => {
            const { answer, socketId } = data;
            const peerConnection = peerConnections[socketId];
            await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
        });

        // Handle ICE candidates
        socket.on('candidate', async data => {
            const { candidate, socketId } = data;
            const peerConnection = peerConnections[socketId];
            await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
        });

        // Handle controls
        document.getElementById('mute-btn').onclick = () => {
            localStream.getAudioTracks()[0].enabled = false;
        };

        document.getElementById('unmute-btn').onclick = () => {
            localStream.getAudioTracks()[0].enabled = true;
        };

        document.getElementById('end-call-btn').onclick = () => {
            socket.emit('leave', { roomId });
            localStream.getTracks().forEach(track => track.stop());
            Object.values(peerConnections).forEach(pc => pc.close());
            window.location.href = '/';
        };

        // Handle peer leaving
        socket.on('leave', data => {
            const { socketId } = data;
            const videoElement = document.getElementById(socketId);
            if (videoElement) {
                videoElement.srcObject.getTracks().forEach(track => track.stop());
                videoElement.remove();
            }
            if (peerConnections[socketId]) {
                peerConnections[socketId].close();
                delete peerConnections[socketId];
            }
        });
    </script>
</body>
</html>
```

### Explanation

#### [a] Handling Multiple Streams
- When a new peer joins the room and sends an offer, a new `RTCPeerConnection` is created and stored in the `peerConnections` object with the peer's socket ID as the key.
- The `ontrack` event of the `RTCPeerConnection` handles incoming media streams. A new video element is created for each stream and added to the `video-container` div. The video element's ID is set to the peer's socket ID for easy reference.

```javascript title="JavaScript"
   peerConnection.ontrack = event => {
       const videoElement = document.createElement('video');
       videoElement.srcObject = event.streams[0];
       videoElement.autoplay = true;
       videoElement.id = socketId;
       document.getElementById('video-container').appendChild(videoElement);
   };
```

#### [b] Updating the UI
- The video elements are dynamically created and appended to the `video-container` div when new streams are received.
- When a peer leaves, the corresponding video element is removed from the UI.

```javascript title="JavaScript"
   socket.on('leave', data => {
       const { socketId } = data;
       const videoElement = document.getElementById(socketId);
       if (videoElement) {
           videoElement.srcObject.getTracks().forEach(track => track.stop());
           videoElement.remove();
       }
       if (peerConnections[socketId]) {
           peerConnections[socketId].close();
           delete peerConnections[socketId];
       }
   });
```

#### [c] Managing Peer Connections
Peer connections are stored in the `peerConnections` object. When a peer leaves, the corresponding `RTCPeerConnection` is closed, and the entry is deleted from the `peerConnections` object.

```javascript title="JavaScript"
   if (peerConnections[socketId]) {
       peerConnections[socketId].close();
       delete peerConnections[socketId];
   }
```

With these enhancements, the application can now handle multiple participant streams, dynamically update the UI, and manage peer connections efficiently. In the next section, we will focus on running and testing your WebRTC application using LibDataChannel and Node.js.

## Step 6: Run Your Code Now

### Running the Application

With all the components in place, it's time to run and test your WebRTC application. Follow these steps to start your Node.js server and test the WebRTC functionality using LibDataChannel.

#### Start the Server
Ensure that you are in the root directory of your project (where the `package.json` file is located). Open your terminal and run the following command to start the server:

```bash title="bash"
   node src/main.js
```

#### Open the Application in a Browser
Open your web browser and navigate to `http://localhost:3000`. You should see the join screen where you can enter a room ID.

#### Test the Application
   - **Join a Room**: Enter a room ID and click the "Join" button. This will take you to the main communication screen.
   - **Open Multiple Tabs**: Open multiple tabs or browsers and join the same room ID to simulate multiple participants.
   - **Check Controls**: Use the mute, unmute, and end call buttons to ensure they work as expected.
   - **Video Streams**: Verify that video streams from all participants are displayed correctly.

### Troubleshooting Common Issues

If you encounter any issues while running the application, here are some common problems and their solutions:

#### Media Devices Access Error
   - Ensure that your browser has permission to access the camera and microphone.
   - Check for any errors in the console related to media device access.

#### Signaling Issues
   - Verify that the signaling messages (offer, answer, and ICE candidates) are being exchanged correctly between peers.
   - Check the server logs for any errors related to socket connections.

#### ICE Candidate Issues
   - Ensure that the ICE candidates are being correctly exchanged and added to the peer connections.
   - Check for any network-related issues that might be blocking the connection.

## Conclusion

In this guide, we have successfully built a WebRTC application using LibDataChannel and Node.js. We covered the setup of the development environment, project structure, server configuration, and implementation of key features such as the join screen, main communication interface, controls, and participant views. This application demonstrates the power of WebRTC for real-time communication and the flexibility of Node.js in handling asynchronous operations.

Learn how to build a WebRTC application using LibDataChannel and Node.js. This guide covers installation, setup, coding, and implementation of real-time communication features.

How to Build LibDataChannel WebRTC App with JavaScript?

LibDataChannel WebRTC

## Step 5: Implement Participant View
Implementing a participant view is crucial for displaying multiple participants in a WebRTC session. This involves creating a dynamic layout that can handle video streams from various users as they join or leave the session. In this section, we will design and implement the participant view for your SipSorcery WebRTC application.

### Designing the Participant View Layout

To design the participant view, we will extend the existing UI by adding panels to display the video streams of participants. These panels will dynamically adjust as participants join or leave the session.

#### [a] Adding UI Components
Open the `Form1.cs` file in the Designer view and add a container (e.g., `FlowLayoutPanel`) to hold the video panels for participants.

**Example Layout:**

```csharp title="csharp"
   // Form1.Designer.cs
   private System.Windows.Forms.FlowLayoutPanel flpParticipants;

   private void InitializeComponent()
   {
       this.flpParticipants = new System.Windows.Forms.FlowLayoutPanel();

       // flpParticipants
       this.flpParticipants.Location = new System.Drawing.Point(12, 160);
       this.flpParticipants.Name = "flpParticipants";
       this.flpParticipants.Size = new System.Drawing.Size(480, 180);
       this.flpParticipants.TabIndex = 5;

       // Adding components to the form
       this.Controls.Add(this.flpParticipants);

       // Other existing components
       // ...
   }
```

#### [b] Rendering Participant Streams
To display the video streams, we need to handle the `OnTrack` event and dynamically create video panels for each participant.

**Code Snippets:**

```csharp title="csharp"
   // Form1.cs
   using System;
   using System.Drawing;
   using System.Windows.Forms;
   using SIPSorcery.Net;
   using SIPSorceryMedia;

   public partial class Form1 : Form
   {
       private RTCPeerConnection _peerConnection;
       private WebSocket _webSocket;

       public Form1()
       {
           InitializeComponent();
       }

       private void InitializeWebRTC()
       {
           // Initialize WebRTC configuration
           RTCConfiguration config = new RTCConfiguration
           {
               iceServers = new List<RTCIceServer>
               {
                   new RTCIceServer { urls = "stun:stun.l.google.com:19302" }
               }
           };

           _peerConnection = new RTCPeerConnection(config);

           // Set up event handlers
           _peerConnection.OnIceCandidate += (candidate) =>
           {
               lstLog.Items.Add($"ICE Candidate: {candidate}");
           };

           _peerConnection.OnTrack += (track) =>
           {
               lstLog.Items.Add($"New track received: {track.Kind}");
               Invoke((Action)(() => AddParticipantVideo(track)));
           };

           // Add media tracks
           MediaStream mediaStream = new MediaStream();
           var audioTrack = new MediaStreamTrack(MediaStreamTrackKind.Audio);
           var videoTrack = new MediaStreamTrack(MediaStreamTrackKind.Video);
           mediaStream.AddTrack(audioTrack);
           mediaStream.AddTrack(videoTrack);
           _peerConnection.AddStream(mediaStream);

           // Establish WebSocket connection for signaling
           _webSocket = new WebSocket("wss://your_signaling_server");
           _webSocket.OnMessage += (sender, e) =>
           {
               var message = e.Data;
               lstLog.Items.Add($"Signaling Message: {message}");

               if (message.Contains("offer"))
               {
                   var offer = new RTCSessionDescriptionInit
                   {
                       type = RTCSdpType.offer,
                       sdp = message
                   };
                   _peerConnection.SetRemoteDescription(offer);
                   var answer = _peerConnection.CreateAnswer(null);
                   _peerConnection.SetLocalDescription(answer);
                   _webSocket.Send(answer.sdp);
               }
               else if (message.Contains("answer"))
               {
                   var answer = new RTCSessionDescriptionInit
               {
                   type = RTCSdpType.answer,
                   sdp = message
               };
               _peerConnection.SetRemoteDescription(answer);
           }
           else if (message.Contains("candidate"))
           {
               var candidate = new RTCIceCandidateInit
               {
                   candidate = message
               };
               _peerConnection.AddIceCandidate(candidate);
           }
       };

       _webSocket.Connect();
       lstLog.Items.Add("WebSocket Signaling Connected.");
   }

   private void AddParticipantVideo(MediaStreamTrack track)
   {
       var videoPanel = new Panel
       {
           Width = 160,
           Height = 120,
           BorderStyle = BorderStyle.FixedSingle
       };

       var videoLabel = new Label
       {
           Text = track.Kind,
           Dock = DockStyle.Top,
           TextAlign = ContentAlignment.MiddleCenter
       };

       videoPanel.Controls.Add(videoLabel);

       // For actual video rendering, integrate with a video library like DirectShow, FFmpeg, etc.
       // Example:
       // var videoPlayer = new VideoPlayer(track);
       // videoPlayer.Dock = DockStyle.Fill;
       // videoPanel.Controls.Add(videoPlayer);

       flpParticipants.Controls.Add(videoPanel);
   }
```

#### [c] Handling Dynamic Layouts
As participants join or leave the session, the layout of the participant view should adjust dynamically. The `FlowLayoutPanel` automatically handles the flow and alignment of child controls. When a new participant joins, a new panel is added to the `FlowLayoutPanel`, and when a participant leaves, the corresponding panel can be removed.

**Code Snippets:**

```csharp title="csharp"
   private void RemoveParticipantVideo(MediaStreamTrack track)
   {
       foreach (Control control in flpParticipants.Controls)
       {
           if (control is Panel panel && panel.Controls[0] is Label label && label.Text == track.Kind)
           {
               flpParticipants.Controls.Remove(panel);
               break;
           }
       }
   }

   private void InitializeWebRTC()
   {
       // Existing initialization code

       // Additional event handler for removing tracks
       _peerConnection.OnRemoveTrack += (track) =>
       {
           lstLog.Items.Add($"Track removed: {track.Kind}");
           Invoke((Action)(() => RemoveParticipantVideo(track)));
       };
   }
```

#### [d] Running the Application
To run the application, press `F5` in Visual Studio. This will compile and execute your application, displaying the participant view where multiple video streams can be shown dynamically as participants join or leave the WebRTC session.

By following these steps, you have successfully implemented a participant view for your SipSorcery WebRTC application. This view dynamically adjusts to display video streams from multiple participants, enhancing the overall user experience. In the next step, we will focus on running your complete WebRTC application and ensuring everything works as expected.

## Step 6: Run Your Code Now
After implementing the participant view and all the necessary functionalities, it's time to compile and run your SipSorcery WebRTC application. This final step involves testing the application to ensure everything works as expected, from establishing connections to managing media streams and handling dynamic layouts for multiple participants.

### Final Setup Steps Before Running the Application

#### Verify Your Code
Ensure all the code is correctly implemented and there are no syntax errors. Review each part to confirm that all necessary components are included.

#### Dependencies and Libraries
Make sure all required dependencies and libraries are installed. You can use NuGet Package Manager in Visual Studio to manage and install any missing packages.

#### Configuration
Double-check your WebSocket signaling server URL and ensure it's correctly configured in the `InitializeWebRTC` method.

### Running the Application

#### Compile and Run
Press `F5` in Visual Studio or use the following command in the terminal to compile and run the application:

```bash title="bash"
   dotnet run
```

#### Testing Functionality

   - **Join Screen**: Enter your name and the signaling server URL, then click "Join" to connect to the session.
   - **Media Controls**: Use the "Mute" and "Stop Video" buttons to toggle audio and video streams.
   - **Participant View**: Ensure that video panels for participants are dynamically added and removed as users join and leave the session.

#### Troubleshooting Common Issues

   - **Connection Problems**: If you encounter issues connecting to the signaling server, verify the server URL and ensure the server is running.
   - **Media Stream Issues**: If audio or video streams are not working, check the initialization of media tracks and ensure they are correctly added to the peer connection.
   - **UI Layout Problems**: If the participant view layout is not displaying correctly, review the layout configuration in the `FlowLayoutPanel` and ensure panels are being added and removed as expected.

### Verifying Functionality

#### Test with Multiple Participants
   - Open multiple instances of the application and connect to the same signaling server.
   - Verify that video streams from different participants are displayed correctly.
   - Test the media controls for each participant to ensure they work independently.

#### Stress Testing
   - Simulate a scenario with a large number of participants to test the application's performance.
   - Monitor the application's behavior and ensure it handles the load without crashes or significant performance degradation.

#### Edge Cases
   - Test edge cases such as participants joining and leaving rapidly.
   - Check the application's stability and ensure it recovers gracefully from unexpected scenarios.

## Conclusion

Congratulations! You have successfully built and run your SipSorcery WebRTC application. By following the steps outlined in this guide, you have implemented key functionalities including initializing the WebRTC environment, creating a join screen, implementing media controls, and designing a dynamic participant view.

This application provides a robust foundation for building advanced WebRTC applications using SipSorcery and C#. You can further enhance it by adding features such as screen sharing, recording, or integrating with other services.

Learn how to implement SipSorcery WebRTC in C# with this comprehensive guide. Step-by-step instructions, code snippets, and FAQs to help you create robust WebRTC applications for desktop, server, and Unity/Xbox platforms.

How to Build AIORTC WebRTC App?

How to Build SipSorcery WebRTC App with C#?

SipSorcery WebRTC

## Step 5: Implement Participant View

### Participant Layout

To provide a seamless video conferencing experience, it's essential to design a participant view that displays all active participants in a video call. This section will guide you through setting up a layout to handle multiple video streams.

#### [a] HTML Structure for Participant View
Modify the HTML to include a section for participant video streams:

```html title="HTML"
   <div id="video-call-interface" style="display:none;">
     <div id="local-video-stream"></div>
     <div id="remote-video-streams"></div>
     <div id="participant-view">
       
     </div>
     <div id="controls">
       <button id="mute-button">Mute</button>
       <button id="video-button">Stop Video</button>
       <button id="screen-share-button">Share Screen</button>
       <button id="end-call-button">End Call</button>
     </div>
   </div>
```

#### [b] Styling the Participant View
Add CSS to style the participant video streams:

```css title="CSS"
   #participant-view {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 20px;
   }

   .participant-video {
     width: 200px;
     height: 150px;
     margin: 10px;
     border: 1px solid #ccc;
   }
```

### Real-time Updates

Ensure that the participant view updates in real-time as participants join or leave the video call.

#### JavaScript for Adding/Removing Participants
Implement JavaScript to handle participant updates:

```javascript title="JavaScript"
   const participants = {};

   function addParticipant(id, stream) {
     const videoElement = document.createElement('video');
     videoElement.classList.add('participant-video');
     videoElement.srcObject = stream;
     videoElement.autoplay = true;
     videoElement.id = `participant-${id}`;
     document.getElementById('participant-view').appendChild(videoElement);
     participants[id] = videoElement;
   }

   function removeParticipant(id) {
     const videoElement = document.getElementById(`participant-${id}`);
     if (videoElement) {
       videoElement.srcObject = null;
       videoElement.remove();
       delete participants[id];
     }
   }

   // Example usage: Adding a participant
   // addParticipant('participant1', someStream);

   // Example usage: Removing a participant
   // removeParticipant('participant1');
```

### Customizing Views

Allow users to customize their participant views for a better user experience.

#### [a] Toggling Layouts
Add functionality to toggle between different participant view layouts (e.g., grid view, speaker view).

```html title="HTML"
   <button id="toggle-layout-button">Toggle Layout</button>
```

```javascript title="JavaScript"
   let isGridView = true;

   document.getElementById('toggle-layout-button').addEventListener('click', () => {
     isGridView = !isGridView;
     document.getElementById('participant-view').style.flexDirection = isGridView ? 'row' : 'column';
   });
```

#### [b] Highlighting Active Speaker
Highlight the video stream of the active speaker.

```javascript title="JavaScript"
   function highlightActiveSpeaker(id) {
     Object.keys(participants).forEach(participantId => {
       const videoElement = participants[participantId];
       if (participantId === id) {
         videoElement.style.border = '2px solid blue';
       } else {
         videoElement.style.border = '1px solid #ccc';
       }
     });
   }

   // Example usage: Highlight active speaker
   // highlightActiveSpeaker('participant1');
```

With these implementations, users can see all participants in the call, and the view will update dynamically as participants join or leave. Additionally, they can toggle between different layouts and easily identify the active speaker. The next and final step will focus on running the complete code and performing necessary checks to ensure everything is functioning correctly.

## Step 6: Run Your Code Now

### Final Checks

Before running your Rocket.Chat application with WebRTC integration, ensure that all configurations and implementations are correctly set up. Here are some final checks to perform:

#### Environment Setup
   - Verify that Node.js and MongoDB are installed and running.
   - Ensure that your `.env` file is correctly configured with the necessary environment variables.

#### Dependencies
   - Ensure that all dependencies are installed. Run `npm install` to check and install any missing packages.

#### Code Review
   - Review your code for any syntax errors or missing components.
   - Ensure that all necessary HTML elements, CSS styles, and JavaScript functions are implemented as described in the previous sections.

### Running the Application

With everything set up, you can now run your Rocket.Chat application and test the WebRTC integration.

#### Start Rocket.Chat

```bash title="bash"
   npm start
```

#### Access the Application
Open your web browser and navigate to `http://localhost:3000`. You should see the Rocket.Chat login screen.

#### Create Admin Account
Follow the prompts to create an admin account and log in to the application.

#### Test Functionality
- **Join Screen:**
     - Navigate to the join screen and enter a username to join the video call.
- **Video Call Interface:**
     - Verify that the video call interface displays correctly.
     - Test the video/audio controls, screen sharing, and participant view features.
- **Participant View:**
     - Ensure that participant video streams are displayed and updated correctly as users join and leave the call.
     - Test the layout toggling and active speaker highlighting functionalities.

### Troubleshooting

If you encounter any issues, here are some common troubleshooting tips:

#### No Video/Audio
   - Ensure that your browser has permission to access the camera and microphone.
   - Check for any errors in the console log related to media device access.

#### Participants Not Displaying
   - Verify that the participant management functions (`addParticipant` and `removeParticipant`) are correctly implemented.
   - Ensure that the WebRTC peer connection is established correctly between participants.

#### Screen Sharing Issues
   - Ensure that your browser supports screen sharing and that the necessary permissions are granted.
   - Check for any errors in the console log related to screen sharing.

### Conclusion
Congratulations! You have successfully set up Rocket.Chat with WebRTC integration, providing real-time video and audio communication capabilities. This implementation enhances the collaboration experience within Rocket.Chat, making it a powerful tool for remote teams and distributed organizations.

Learn how to set up and integrate WebRTC with Rocket.Chat for real-time video and audio communication. This comprehensive guide covers installation, configuration, and implementation steps.

How to Build Mattermost WebRTC App?

How to Build WebTorrent WebRTC App?

How to Build SnapDrop WebRTC App?

How to Build Rocket.Chat WebRTC App with JavaScript?

Rocket.Chat WebRTC

## Step 5: Implement Participant View

In this section, we'll enhance our WebTorrent WebRTC application by implementing a participant view. This feature will allow users to see and manage multiple video streams from different participants. We'll create the necessary HTML, CSS, and JavaScript to handle real-time updates and display connected participants.

### Displaying Participants

#### HTML and CSS for Participant Views
First, let's update the `index.html` file to include a section for displaying participant videos. We'll also update the CSS to style the participant view.

Update your `index.html`:

```html title="HTML"


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebTorrent WebRTC App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>WebTorrent WebRTC Video Streaming</h1>
    
    <div id="joinScreen">
      <h2>Join a Room</h2>
      <form id="joinForm">
        <input type="text" id="roomInput" placeholder="Enter Room Name" required>
        <button type="submit">Join</button>
      </form>
    </div>
    
    <div id="videoScreen" style="display: none;">
      <div class="video-container">
        <video id="videoPlayer" controls></video>
      </div>
      <div class="controls">
        <button id="playPauseBtn">Play</button>
        <button id="fullScreenBtn">Fullscreen</button>
        <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
      </div>
      <div class="participants">
        <h2>Participants</h2>
        <ul id="participantsList"></ul>
        <div id="participantVideos"></div>
      </div>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>
```

Add the following styles to your `styles.css` file to style the participant videos:

```css title="CSS"
/* public/styles.css */

/* Existing code... */

.participants {
  text-align: center;
}

.participants ul {
  list-style: none;
  padding: 0;
}

.participants li {
  padding: 5px 0;
}

#participantVideos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.participant-video {
  width: 200px;
  height: 150px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.participant-video video {
  width: 100%;
  height: 100%;
}
```

These styles ensure that the participant videos are displayed in a grid layout, making it easy to see all connected participants.

#### JavaScript for Real-Time Updates

Now, let's update the `app.js` file to handle real-time updates and display participant videos.

```javascript title="JavaScript"
// public/app.js

// Existing code...

const participantVideos = document.getElementById('participantVideos');

// Function to add a participant video
function addParticipantVideo(peerId) {
  const participantVideoContainer = document.createElement('div');
  participantVideoContainer.className = 'participant-video';
  participantVideoContainer.id = `video-${peerId}`;
  
  const videoElement = document.createElement('video');
  videoElement.autoplay = true;
  videoElement.controls = true;
  participantVideoContainer.appendChild(videoElement);
  
  participantVideos.appendChild(participantVideoContainer);
  
  return videoElement;
}

// Example function to simulate adding participant videos
function simulateParticipants() {
  const peers = ['Peer 1', 'Peer 2', 'Peer 3'];
  peers.forEach((peer, index) => {
    const videoElement = addParticipantVideo(peer);
    // For demonstration, we'll use the same video source for all participants
    videoElement.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
  });
}

// Call simulateParticipants for demonstration purposes
simulateParticipants();

// Function to join a room
function joinRoom(roomName) {
  joinScreen.style.display = 'none';
  videoScreen.style.display = 'block';
  console.log(`Joined room: ${roomName}`);

  // Add the torrent and stream the video
  client.add(torrentId, (torrent) => {
    const file = torrent.files.find(file => file.name.endsWith('.mp4'));
    file.renderTo(videoPlayer);

    playPauseBtn.addEventListener('click', () => {
      if (videoPlayer.paused) {
        videoPlayer.play();
        playPauseBtn.textContent = 'Pause';
      } else {
        videoPlayer.pause();
        playPauseBtn.textContent = 'Play';
      }
    });

    fullScreenBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        if (videoPlayer.requestFullscreen) {
          videoPlayer.requestFullscreen();
        } else if (videoPlayer.mozRequestFullScreen) { /* Firefox */
          videoPlayer.mozRequestFullScreen();
        } else if (videoPlayer.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
          videoPlayer.webkitRequestFullscreen();
        } else if (videoPlayer.msRequestFullscreen) { /* IE/Edge */
          videoPlayer.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { /* Firefox */
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE/Edge */
          document.msExitFullscreen();
        }
      }
    });
  });

  // Handle participants (for demonstration purposes)
  const peers = ['Peer 1', 'Peer 2', 'Peer 3'];
  peers.forEach(peer => {
    const li = document.createElement('li');
    li.textContent = peer;
    participantsList.appendChild(li);
  });
}

// Function to handle new participant joining
function handleNewParticipant(peerId) {
  const videoElement = addParticipantVideo(peerId);
  // Assume we get a stream from the peer
  // For demonstration, we'll use a sample video source
  videoElement.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
}

// Example usage of handleNewParticipant
handleNewParticipant('Peer 4');
```

This script adds a function `addParticipantVideo` to create and display a new video element for each participant. The `simulateParticipants` function is a placeholder to demonstrate adding participant videos. The `joinRoom` function handles joining a room and initializes the WebTorrent client. The `handleNewParticipant` function simulates adding a new participant video.

By implementing these changes, you now have a participant view that displays videos for all connected participants. This enhances the collaborative aspect of your WebTorrent WebRTC application by allowing users to see and manage multiple video streams in real-time.

In the next section, we will focus on running and testing the complete application to ensure everything works as expected.

## Step 6: Run Your Code Now

In this section, we'll focus on running and testing your complete WebTorrent WebRTC application to ensure everything works as expected. We'll cover local testing, debugging common issues, and best practices for deploying your application.

### Testing the Application

Before deploying your application, it's essential to test it locally to ensure all functionalities work correctly. Follow these steps to run your application:

#### Start the Node.js Server
Ensure you are in your project directory and start the Node.js server using the following command:

```bash title="bash"
   node index.js
```

You should see a message indicating that the server is running on port 3000:

```bash title="bash"
   Server running on port 3000
```

#### Open the Application in Your Browser
Open your browser and navigate to `http://localhost:3000`. You should see the join screen where you can enter a room name.

#### Join a Room
Enter a room name and click the "Join" button. This action should switch to the video screen, start streaming the video, and display the participant view.

### Debugging Common Issues
Here are some common issues you might encounter and how to resolve them:

#### Server Not Starting
- Ensure you have Node.js and npm installed.
- Check for syntax errors in your `index.js` or other JavaScript files.
- Ensure all necessary dependencies are installed by running `npm install`.

#### Video Not Streaming
- Verify the torrent file or magnet link is correct and accessible.
- Check for errors in the browser console and server logs.
- Ensure your HTML and JavaScript files are correctly linked.

#### Participants Not Displaying
- Ensure the participant view is correctly implemented and styled.
- Check for errors in the JavaScript logic handling participant connections.
- Simulate participants correctly by calling the `simulateParticipants` function.

### Deploying the Application

**Deployment Options for Node.js Applications**
Once you've tested your application locally, you can deploy it to a live environment. Here are some common deployment options for Node.js applications:

#### Heroku
- Install the Heroku CLI and log in.
- Create a new Heroku app and deploy your code using Git.
- Configure environment variables and scale your application.

#### Vercel
- Sign up for a Vercel account and link your Git repository.
- Deploy your Node.js application with automatic builds and deployments.
- Configure custom domains and environment variables.

#### DigitalOcean
- Create a Droplet (virtual private server) and configure your server environment.
- Deploy your Node.js application manually or using a CI/CD pipeline.
- Manage your server and scale resources as needed.

#### Best Practices for Production Deployment
- **Security**: Ensure your application is secure by implementing HTTPS, sanitizing user inputs, and using secure storage for sensitive data.
- **Performance**: Optimize your application for performance by using a CDN for static assets, enabling caching, and monitoring server load.
- **Scalability**: Design your application to scale by using microservices, load balancing, and containerization (e.g., Docker).

## Conclusion 
In this comprehensive guide, we've explored the process of creating a video streaming application using WebTorrent and WebRTC with JS/Node.js. We've covered everything from setting up the development environment and installing the necessary libraries to implementing essential features like video controls and participant views. By leveraging the strengths of both WebTorrent and WebRTC, you can build a robust, decentralized video streaming application that is efficient, scalable, and resilient.

Discover how to build a video streaming app using WebTorrent and WebRTC with Node.js. Follow this guide to create a powerful, real-time streaming application.

How to Build Rocket.Chat WebRTC App?

Building Video Streaming App using WebTorrent WebRTC with NodeJS

WebTorrent WebRTC

## Step 5: Implement Participant View

In this step, we will implement the participant view, where video streams of all participants in the call will be displayed. This involves dynamically creating video elements and managing multiple video streams.

### Displaying Participants

#### [a] HTML for Participant View

The basic HTML structure for the participant view has already been outlined. Here’s a reminder of what it looks like:

```html title="HTML"

<div id="participant-view" style="display:none;"></div>
```

#### [b] CSS for Participant View

Add the following CSS to `styles.css` to style the participant view:

```css title="CSS"
/* styles.css */
#participant-view {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

#participant-view video {
    width: 200px;
    height: 150px;
    background-color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
}
```

#### [c] JavaScript for Adding Participants

Add the following JavaScript to `script.js` to dynamically add video elements for participants:

```javascript title="JavaScript"
// script.js

// Function to add participant view
function addParticipant(stream) {
    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    videoElement.playsInline = true;
    videoElement.controls = false;
    document.getElementById('participant-view').appendChild(videoElement);
}

// Example of how to use addParticipant function
// This would be called when a new participant joins the call
const sampleStream = new MediaStream(); // Replace with actual MediaStream
addParticipant(sampleStream);
```

### Explanation

1. **HTML**: The participant view section is a container where video elements will be dynamically added.
2. **CSS**: Styles the video elements within the participant view to be visually appealing and uniform. Each video element is given a set size and styled to look like a video tile.
3. **JavaScript**: The `addParticipant` function creates a new video element for each participant's video stream. It sets the video source to the participant's media stream and appends the video element to the participant view container. The sample usage demonstrates how to call this function when a new participant joins the call.

With the participant view implemented, the application can now display video streams for all participants in the call. In the next part, we will cover the final step to run your code and ensure everything is working correctly.

## Step 6: Run Your Code Now
In this final step, we will run the Mattermost WebRTC application to ensure that all components work together seamlessly. We’ll start the server and the client, test the video call functionality, and troubleshoot any issues that may arise.

### Starting the Server

#### Navigate to the Project Directory
  
```bash title="bash"
   cd mattermost-server
```

#### Run the Go Server

```bash title="bash"
   go run main.go
```

### Starting the Client

#### Navigate to the Webapp Directory

```bash title="bash"
   cd webapp
```

#### Run the Web Application

```bash title="bash"
   npm start
```

### Testing and Debugging

1. **Open Your Browser**:
   - Open your web browser and navigate to `http://localhost:8080`.

2. **Join the Call**:
   - Enter your name in the Join Screen and click the "Join" button.
   - Ensure the controls and participant view are displayed correctly.

3. **Test Video and Audio**:
   - Test the mute/unmute and start/stop video functionalities.
   - Ensure video streams are correctly displayed in the participant view.

#### Troubleshooting Tips

**Check Console for Errors**: Open the browser's developer console to check for any error messages.
  
**Verify Dependencies**: Ensure all dependencies are installed correctly and versions are compatible.

## Conclusion

Congratulations! You've successfully built a basic Mattermost WebRTC application. This guide walked you through setting up the development environment, creating the main components, and implementing essential functionalities such as the join screen, user controls, and participant view. By running your code, you now have a fully functional video conferencing tool integrated into the Mattermost platform. This setup can be further customized and scaled according to your specific requirements, making it a versatile solution for team collaboration and communication.

Learn how to build a Mattermost WebRTC application from scratch using Go (Pion) and JavaScript. This step-by-step guide covers setup, coding, and implementation.

## Introduction to Mattermost WebRTC Technology

### What is Mattermost WebRTC?

Mattermost WebRTC is a powerful extension of the Mattermost platform, leveraging the capabilities of Web Real-Time Communication (WebRTC) to provide robust, real-time video and audio communication features. Mattermost, a widely recognized open-source collaboration tool, facilitates team collaboration through various channels like messaging, file sharing, and integrations with other tools. By incorporating WebRTC, Mattermost enhances its communication suite, enabling users to engage in live video conferencing directly within the platform.

### Why Use Mattermost WebRTC?

The integration of WebRTC into Mattermost offers numerous advantages for teams seeking efficient and secure communication solutions. Here are some key benefits:

#### High-Quality Video Conferencing
Mattermost WebRTC ensures high-definition video and audio quality, making virtual meetings more effective and engaging. It supports multiple participants, allowing teams to conduct seamless virtual meetings and brainstorming sessions.

#### Open-Source Flexibility
Being an open-source solution, Mattermost WebRTC allows developers to customize and extend the platform according to their specific needs. This flexibility ensures that organizations can tailor their communication tools to fit their unique workflows and requirements.

#### Enhanced Security
Security is a top priority for Mattermost. With WebRTC, all communications are encrypted, ensuring that sensitive information shared during video calls remains secure. This is particularly crucial for industries that handle confidential data, such as healthcare, finance, and legal sectors.

#### Seamless Integration
Mattermost WebRTC can be easily integrated with other tools and services used by teams. This integration capability enhances productivity by allowing teams to access all necessary tools within a single platform, reducing the need to switch between different applications.

#### Cost-Effective Solution
By utilizing open-source technologies, Mattermost WebRTC provides a cost-effective solution for organizations looking to implement high-quality video communication without the hefty price tag associated with proprietary software.

## Getting Started with the Code

### Create a New Mattermost WebRTC App

To begin developing a Mattermost WebRTC application, you'll need to set up your development environment and understand the project structure. Here’s how to get started:

**Setting Up the Development Environment**

#### [a] Install Go and Node.js
   - Go to the [official Go website](https://golang.org/dl/) and download the latest version of Go.
   - Similarly, download and install Node.js from the [Node.js website](https://nodejs.org/).

#### [b] Clone the Mattermost Repository
Open your terminal and clone the Mattermost repository from GitHub using the following command:

```bash title="bash"
     git clone https://github.com/mattermost/mattermost-server.git
```

### Install Required Dependencies

After cloning the repository, navigate to the project directory and install the necessary dependencies.

#### [a] Navigate to the Project Directory

```bash title="bash"
   cd mattermost-server
```

#### [b] Install Go Dependencies
Use Go modules to install dependencies:

```bash title="bash"
     go mod tidy
```

#### [c] Install JavaScript Libraries
Navigate to the webapp directory and install npm packages:

```bash title="bash"
     cd webapp
     npm install
```

### Structure of the Project

Understanding the directory layout and key files in the Mattermost project is essential for efficient development.

#### Directory Layout and Key Files

**Main Directories**:
  - `server/`: Contains the backend code, including the WebRTC server implementation.
  - `webapp/`: Contains the frontend code for the Mattermost web application.

**Important Files**:
  - `main.go`: Entry point for the Go server.
  - `package.json`: Manages JavaScript dependencies.
  - `config.json`: Configuration file for Mattermost settings.

### App Architecture
![mattermost-webrtc](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Mattermost_Web_RTC_work_6da7ea9734.png)
The Mattermost WebRTC application architecture involves multiple components interacting seamlessly to provide real-time communication.

#### Overview of the App Architecture

- **Backend (Go)**:
  - Manages WebRTC signaling and server-side logic.
  - Uses the Pion library for WebRTC functionalities.

- **Frontend (JavaScript)**:
  - Handles user interface and interactions.
  - Communicates with the backend via WebSocket and REST APIs.

By following this setup, you’re now ready to dive deeper into the specific implementation details of Mattermost WebRTC. In the next steps, we will guide you through coding the main functionalities, starting with setting up the main Go file.

## Step 1: Get Started with `Main.go`
In this step, we'll set up the main Go file (`main.go`) to initialize the WebRTC server and handle the necessary imports. This file serves as the entry point for the backend part of our Mattermost WebRTC application.

### Setting Up the Main Go File

#### [a] Importing Necessary Packages
First, let's import the required packages. We'll use the Pion library, which is a popular Go library for WebRTC.

```go title="Go"
package main

import (
    "fmt"
    "log"
    "net/http"
    "github.com/pion/webrtc/v3"
)
```

#### [b] Initializing the WebRTC Server

Next, we'll set up the WebRTC server. This involves creating a new WebRTC configuration and setting up a simple HTTP server to serve our WebRTC signaling messages.

```go title="Go"
func main() {
    fmt.Println("Starting WebRTC Server...")

    // WebRTC configuration
    config := webrtc.Configuration{
        ICEServers: []webrtc.ICEServer{
            {
                URLs: []string{"stun:stun.l.google.com:19302"},
            },
        },
    }

    // Set up an HTTP server for signaling
    http.HandleFunc("/signal", func(w http.ResponseWriter, r *http.Request) {
        // Handle WebRTC signaling messages
    })

    // Start the HTTP server
    log.Fatal(http.ListenAndServe(":8080", nil))
}
```

### Code Snippet Explanation

1. **Imports**: We import essential packages, including `fmt` for printing messages, `log` for logging errors, `net/http` for setting up the HTTP server, and `github.com/pion/webrtc/v3` for WebRTC functionalities.
2. **WebRTC Configuration**: We configure the WebRTC server with ICE (Interactive Connectivity Establishment) servers. In this example, we're using Google's public STUN server.
3. **HTTP Server for Signaling**: We set up a simple HTTP server that listens on port 8080. The `/signal` endpoint will handle the WebRTC signaling messages.

With the main Go file set up, we have a basic WebRTC server ready to handle signaling. In the next part, we’ll wireframe all the components, focusing on the frontend to complement our backend setup.

## Step 2: Wireframe All the Components

In this step, we will design the user interface (UI) and user experience (UX) for the Mattermost WebRTC application. Wireframing is a crucial step in the development process as it helps visualize the layout and structure of the application before diving into the actual coding.

### Designing the UI/UX

#### Main Components
The Mattermost WebRTC application will consist of three main components:
1. **Join Screen**: The interface where users can enter their name and join the video call.
2. **Controls**: Buttons and options to control the video call (e.g., mute/unmute, start/stop video).
3. **Participant View**: The area where video streams of all participants will be displayed.

### Tools for Wireframing

You can use various tools to create wireframes, such as Figma, Sketch, or even simple pen and paper. For this example, we'll outline the wireframe using HTML structure.

####[a]  HTML Structure for the Basic Layout

Let's start with the HTML structure that represents the basic layout of our application.

```html title="HTML"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mattermost WebRTC</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div id="join-screen">
        <input type="text" id="username" placeholder="Enter your name">
        <button id="join-btn">Join</button>
    </div>

    
    <div id="controls" style="display:none;">
        <button id="mute-btn">Mute</button>
        <button id="video-btn">Stop Video</button>
    </div>

    
    <div id="participant-view" style="display:none;"></div>

    <script src="script.js"></script>
</body>
</html>
```

### Explanation

1. **Join Screen**: Contains an input field for the user to enter their name and a button to join the call.
2. **Controls**: Contains buttons for muting/unmuting the microphone and starting/stopping the video. Initially hidden, will be shown once the user joins the call.
3. **Participant View**: The area where video streams will be displayed. Initially hidden, will be shown once the user joins the call.

### Wireframe Overview

By sketching out this basic structure, we ensure that we have a clear vision of how users will interact with our application. This layout provides a foundation upon which we can build and expand in the following steps. In the next part, we will implement the join screen functionality, allowing users to enter their name and join a video call.

## Step 3: Implement Join Screen 
In this step, we will implement the Join Screen, allowing users to enter their names and join the video call. This involves creating the necessary HTML, CSS, and JavaScript to handle user input and interaction.

### Creating the Join Screen Interface

#### [a] HTML for the Join Screen

We have already outlined the basic HTML structure for the Join Screen in the previous part. Now, let’s add the necessary CSS and JavaScript to bring it to life.

```html title="HTML"

<div id="join-screen">
    <input type="text" id="username" placeholder="Enter your name">
    <button id="join-btn">Join</button>
</div>
```

#### [b] CSS for the Join Screen

Add the following CSS to `styles.css` to style the Join Screen:

```css title="CSS"
/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#join-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#username {
    margin-bottom: 10px;
    padding: 10px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#join-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#join-btn:hover {
    background-color: #0056b3;
}
```

#### [c] JavaScript for User Interaction

Add the following JavaScript to `script.js` to handle the join button click event:

```javascript title="JavaScript"
// script.js
document.getElementById('join-btn').addEventListener('click', () => {
    const username = document.getElementById('username').value.trim();
    if (username) {
        // Proceed to join the video call
        document.getElementById('join-screen').style.display = 'none';
        document.getElementById('controls').style.display = 'block';
        document.getElementById('participant-view').style.display = 'block';
        // Initialize WebRTC connection here
        console.log(`Joining as ${username}`);
    } else {
        alert('Please enter your name');
    }
});
```

### Explanation

1. **HTML**: The join screen consists of an input field for the username and a join button.
2. **CSS**: Styles the join screen to be centered on the page with a clean, simple design.
3. **JavaScript**: Handles the join button click event. It retrieves the username, hides the join screen, shows the controls and participant view, and logs the username.

With the Join Screen implemented, users can now enter their names and proceed to join the video call. In the next part, we will implement the controls to manage the video and audio functionalities during the call.

## Step 4: Implement Controls

In this step, we will develop the controls for managing the video call, including functionalities like muting/unmuting the microphone and starting/stopping the video. These controls will enhance the user experience by providing essential features to manage their video and audio during the call.

### Developing User Controls

#### [a] HTML for Controls

We have already outlined the basic HTML structure for the controls. Here’s a reminder of what it looks like:

```html title="HTML"

<div id="controls" style="display:none;">
    <button id="mute-btn">Mute</button>
    <button id="video-btn">Stop Video</button>
</div>
```

#### [b] CSS for Controls

Add the following CSS to `styles.css` to style the control buttons:

```css title="CSS"
/* styles.css */
#controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

#controls button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#controls button:hover {
    background-color: #0056b3;
}
```

#### JavaScript for User Controls

Add the following JavaScript to `script.js` to handle the mute/unmute and start/stop video functionalities:

```javascript title="JavaScript"
// script.js
let isMuted = false;
let isVideoStopped = false;

document.getElementById('mute-btn').addEventListener('click', () => {
    isMuted = !isMuted;
    if (isMuted) {
        document.getElementById('mute-btn').innerText = 'Unmute';
        // Code to mute the microphone
    } else {
        document.getElementById('mute-btn').innerText = 'Mute';
        // Code to unmute the microphone
    }
    console.log(`Microphone ${isMuted ? 'muted' : 'unmuted'}`);
});

document.getElementById('video-btn').addEventListener('click', () => {
    isVideoStopped = !isVideoStopped;
    if (isVideoStopped) {
        document.getElementById('video-btn').innerText = 'Start Video';
        // Code to stop the video
    } else {
        document.getElementById('video-btn').innerText = 'Stop Video';
        // Code to start the video
    }
    console.log(`Video ${isVideoStopped ? 'stopped' : 'started'}`);
});
```

### Explanation

1. **HTML**: The controls section contains buttons for muting/unmuting the microphone and starting/stopping the video.
2. **CSS**: Styles the control buttons to be fixed at the bottom of the screen with a visually appealing design.
3. **JavaScript**: Handles the click events for the control buttons. It toggles the state of the microphone and video, updates the button text accordingly, and logs the current state.

With the controls implemented, users can now manage their audio and video during the call. In the next part, we will implement the participant view to display the video streams of all participants.

How to Build Mattermost WebRTC App with JavaScript?

Mattermost WebRTC

## Step 5: Implement Participant View

In this step, we will create the participant view, which displays connected devices in real-time. This involves setting up the necessary HTML structure and adding JavaScript to manage participant connections and updates.

### Creating Participant Views

The participant view will allow users to see which devices are connected and available for file sharing. We'll update the HTML structure and implement the required JavaScript logic to manage this feature.

#### [a] Displaying Connected Participants
Update the `index.html` file to include a section for displaying connected participants:

```html title="HTML"
   
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>SnapDrop - Share Files Like AirDrop</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <header>
           <h1>SnapDrop</h1>
           <p>Share files like AirDrop with WebRTC</p>
       </header>
       <main>
           <section class="join-screen">
               <input type="text" id="usernameInput" placeholder="Enter your username">
               <button id="joinButton">Join</button>
           </section>
           <section class="file-input-section">
               <input type="file" id="fileInput" accept="*/*">
               <button id="sendButton">Send File</button>
           </section>
           <section class="participants-section">
               <h2>Connected Devices</h2>
               <div id="participantsList"></div>
           </section>
       </main>
       <script src="main.js"></script>
   </body>
   </html>
```

This HTML structure includes:
   - A `div` element with the id `participantsList` to display connected devices.

#### [b] Managing Participant Connections
Update the `main.js` file to include logic for managing participant connections and updating the UI in real-time.

```javascript title="JavaScript"
   // main.js

   document.addEventListener('DOMContentLoaded', () => {
       // Existing event listeners
       document.getElementById('fileInput').addEventListener('change', handleFileSelect);
       document.getElementById('sendButton').addEventListener('click', sendFile);
       document.getElementById('joinButton').addEventListener('click', joinNetwork);

       let selectedFile;
       let dataChannel;
       let peerConnection;
       const participantsList = document.getElementById('participantsList');

       // Function to handle file selection
       function handleFileSelect(event) {
           selectedFile = event.target.files[0];
           if (selectedFile) {
               console.log('Selected file: ', selectedFile.name);
               // Prepare the file for sending
           }
       }

       // Function to send the selected file
       function sendFile() {
           if (selectedFile && dataChannel) {
               const reader = new FileReader();
               reader.onload = (event) => {
                   const arrayBuffer = event.target.result;
                   dataChannel.send(arrayBuffer);
                   console.log('Sending file: ', selectedFile.name);
               };
               reader.readAsArrayBuffer(selectedFile);
           } else {
               console.log('No file selected or data channel is not open.');
           }
       }

       // Function to join the WebRTC network
       function joinNetwork() {
           const username = document.getElementById('usernameInput').value;
           if (username) {
               console.log('Joining network as: ', username);
               // Initialize WebRTC connection
               initializeConnection(username);
           } else {
               alert('Please enter a username.');
           }
       }

       // Function to initialize WebRTC connection
       function initializeConnection(username) {
           // Configuration for the peer connection
           const configuration = {
               iceServers: [
                   {
                       urls: 'stun:stun.l.google.com:19302' // Google's public STUN server
                   }
               ]
           };

           peerConnection = new RTCPeerConnection(configuration);

           // Handle ICE candidate events
           peerConnection.onicecandidate = (event) => {
               if (event.candidate) {
                   console.log('New ICE candidate: ', event.candidate);
                   // Send the candidate to the remote peer
               }
           };

           // Handle the connection state change
           peerConnection.onconnectionstatechange = (event) => {
               switch (peerConnection.connectionState) {
                   case 'connected':
                       console.log('Peers connected!');
                       break;
                   case 'disconnected':
                   case 'failed':
                       console.error('Peer connection failed.');
                       break;
                   case 'closed':
                       console.log('Peer connection closed.');
                       break;
               }
           };

           // Set up data channel
           dataChannel = peerConnection.createDataChannel('fileTransfer');

           dataChannel.onopen = () => {
               console.log('Data channel is open');
           };

           dataChannel.onclose = () => {
               console.log('Data channel is closed');
           };

           // Handle incoming messages
           dataChannel.onmessage = (event) => {
               console.log('Received message: ', event.data);
               // Handle the received file or data
           };

           // Simulate participant connection for demonstration purposes
           addParticipant(username);
       }

       // Function to add a participant to the list
       function addParticipant(username) {
           const participantItem = document.createElement('div');
           participantItem.classList.add('participant');
           participantItem.innerText = username;
           participantsList.appendChild(participantItem);
           console.log('Participant added: ', username);
       }
   });
```

This JavaScript code:
   - Manages the list of connected participants by adding them to the `participantsList` element.
   - Simulates adding a participant for demonstration purposes.

#### [c] Updating the UI in Real-Time
To update the UI in real-time as participants join or leave, you would typically integrate with a signaling server. For simplicity, this example simulates participant management.

Here's how you can modify the `initializeConnection` function to dynamically update the participant list:

```javascript title="JavaScript"
   // Function to initialize WebRTC connection
   function initializeConnection(username) {
       // Configuration for the peer connection
       const configuration = {
           iceServers: [
               {
                   urls: 'stun:stun.l.google.com:19302' // Google's public STUN server
               }
           ]
       };

       peerConnection = new RTCPeerConnection(configuration);

       // Handle ICE candidate events
       peerConnection.onicecandidate = (event) => {
           if (event.candidate) {
               console.log('New ICE candidate: ', event.candidate);
               // Send the candidate to the remote peer
           }
       };

       // Handle the connection state change
       peerConnection.onconnectionstatechange = (event) => {
           switch (peerConnection.connectionState) {
               case 'connected':
                   console.log('Peers connected!');
                   addParticipant(username);
                   break;
               case 'disconnected':
               case 'failed':
                   console.error('Peer connection failed.');
                   removeParticipant(username);
                   break;
               case 'closed':
                   console.log('Peer connection closed.');
                   removeParticipant(username);
                   break;
           }
       };

       // Set up data channel
       dataChannel = peerConnection.createDataChannel('fileTransfer');

       dataChannel.onopen = () => {
           console.log('Data channel is open');
       };

       dataChannel.onclose = () => {
           console.log('Data channel is closed');
       };

       // Handle incoming messages
       dataChannel.onmessage = (event) => {
           console.log('Received message: ', event.data);
           // Handle the received file or data
       };

       // Simulate participant connection for demonstration purposes
       addParticipant(username);
   }

   // Function to remove a participant from the list
   function removeParticipant(username) {
       const participants = document.querySelectorAll('.participant');
       participants.forEach(participant => {
           if (participant.innerText === username) {
               participantsList.removeChild(participant);
               console.log('Participant removed: ', username);
           }
       });
   }
```

This code dynamically adds or removes participants from the list based on the connection state changes.

By completing this step, you have successfully implemented the participant view for the SnapDrop application. Users can now see which devices are connected and ready for file sharing. In the next step, we will finalize the application by ensuring it runs smoothly and handling any remaining issues.

## Step 6: Run Your Code Now

In this final step, we will ensure that the SnapDrop application runs smoothly by performing final setup steps, testing the application locally, debugging common issues, and providing tips for deployment as a Progressive Web App (PWA).

### Final Setup Steps

Before running the application, make sure all dependencies are installed and the project is correctly set up. If you haven't already done so, install the required dependencies:

```bash title="bash"
npm install
```

Ensure that your project structure looks like this:

```
snapdrop/
│
├── public/
│   ├── index.html
│   ├── main.js
│   └── styles.css
├── node_modules/
├── package.json
└── server.js
```

### Running the Application Locally

To run the application locally, you need to start the server. Open your terminal, navigate to the project directory, and execute the following command:

```bash title="bash"
node server.js
```

If you don't have a `server.js` file, you can create a simple Express server to serve your static files. Here’s an example `server.js` file:

```javascript title="JavaScript"
// server.js

const express = require('express');
const path = require('path');
const app = express();

const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});
```

After creating the `server.js` file, run the server again:

```bash
node server.js
```

Open your web browser and navigate to `http://localhost:3000` to see the SnapDrop application in action.

### Debugging Common Issues

Here are some common issues you might encounter and tips for debugging them:

#### WebRTC Connection Issues
   - **Check for Browser Compatibility:** Ensure that your browser supports WebRTC. Most modern browsers do, but you can check compatibility [here](https://caniuse.com/#feat=rtcpeerconnection).
   - **ICE Candidate Gathering:** Ensure that ICE candidates are being gathered and sent correctly. Check the browser console for any errors related to ICE candidates.

#### Data Channel Issues
   - **Data Channel Not Opening:** Ensure that the data channel is set up correctly and that both peers are accepting the data channel. Check for `onopen` and `onclose` events in the console.
   - **Data Transfer Problems:** Verify that the file is being read correctly and that the `ArrayBuffer` is sent through the data channel. Use `console.log` to check the file content before sending.

#### UI Issues
   - **Participants Not Displayed:** Ensure that participants are being added to the DOM correctly. Check the `addParticipant` function and make sure it updates the `participantsList` element.

### Deployment Tips for a PWA

To deploy your SnapDrop application as a Progressive Web App (PWA), follow these additional steps:

#### [a] Add a Web App Manifest
Create a `manifest.json` file in the `public` directory:

```json title="json"
   {
       "name": "SnapDrop",
       "short_name": "SnapDrop",
       "start_url": "/",
       "display": "standalone",
       "background_color": "#ffffff",
       "theme_color": "#4CAF50",
       "icons": [
           {
               "src": "icons/icon-192x192.png",
               "sizes": "192x192",
               "type": "image/png"
           },
           {
               "src": "icons/icon-512x512.png",
               "sizes": "512x512",
               "type": "image/png"
           }
       ]
   }
```

Link the manifest file in the `index.html`:

```html title="HTML"
   <link rel="manifest" href="manifest.json">
```

#### [b]  Register a Service Worker
Create a `service-worker.js` file in the `public` directory:

```javascript title="JavaScript"
   // public/service-worker.js

   self.addEventListener('install', event => {
       event.waitUntil(
           caches.open('snapdrop-v1').then(cache => {
               return cache.addAll([
                   '/',
                   '/index.html',
                   '/styles.css',
                   '/main.js',
                   '/manifest.json',
                   '/icons/icon-192x192.png',
                   '/icons/icon-512x512.png'
               ]);
           })
       );
   });

   self.addEventListener('fetch', event => {
       event.respondWith(
           caches.match(event.request).then(response => {
               return response || fetch(event.request);
           })
       );
   });
```

Register the service worker in the `main.js`:

```javascript title="JavaScript"
   // main.js

   if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
           navigator.serviceWorker.register('/service-worker.js').then(registration => {
               console.log('ServiceWorker registration successful with scope: ', registration.scope);
           }, err => {
               console.log('ServiceWorker registration failed: ', err);
           });
       });
   }
```

#### [c] Deploy to a Hosting Service
Choose a hosting service like Netlify, Vercel, or GitHub Pages to deploy your PWA. Follow the hosting service's documentation for deploying static sites.

By completing these steps, you have successfully set up and run the SnapDrop application. You can now share files across devices seamlessly. Additionally, deploying the app as a PWA allows users to install it on their devices for a native-like experience.

## Conclusion

This comprehensive guide has covered everything from setting up a SnapDrop-like application using WebRTC to deploying it as a PWA. With the knowledge gained, you can create a robust, cross-platform file-sharing tool that leverages modern web technologies to provide a seamless user experience. Whether for personal use or as part of a larger project, SnapDrop's implementation demonstrates the power and versatility of WebRTC in building real-time applications.

Learn how to create a SnapDrop-like file-sharing application using WebRTC and JavaScript. Follow our step-by-step guide to build a cross-platform file-sharing tool that works like AirDrop.

How to Build SnapDrop WebRTC App with JavaScript?

SnapDrop WebRTC

## Step 5: Implement Participant View

The participant view is an essential component of your messaging application, allowing users to see who else is in the chat. This section will guide you through implementing the participant view for your Tinode-based messaging application across JavaScript, Swift, Android, and Python.

### Creating the Participant View

Let's break down the implementation of the participant view for each platform.

### JavaScript (React)

#### [a] Create the Participant Component
First, create a new file named `Participants.js` in your `components` directory.

Add the following code to create the participant view:

```jsx title="JavaScript"
     import React, { useState, useEffect } from 'react';
     import Tinode from 'tinode-sdk';

     const Participants = ({ tinode }) => {
       const [participants, setParticipants] = useState([]);

       useEffect(() => {
         const topic = tinode.getTopic('general');
         topic.subscribe().then(() => {
           topic.onMetaDesc = (desc) => {
             setParticipants(desc.sub);
           };
         });
       }, [tinode]);

       return (
         <div className="participants-container">
           <h3>Participants</h3>
           <ul>
             {participants.map((participant, index) => (
               <li key={index}>{participant.user}</li>
             ))}
           </ul>
         </div>
       );
     };

     export default Participants;
```

#### [b] Styling the Component
Create a CSS file named `Participants.css` and add some basic styles:

```css title="CSS"
     .participants-container {
       border-left: 1px solid #ddd;
       padding: 10px;
     }

     .participants-container h3 {
       margin-top: 0;
     }

     .participants-container ul {
       list-style: none;
       padding: 0;
     }

     .participants-container li {
       padding: 5px 0;
     }
```

#### [c] Integrate the Component
In your main application file (e.g., `App.js`), import and use the `Participants` component alongside the `Chat` component:

```jsx title="JavaScript"
     import React, { useState } from 'react';
     import Join from './components/Join';
     import Chat from './components/Chat';
     import Participants from './components/Participants';

     const App = () => {
       const [tinode, setTinode] = useState(null);

       return (
         <div className="App">
           {!tinode ? (
             <Join onLogin={setTinode} />
           ) : (
             <div className="chat-container">
               <Chat tinode={tinode} />
               <Participants tinode={tinode} />
             </div>
           )}
         </div>
       );
     };

     export default App;
```

### Swift (iOS)

#### [a] Create the Participants View Controller
In your Xcode project, create a new Swift file named `ParticipantsViewController.swift`.

Add the following code to create the participant view:

```swift title="Swift"
     import UIKit
     import TinodeSDK

     class ParticipantsViewController: UIViewController, UITableViewDataSource {
       @IBOutlet weak var tableView: UITableView!

       var tinode: Tinode!
       var topic: DefaultComTopic!
       var participants: [Subscription<TheType>] = []

       override func viewDidLoad() {
         super.viewDidLoad()
         tableView.dataSource = self

         topic = tinode.getTopic(for: "general") as? DefaultComTopic
         topic.subscribe().then {
           self.topic.onMetaDesc = { desc in
             self.participants = desc.sub
             self.tableView.reloadData()
           }
         }
       }

       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return participants.count
       }

       func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = tableView.dequeueReusableCell(withIdentifier: "ParticipantCell", for: indexPath)
         cell.textLabel?.text = participants[indexPath.row].user
         return cell
       }
     }
```

#### [b] Design the Participants Screen in Interface Builder
   - Open `Main.storyboard`.
   - Add a `ViewController` and set its class to `ParticipantsViewController`.
   - Add a `UITableView` for displaying participants.
   - Connect the outlet to the `ParticipantsViewController`.

### Android

#### [a] Create the Participants Activity
In your Android Studio project, create a new Activity named `ParticipantsActivity.java`.

Add the following code to create the participant view:

```java title="Java"
     package com.example.chatapp;

     import android.os.Bundle;
     import androidx.appcompat.app.AppCompatActivity;
     import androidx.recyclerview.widget.LinearLayoutManager;
     import androidx.recyclerview.widget.RecyclerView;
     import java.util.ArrayList;
     import java.util.List;
     import co.tinode.tinodesdk.Tinode;
     import co.tinode.tinodesdk.model.Subscription;

     public class ParticipantsActivity extends AppCompatActivity {
         private Tinode tinode;
         private RecyclerView participantsRecyclerView;
         private ParticipantsAdapter adapter;
         private List<Subscription> participants;

         @Override
         protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_participants);

             tinode = (Tinode) getIntent().getSerializableExtra("tinode");
             participantsRecyclerView = findViewById(R.id.participantsRecyclerView);

             participants = new ArrayList<>();
             adapter = new ParticipantsAdapter(participants);
             participantsRecyclerView.setLayoutManager(new LinearLayoutManager(this));
             participantsRecyclerView.setAdapter(adapter);

             Tinode.Topic topic = tinode.getTopic("general");
             topic.subscribe().thenApply(ignored -> {
                 topic.onMetaDesc = desc -> {
                     participants.addAll(desc.sub);
                     runOnUiThread(() -> adapter.notifyDataSetChanged());
                 };
                 return null;
             }).exceptionally(e -> {
                 runOnUiThread(() -> Toast.makeText(ParticipantsActivity.this, "Subscription failed: " + e.getMessage(), Toast.LENGTH_SHORT).show());
                 return null;
             });
         }
     }
```

#### [b] Design the Participants Screen Layout
In `res/layout`, create a new XML layout file named `activity_participants.xml`:

```xml title="XML"
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/participantsRecyclerView"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>
     </LinearLayout>
```

#### [c] Create the Adapter for Participants
Create a new Java class named `ParticipantsAdapter.java`:

```java title="Java"
     package com.example.chatapp;

     import android.view.LayoutInflater;
     import android.view.View;
     import android.view.ViewGroup;
     import android.widget.TextView;
     import androidx.annotation.NonNull;
     import androidx.recyclerview.widget.RecyclerView;
     import java.util.List;
     import co.tinode.tinodesdk.model.Subscription;

     public class ParticipantsAdapter extends RecyclerView.Adapter<ParticipantsAdapter.ParticipantViewHolder> {
         private List<Subscription> participants;

         public ParticipantsAdapter(List<Subscription> participants) {
             this.participants = participants;
         }

         @NonNull
         @Override
         public ParticipantViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
             View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_participant, parent, false);
             return new ParticipantViewHolder(view);
         }

         @Override
         public void onBindViewHolder(@NonNull ParticipantViewHolder holder, int position) {
             Subscription participant = participants.get(position);
             holder.usernameTextView.setText(participant.user);
         }

         @Override
         public int getItemCount() {
             return participants.size();
         }

         public static class ParticipantViewHolder extends RecyclerView.ViewHolder {
             TextView usernameTextView;

             public ParticipantViewHolder(@NonNull View itemView) {
                 super(itemView);
                 usernameTextView = itemView.findViewById(R.id.usernameTextView);
             }
         }
     }
```

#### [d] Create the Item Layout for Participants
In `res/layout`, create a new XML layout file named `item_participant.xml`:

```xml title="XML"
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:padding="10dp">

         <TextView
             android:id="@+id/usernameTextView"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textSize="16sp"/>
     </LinearLayout>
```

### Python (Kivy)

#### [a] Create the Participants Screen
In your Kivy project, create a new file named `participants.kv` for the Kivy language:

```kvlang title="Kivy"
     BoxLayout:
         orientation: 'vertical'
         spacing: 10
         padding: 10

         Label:
             text: 'Participants'
             size_hint_y: None
             height: '40dp'

         ScrollView:
             BoxLayout:
                 id: participants_container
                 orientation: 'vertical'
                 size_hint_y: None
                 height: self.minimum_height
```

#### [b] Implement the Participants

 **Logic in Python**
In your main application file (e.g., `main.py`), add the following code:

```python title="Pyhton"
     from kivy.app import App
     from kivy.uix.boxlayout import BoxLayout
     from kivy.uix.label import Label
     from tinode import Tinode

     class ParticipantsScreen(BoxLayout):
         pass

     class ChatApp(App):
         def build(self):
             self.tinode = Tinode()
             self.tinode.connect('wss://api.tinode.co')
             self.topic = self.tinode.get_topic('general')
             self.topic.subscribe().then(self.on_subscribe)
             return ParticipantsScreen()

         def on_subscribe(self, *args):
             self.topic.on_meta_desc = self.receive_participants

         def receive_participants(self, desc):
             participants = desc['sub']
             for participant in participants:
                 self.add_participant_to_ui(participant['user'])

         def add_participant_to_ui(self, username):
             label = Label(text=username, size_hint_y=None, height=40)
             self.root.ids.participants_container.add_widget(label)

     if __name__ == '__main__':
         ChatApp().run()
```

By following these steps, you can implement the participant view for your Tinode-based messaging application on various platforms. This view will allow users to see who else is in the chat, enhancing the collaborative experience. In the next part, we will focus on running your code to test the full functionality of your application.

## Step 6: Run Your Code Now

After setting up the server, implementing the join screen, adding controls, and creating the participant view, it's time to run your Tinode-based messaging application and see it in action. This section provides instructions for running the application on different platforms and some debugging tips to ensure everything works smoothly.

### Running the Application

Let's go through the steps to run your application on each platform:

### JavaScript (React)

#### [a] Start the Development Server
Navigate to your project directory and run the following command to start the development server:

```sh title="sh"
     npm start
```
This command will compile your React application and open it in your default web browser.

#### [b] Test the Application
   - Open your browser and navigate to `http://localhost:3000` if it doesn't open automatically.
   - You should see the join screen where you can enter a username and password to log in.
   - After logging in, you will be directed to the chat screen where you can send messages and view participants.

### Swift (iOS)

#### Build and Run in Xcode
   - Open your project in Xcode.
   - Select your target device or simulator.
   - Click the "Run" button or press `Cmd + R` to build and run the application.

#### Test the Application
   - The app will launch on your selected device or simulator.
   - You should see the join screen where you can enter a username and password to log in.
   - After logging in, you will be directed to the chat screen where you can send messages and view participants.

### Android

#### Build and Run in Android Studio
   - Open your project in Android Studio.
   - Select your target device or emulator.
   - Click the "Run" button or press `Shift + F10` to build and run the application.

#### Test the Application
   - The app will launch on your selected device or emulator.
   - You should see the join screen where you can enter a username and password to log in.
   - After logging in, you will be directed to the chat screen where you can send messages and view participants.

### Python (Kivy)

#### Run the Application
Navigate to your project directory and run the following command:

```sh title="sh"
     python main.py
```
This command will start your Kivy application.

#### Test the Application
   - The app will open in a new window.
   - You should see the join screen where you can enter a username and password to log in.
   - After logging in, you will be directed to the chat screen where you can send messages and view participants.

### Debugging Tips

If you encounter any issues while running your application, here are some common debugging tips:

#### Check Console Logs
   - For JavaScript, open the browser's developer console to check for any error messages.
   - For Swift, check the Xcode console for logs.
   - For Android, use Logcat in Android Studio to view logs.
   - For Python, check the terminal output for any errors.

#### Verify Server Connectivity
   - Ensure that your Tinode server is running and accessible.
   - Check the server logs for any errors or connection issues.

#### Verify Configuration Settings
   - Ensure that all configuration settings (e.g., server URL, database connection) are correct and properly set up.

#### Review Code for Errors
   - Double-check your code for any syntax errors or logical mistakes.
   - Ensure that all necessary dependencies are installed and properly configured.

By following these steps, you can run and test your Tinode-based messaging application on various platforms. This completes the development process, and your application should now be fully functional. Next, we will provide a conclusion and address some frequently asked questions (FAQs) to wrap up the guide.

## Conclusion

Congratulations! You have successfully built a Tinode-based messaging application that leverages WebRTC for real-time communication. This guide covered the setup of the server, creation of the join screen, implementation of chat controls, and development of the participant view. By following these steps, you now have a functional messaging app that you can further customize and expand upon.

Learn how to build real-time messaging applications using Tinode and WebRTC. This comprehensive guide covers server setup, creating a join screen, adding controls, and displaying participants across various platforms including JavaScript, Swift, Android, and Python.

How to Build BigBlueButton WebRTC App?

How to Build Tinode WebRTC App with Go and JavaScript?

Tinode WebRTC

## Step 5: Implement Participant View

The participant view is a crucial component of the BigBlueButton application, allowing users to see who else is in the session and interact with them. This view provides essential functionality for managing participants, such as displaying participant names, roles, and statuses. In this section, we will implement the participant view using HTML, CSS, and JavaScript to dynamically manage participants.

### Participant View Design
The participant view should include:
- A list of all participants in the session.
- Indicators for participant roles (e.g., presenter, viewer).
- Status indicators (e.g., muted, unmuted).
- Options to manage participants (e.g., mute, remove).

#### [a] Coding the Participant View

First, update the `classroom.html` file to include a section for the participant list. Add the following code inside the `main` tag:

```html title="HTML"
<main>
    <div id="video-container"></div>
    <div id="participant-list">
        <h2>Participants</h2>
        <ul id="participants"></ul>
    </div>
    <div id="controls">
        <button id="mute-btn">Mute</button>
        <button id="video-btn">Start Video</button>
        <button id="screen-share-btn">Share Screen</button>
        <button id="end-session-btn">End Session</button>
    </div>
</main>
```

#### [b] Styling the Participant View

Next, update your `styles.css` file to style the participant list:

```css title="CSS"
#participant-list {
    margin-top: 1rem;
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#participant-list h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

#participants {
    list-style: none;
    padding: 0;
}

#participants li {
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.participant-name {
    font-weight: bold;
}

.participant-status {
    font-size: 0.9rem;
    color: #777;
}
```

#### [c] Integrating WebRTC for Participant Management

Now, let's add JavaScript code to manage the participant list dynamically. Update your `app.js` file with the following code:

```javascript title="JavaScript"
document.addEventListener('DOMContentLoaded', function() {
    const username = localStorage.getItem('username');
    document.getElementById('username-display').innerText = username;

    const muteBtn = document.getElementById('mute-btn');
    const videoBtn = document.getElementById('video-btn');
    const screenShareBtn = document.getElementById('screen-share-btn');
    const endSessionBtn = document.getElementById('end-session-btn');
    const participantsList = document.getElementById('participants');

    let localStream;
    let isAudioMuted = false;
    let isVideoStarted = false;
    let isScreenSharing = false;
    let participants = [];

    // Get user media (audio and video)
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(stream => {
            localStream = stream;
            const videoContainer = document.getElementById('video-container');
            const videoElement = document.createElement('video');
            videoElement.srcObject = localStream;
            videoElement.autoplay = true;
            videoElement.muted = true; // Mute local video playback
            videoContainer.appendChild(videoElement);

            // Add local participant to the list
            addParticipant({ name: username, id: 'local', role: 'presenter', status: 'unmuted' });
        })
        .catch(error => console.error('Error accessing media devices.', error));

    // Add participant to the list
    function addParticipant(participant) {
        participants.push(participant);
        updateParticipantsView();
    }

    // Update participant list view
    function updateParticipantsView() {
        participantsList.innerHTML = '';
        participants.forEach(participant => {
            const participantItem = document.createElement('li');
            participantItem.innerHTML = `
                <span class="participant-name">${participant.name}</span>
                <span class="participant-role">${participant.role}</span>
                <span class="participant-status">${participant.status}</span>
            `;
            participantsList.appendChild(participantItem);
        });
    }

    // Mute/Unmute Audio
    muteBtn.addEventListener('click', function() {
        isAudioMuted = !isAudioMuted;
        localStream.getAudioTracks()[0].enabled = !isAudioMuted;
        muteBtn.innerText = isAudioMuted ? 'Unmute' : 'Mute';
        updateLocalParticipantStatus(isAudioMuted ? 'muted' : 'unmuted');
    });

    // Start/Stop Video
    videoBtn.addEventListener('click', function() {
        isVideoStarted = !isVideoStarted;
        localStream.getVideoTracks()[0].enabled = isVideoStarted;
        videoBtn.innerText = isVideoStarted ? 'Stop Video' : 'Start Video';
    });

    // Share/Stop Screen
    screenShareBtn.addEventListener('click', function() {
        if (!isScreenSharing) {
            navigator.mediaDevices.getDisplayMedia({ video: true })
                .then(screenStream => {
                    const screenTrack = screenStream.getVideoTracks()[0];
                    localStream.removeTrack(localStream.getVideoTracks()[0]);
                    localStream.addTrack(screenTrack);
                    screenTrack.onended = function() {
                        localStream.removeTrack(screenTrack);
                        localStream.addTrack(screenStream.getVideoTracks()[0]);
                        isScreenSharing = false;
                        screenShareBtn.innerText = 'Share Screen';
                    };
                    isScreenSharing = true;
                    screenShareBtn.innerText = 'Stop Sharing';
                })
                .catch(error => console.error('Error sharing screen.', error));
        } else {
            const screenTrack = localStream.getVideoTracks()[0];
            screenTrack.stop();
            isScreenSharing = false;
            screenShareBtn.innerText = 'Share Screen';
        }
    });

    // End Session
    endSessionBtn.addEventListener('click', function() {
        localStream.getTracks().forEach(track => track.stop());
        window.location.href = 'join.html';
    });

    // Update local participant status
    function updateLocalParticipantStatus(status) {
        const localParticipant = participants.find(p => p.id === 'local');
        if (localParticipant) {
            localParticipant.status = status;
            updateParticipantsView();
        }
    }
});
```

In this script:
- **Managing Participants:** We maintain an array of participants and dynamically update the participant list whenever there are changes.
- **Adding Local Participant:** The local user is added to the participant list upon joining.
- **Updating Participant Status:** We update the local participant’s status when the mute/unmute button is toggled.

By implementing the participant view, users can see and manage the list of participants, enhancing the interaction and management capabilities within the virtual classroom. In the next section, we will focus on running and testing your BigBlueButton application to ensure all features work seamlessly.

## Step 6: Run Your Code Now

After implementing the various features of your BigBlueButton application, it's time to compile and run your code. This section will guide you through the final steps to ensure everything is set up correctly and your application is functioning as expected.

### Running the Application

To run your BigBlueButton application, follow these steps:

#### [a] Start the BigBlueButton Server
Ensure that your BigBlueButton server is up and running. If you haven't started it yet, use the following command:

```bash title="bash"
   sudo bbb-conf --start
```

#### [b] Open the Application in a Browser
Open your preferred web browser and navigate to the URL where your BigBlueButton application is hosted. If you are running it locally, this might be `http://localhost:3000`.

#### [c] Join the Classroom
You should see the join screen where you can enter your name and join the classroom. Enter your name and click the "Join" button to proceed to the main classroom interface.

### Testing the Setup
To ensure that your BigBlueButton application is functioning correctly, perform the following tests:

#### Test Audio and Video
   - Join the classroom and verify that your video is displayed in the video container.
   - Test the mute/unmute button to ensure your audio can be toggled on and off.
   - Verify that the video start/stop button works as expected.

#### Test Screen Sharing
   - Click the "Share Screen" button to initiate screen sharing.
   - Verify that your screen is being shared and displayed correctly.
   - Test stopping the screen share and ensure the video feed returns to your camera.

#### Test Participant View
   - Ensure that your name appears in the participant list.
   - Verify that the status (e.g., muted/unmuted) is updated correctly in the participant list when you toggle the mute button.

#### Test Session End
   - Click the "End Session" button and verify that all media tracks are stopped and you are redirected to the join screen.

By performing these tests, you can ensure that all the features of your BigBlueButton application are working as intended.

## Conclusion

In this article, we walked through the process of building a BigBlueButton application with WebRTC integration. We started by setting up the initial components, created a join screen, implemented various controls, and added a participant view. By following these steps, you have created a functional virtual classroom application that leverages the power of WebRTC for real-time communication.

BigBlueButton, with its robust features and open-source nature, provides an excellent platform for online learning and virtual classrooms. By customizing and extending its capabilities, you can create a tailored solution that meets the specific needs of your educational environment.

Learn how to set up and integrate BigBlueButton with WebRTC, Freeswitch, and Kurento to create a robust virtual classroom environment.

How to Build Tinode WebRTC App?

How to Build BigBlueButton WebRTC App with JavaScript?

BigBlueButton WebRTC

## Step 5: Implementing Participant View

Implementing the participant view involves displaying the list of active participants in the room and managing real-time updates as participants join or leave. This step will enhance the user interface and improve the user experience by providing visibility into who is currently connected.

### Implement Participant View

#### [a] Enhance the HTML for Participant List

First, update the HTML to include a section for displaying participants:

```html title="HTML"

<section id="participant-list">
    <h2>Participants</h2>
    <ul id="participants"></ul>
</section>
```

This HTML includes:
- A heading for the participant list.
- An unordered list to display the participants.

#### [b] Enhance CSS for Participant List

Next, add CSS to style the participant list:

```css title="CSS"
/* CSS: styles for participant-list section */
#participant-list {
    width: 100%;
    margin-top: 20px;
}

#participants {
    list-style: none;
    padding: 0;
    margin: 0;
}

#participants li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#participants li:last-child {
    border-bottom: none;
}
```

This CSS:
- Styles the participant list with padding and border.
- Ensures a clean separation between participant entries.

#### [c] JavaScript for Managing Participants

Implement the JavaScript to manage the participant list, including adding and removing participants as they join or leave the room:

```javascript title="JavaScript"
// JavaScript: participant-list functionality
let participants = [];

function addParticipant(participant) {
    if (!participants.includes(participant)) {
        participants.push(participant);
        updateParticipantList();
    }
}

function removeParticipant(participant) {
    participants = participants.filter(p => p !== participant);
    updateParticipantList();
}

function updateParticipantList() {
    const participantList = document.getElementById('participants');
    participantList.innerHTML = '';
    participants.forEach(participant => {
        const li = document.createElement('li');
        li.textContent = participant;
        participantList.appendChild(li);
    });
}

// Simulate adding/removing participants for demonstration
addParticipant('Alice');
addParticipant('Bob');
removeParticipant('Alice');
```

This JavaScript:
- Manages an array of participants.
- Updates the participant list UI whenever participants are added or removed.

#### [d] Integrating WebRTC with Participant View 

Integrate the participant view with WebRTC to handle real-time updates when participants join or leave:

```javascript title="JavaScript"
// JavaScript: WebRTC integration for managing participants
const signalingServerUrl = 'ws://localhost:3000';
const socket = new WebSocket(signalingServerUrl);

socket.onopen = () => {
    console.log('Connected to the signaling server');
};

socket.onmessage = message => {
    const data = JSON.parse(message.data);
    switch (data.type) {
        case 'new-participant':
            addParticipant(data.name);
            break;
        case 'participant-left':
            removeParticipant(data.name);
            break;
        default:
            break;
    }
};

function joinRoom(name) {
    socket.send(JSON.stringify({ type: 'new-participant', name }));
}

function leaveRoom(name) {
    socket.send(JSON.stringify({ type: 'participant-left', name }));
}

// Example usage
joinRoom('Alice');
leaveRoom('Alice');
```

This WebRTC integration:
- Establishes a WebSocket connection to the signaling server.
- Handles messages for adding and removing participants.
- Simulates joining and leaving a room for demonstration purposes.

#### [e] Signaling Server Update

Update the signaling server to handle participant join and leave messages:

```javascript title="JavaScript"
// server.js - Signaling server handling participants
const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

app.use(express.static('public'));

wss.on('connection', ws => {
    ws.on('message', message => {
        const data = JSON.parse(message);
        // Broadcast the message to all connected clients except the sender
        wss.clients.forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(JSON.stringify(data));
            }
        });
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT}`);
});
```

This server update:
- Relays participant join and leave messages to all connected clients.

With these steps, you've implemented the participant view for your ShareDrop application, allowing users to see real-time updates of who is connected to the room. This enhances the user experience by providing visibility into active participants. In the next section, we'll focus on running and testing your code to ensure everything works as expected.

## Step 6: Running Your Code

With all the components of your ShareDrop application implemented, it's time to run and test your code. This step ensures that all functionalities are working as expected, from creating and joining rooms to file sharing and displaying participants.

### Run Your Code Now

#### [a] Start the Development Server

Ensure that your development server is running. In your terminal, navigate to your project directory and start the server:

```bash title="bash"
npm start
```

This command starts the server as defined in your `server.js` file. By default, the server will run on `http://localhost:3000`. Open this URL in your web browser to access your ShareDrop application.

#### [b] Test Room Creation and Joining

Open multiple browser tabs or windows to simulate different users. Test the following functionalities:

**Creating a Room**:
  - Click the "Create Room" button.
  - Verify that a room code is generated and displayed in the feedback message.
  - Ensure that the participant list updates to include the user who created the room.

**Joining a Room**:
  - Enter the room code in the "Enter room code" input field.
  - Click the "Join Room" button.
  - Verify that the participant list updates to include the new user in all tabs/windows.

#### [c] Test File Sharing

Select and share files between users:

**Selecting Files**:
  - Click on the drop zone or the file input field to select files.
  - Verify that the drop zone text updates to reflect the selected files.

**Sharing Files**:
  - Click the "Share Files" button.
  - Verify that the files are sent to all connected participants.
  - Check the console logs to ensure that files are being sent and received correctly.

#### [d] Test Participant View
Verify that the participant list updates correctly as users join and leave:

**Joining Participants**:
  - Open additional browser tabs/windows and join the same room.
  - Ensure that all instances show the updated participant list with new users.

**Leaving Participants**:
  - Close a browser tab/window to simulate a participant leaving.
  - Verify that the participant list updates to remove the user who left.

### Debugging Common Issues

If you encounter any issues while running your application, here are some common problems and their solutions:

**WebSocket Connection Issues**:
  - Ensure that your signaling server is running and accessible at the correct URL.
  - Check the console for any error messages related to WebSocket connections.

**File Sharing Problems**:
  - Verify that the selected files are properly read and sent through the data channel.
  - Check the console for any errors related to file reading or WebRTC data channels.

**Participant List Not Updating**:
  - Ensure that participant join/leave messages are correctly handled by the WebSocket server and clients.
  - Check that the `addParticipant` and `removeParticipant` functions are being called as expected.

By following these steps, you should be able to run and test your ShareDrop application, ensuring that all functionalities are working smoothly. In the next section, we'll conclude the article and provide in-depth FAQs to address common questions and concerns.

## Conclusion

Congratulations! You've successfully built a ShareDrop application using WebRTC for seamless peer-to-peer file sharing. This article guided you through setting up the environment, creating the initial wireframe, implementing the join screen and controls, integrating WebRTC, managing participants, and finally running and testing your application. By leveraging WebRTC, you’ve created a powerful and efficient file-sharing tool that works across various devices and platforms.

Learn how to use ShareDrop with WebRTC to create a seamless file-sharing application like AirDrop.

How to Build WebWormHole WebRTC App?

How to Build ShareDrop WebRTC App with JavaScript?

ShareDrop WebRTC

## Step 5: Running the Complete Application

### Compiling and Running the Application

After implementing the signalling server, client interface, and security protocols, it's time to compile and run the complete WebWormHole application. Here are the steps to achieve this:

#### [a] Compile the Project
   - Ensure all dependencies are installed and WebAssembly files are compiled as described in previous sections.
   - In the project root directory, run the following commands:

```bash title="bash"
     go build -o webwormhole
```

#### [b] Start the Signalling Server
   - Start the signalling server to facilitate the WebRTC connections.
   - Run the server using:

```bash title="bash"
     ./webwormhole server -http=localhost:8000
```

#### [c] Run the Client Application
   - If you are using a React application for the client interface, start the React development server.
   - Navigate to the `webwormhole-client` directory and run:

```bash title="bash"
     npm start
```
   - This will start the React application, and you can access it via `http://localhost:3000`.

### Testing the Application

To ensure everything is working correctly, perform thorough testing on different devices and browsers:

#### Local Testing
   - Open the client application in a web browser and test sending and receiving files.
   - Verify that the connection is established, files are transferred successfully, and the status messages are displayed correctly.

#### Cross-Device Testing
   - Test the application on different devices (e.g., laptops, smartphones, tablets) to ensure compatibility and responsiveness.
   - Check that the file transfer works seamlessly across different operating systems and browser versions.

#### Network Testing
   - Test the application in different network conditions (e.g., Wi-Fi, mobile data) to ensure robust performance.
   - Verify that the WebRTC connection handles NAT traversal and peer discovery effectively.

### Common Issues and Fixes

#### Connection Issues
   - If peers cannot establish a connection, check the signalling server logs for errors. Common issues include misconfigured server settings or network restrictions.
   - Ensure that the ICE candidates are exchanged correctly and that both peers can reach the signalling server.

#### File Transfer Failures
   - If file transfers fail, check the data channel state and the file reading/writing logic. Ensure that the data is being correctly read as an ArrayBuffer and sent over the data channel.
   - Debug using console logs to trace the data transfer process and identify where it fails.

#### Security Warnings
   - If there are security warnings or errors, verify that the CPace implementation is correct and that the session descriptions are properly encrypted and decrypted.
   - Ensure that the password generation and key derivation processes are secure and free of vulnerabilities.

### Example Commands and Expected Outputs

#### Start the Server

```bash title="bash"
   ./webwormhole server -http=localhost:8000
```

Expected output:

```plaintext
   2023/06/11 12:34:56 Starting WebWormHole signalling server
   2023/06/11 12:34:56 Listening on http://localhost:8000
```

#### Send a File

```javascript title="JavaScript"
   // In the client application
   const file = document.querySelector('input[type="file"]').files[0];
   sendFile(file);
```

Expected output (console log):

```plaintext
   Data channel is open
   File sent: myfile.txt
```

#### Receive a File

```javascript title="JavaScript"
   dataChannel.onmessage = (event) => {
     const receivedBuffer = event.data;
     const blob = new Blob([receivedBuffer]);
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
     link.download = 'receivedFile';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
     console.log('File received and saved');
   };
```
Expected output (console log):

```plaintext
   File received and saved
```

By following these steps, you can compile, run, and test your complete WebWormHole application, ensuring it functions correctly and securely across various environments and conditions.

## Conclusion

WebWormHole is a cutting-edge tool designed to facilitate secure, peer-to-peer file transfers using WebRTC technology. It combines the strengths of WebAssembly and Go to deliver high performance and cross-platform compatibility. By leveraging CPace for secure key exchange, WebWormHole ensures that all data transfers are encrypted and protected from unauthorized access. The application’s design emphasizes simplicity and efficiency, making it an ideal choice for users who need reliable and private file-sharing capabilities without the need for central servers.

Discover how to set up and use WebWormHole for secure peer-to-peer file transfers using WebRTC, WebAssembly, and Go. Learn about its features, architecture, and step-by-step implementation.

How to Build ShareDrop WebRTC App?

How to Build WebWormHole WebRTC App with JavaScript?

WebWormHole WebRTC

## Step 5: Implement Participant View

### Creating the Participant View

The participant view is essential for displaying video streams from other users in the conference. This step involves setting up the logic to manage and render these streams dynamically.

#### [a] Update HTML for Remote Video Container
Ensure that your `index.html` file has a dedicated section for displaying remote video streams.

```html title="HTML"
   <div id="conference-screen" style="display:none;">
       <h1>Conference Room</h1>
       <div id="local-video-container"></div>
       <div id="remote-video-container"></div>
       <button id="mute-button">Mute</button>
       <button id="video-button">Toggle Video</button>
       <button id="leave-button">Leave</button>
   </div>
```

#### [b] Update JavaScript to Handle Remote Streams
Enhance `main.js` to manage incoming remote streams and render them in the participant view.

```javascript title="JavaScript"
   const socket = io();

   document.getElementById('join-button').addEventListener('click', () => {
       const room = document.getElementById('room-input').value;
       if (room === "") {
           alert("Please enter a room name.");
           return;
       }
       document.getElementById('join-screen').style.display = 'none';
       document.getElementById('conference-screen').style.display = 'block';

       socket.emit('join', room);

       socket.on('new user', (userId) => {
           console.log('New user connected:', userId);
           initializePeerConnection(userId, true);
       });

       socket.on('signal', (data) => {
           handleSignal(data);
       });

       socket.on('user left', (userId) => {
           if (peers[userId]) {
               peers[userId].destroy();
               delete peers[userId];
           }
           const videoElement = document.getElementById(userId);
           if (videoElement) {
               videoElement.remove();
           }
       });
   });

   function initializePeerConnection(userId, initiator) {
       const peer = new SimplePeer({ initiator: initiator, stream: localStream });

       peer.on('signal', (signal) => {
           socket.emit('signal', { signal: signal, to: userId });
       });

       peer.on('stream', (stream) => {
           // Display the remote video stream
           const remoteVideoContainer = document.getElementById('remote-video-container');
           const videoElement = document.createElement('video');
           videoElement.id = userId;
           videoElement.srcObject = stream;
           videoElement.autoplay = true;
           remoteVideoContainer.appendChild(videoElement);
       });

       peers[userId] = peer;
   }

   function handleSignal(data) {
       if (peers[data.from]) {
           peers[data.from].signal(data.signal);
       }
   }

   const peers = {};

   const localStream = new MediaStream();
   const localVideo = document.createElement('video');
   localVideo.srcObject = localStream;
   localVideo.muted = true;
   localVideo.autoplay = true;
   document.getElementById('local-video-container').appendChild(localVideo);

   navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
       stream.getTracks().forEach(track => localStream.addTrack(track));
       for (let userId in peers) {
           peers[userId].addStream(localStream);
       }
   });

   document.getElementById('mute-button').addEventListener('click', () => {
       const audioTrack = localStream.getAudioTracks()[0];
       audioTrack.enabled = !audioTrack.enabled;
       document.getElementById('mute-button').textContent = audioTrack.enabled ? 'Mute' : 'Unmute';
   });

   document.getElementById('video-button').addEventListener('click', () => {
       const videoTrack = localStream.getVideoTracks()[0];
       videoTrack.enabled = !videoTrack.enabled;
       document.getElementById('video-button').textContent = videoTrack.enabled ? 'Disable Video' : 'Enable Video';
   });

   document.getElementById('leave-button').addEventListener('click', () => {
       socket.emit('leave', room);
       location.reload();
   });
```

#### [c] Explanation
   - **Remote Stream Handling:** When a new user joins, the `initializePeerConnection` function sets up a new `SimplePeer` instance that listens for remote streams and displays them in the `remote-video-container`.
   - **Clean Up on User Leave:** When a user leaves, their video element is removed from the DOM to keep the interface clean.
   - **Local Stream Management:** The local video stream is initialized and displayed in the `local-video-container`.

With the participant view implemented, your Briefing WebRTC application can now display video streams from all participants. The final step will be running and testing your code to ensure everything works as expected.

## Step 6: Run Your Code

### Running and Testing the Application

With all the components in place, it's time to run and test your Briefing WebRTC application to ensure it functions correctly. Follow these steps to start the server and verify the application:

#### Start the Server
Open your terminal, navigate to the root directory of your project, and run the server using Node.JS.

```bash title="bash"
   node server/server.js
```

You should see a message indicating that the server is running on port 3000.

#### Open the Application in a Browser
Open your web browser and navigate to `http://localhost:3000`. You should see the join screen of your Briefing WebRTC application.

#### Test the Application
   - **Join a Room:** Enter a room name and click the join button. The conference screen should appear.
   - **Check Video and Audio:** Verify that your local video and audio streams are visible and functional.
   - **Join from Multiple Browsers:** Open the application in multiple browser tabs or different devices, join the same room, and ensure that the video streams from all participants are visible.
   - **Test Controls:** Use the mute, video toggle, and leave buttons to ensure they work as expected.

#### Troubleshooting
   - **Common Issues:** If you encounter any issues, check the browser console for error messages. Common problems may include permission issues with accessing the camera and microphone, or connectivity issues.
   - **Debugging:** Ensure that the signaling server is running correctly and that all peers are connected.

By following these steps, you can run and test your Briefing WebRTC application to ensure it meets your requirements and works smoothly.

## Conclusion
In this guide, we covered the essential steps to create a Briefing WebRTC application. Starting from setting up the project and installing necessary dependencies, we moved through structuring the project, implementing the join screen, adding user controls, creating the participant view, and finally running and testing the application. By following these steps, you can build a functional and scalable WebRTC-based video conferencing application.

 Learn how to set up, implement, and test a Briefing WebRTC application using Node.JS, Simple-Peer, and an iOS client.

## Introduction to Briefing WebRTC Technology

### What is Briefing WebRTC?

Briefing WebRTC is an innovative technology solution designed to facilitate real-time communication through web-based video conferencing. Built on a robust technology stack that includes Node.JS for server-side logic, Simple-Peer for establishing peer-to-peer connections on the web, and an iOS client for mobile access, Briefing WebRTC leverages the capabilities of WebRTC (Web Real-Time Communication) to enable seamless, high-quality video interactions.

### Key Feature of Briefing WebRTC

One of the key features of Briefing WebRTC is its use of a mesh conference server. Unlike traditional centralized servers, a mesh conference server allows each participant to connect directly to every other participant in the conference. This peer-to-peer approach reduces latency, enhances privacy, and improves the overall efficiency of the network by distributing the load across multiple nodes. 

With Briefing WebRTC, developers can create scalable and flexible video conferencing applications that are capable of handling multiple participants simultaneously. The technology is particularly suited for scenarios where low latency and high performance are critical, such as in business meetings, online education, telemedicine, and social networking.

In this article, we will guide you through the process of setting up a Briefing WebRTC application from scratch. We will cover the essential steps, from creating a new project and installing necessary dependencies, to structuring the project, implementing key features, and finally, running and testing your application. By the end of this guide, you will have a functional Briefing WebRTC app that demonstrates the power and versatility of this technology.

## Getting Started with the Code 

### Create a New Briefing WebRTC App

To get started with Briefing WebRTC, the first step is to create a new project. This involves setting up the necessary development environment and initializing a new Node.JS application. Here’s how you can do it:

#### [a] Install Node.JS
Ensure you have Node.JS installed on your system. You can download it from the [official Node.JS website](https://nodejs.org/).

#### [b] Initialize a New Project
Create a new directory for your project and navigate into it using the command line. Then, initialize a new Node.JS project using the following commands:

```bash title="bash"
    mkdir briefing-webrtc-app
    cd briefing-webrtc-app
    npm init -y
```
This will create a `package.json` file in your project directory.

#### [c] Install Necessary Dependencies

Next, you need to install the dependencies required for your Briefing WebRTC application. The primary libraries you’ll be using are `simple-peer` for WebRTC functionality and `express` to set up a basic server. Run the following command to install these dependencies:

```bash title="bash"
npm install express simple-peer
```

### Structure of the Project

Organizing your project files properly is crucial for maintaining clean and manageable code. Here’s a recommended directory structure for your Briefing WebRTC app:

```
briefing-webrtc-app/
│
├── public/
│   ├── index.html
│   └── main.js
├── server/
│   └── server.js
├── package.json
└── README.md
```

- `public/` directory will contain the client-side code, including HTML and JavaScript files.
- `server/` directory will contain the server-side code.

### App Architecture
![Briefing WebRTC](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Briefing_Web_RTC_work_d2d27e4db4.png)
The architecture of your Briefing WebRTC app involves setting up a Node.JS server to handle signaling and establishing peer-to-peer connections using Simple-Peer. Here’s a high-level overview:

1. **Node.JS Server:** This server will handle client connections and facilitate signaling between peers.
2. **Simple-Peer:** This library will manage peer-to-peer connections, enabling video and audio communication between clients.

By setting up this architecture, you ensure that your app is scalable and can handle multiple participants efficiently. With the basic setup complete, we can now proceed to the next steps: setting up the main file, wiring the components, and implementing the core features of the application.

## Step 1: Get Started with Main File

### Setting Up the Main File

The main file of your Briefing WebRTC application serves as the entry point for your server. It will handle setting up the server, serving static files, and managing WebSocket connections for signaling. Let's create and configure this file.

#### [a] Create the Main Server File
Navigate to the `server` directory and create a file named `server.js`.

```bash title="bash"
   cd server
   touch server.js
```

#### [b] Set Up the Server
Open `server.js` in your preferred text editor and add the following code to set up an Express server:

```javascript title="JavaScript"
   const express = require('express');
   const http = require('http');
   const path = require('path');
   const { Server } = require('socket.io');

   const app = express();
   const server = http.createServer(app);
   const io = new Server(server);

   // Serve static files from the public directory
   app.use(express.static(path.join(__dirname, '../public')));

   // Handle a simple get request
   app.get('/', (req, res) => {
       res.sendFile(path.join(__dirname, '../public/index.html'));
   });

   // WebSocket connection for signaling
   io.on('connection', (socket) => {
       console.log('a user connected');

       socket.on('disconnect', () => {
           console.log('user disconnected');
       });

       socket.on('signal', (data) => {
           io.to(data.to).emit('signal', data);
       });

       socket.on('join', (room) => {
           socket.join(room);
           socket.to(room).emit('new user', socket.id);
       });
   });

   // Start the server
   const PORT = process.env.PORT || 3000;
   server.listen(PORT, () => {
       console.log(`Server is running on port ${PORT}`);
   });
```

#### [c] Explanation
   - **Express Server:** The Express server serves static files from the `public` directory and handles HTTP requests.
   - **WebSocket Setup:** Using `socket.io`, it manages WebSocket connections for signaling between peers.
   - **Event Handling:** The server listens for `signal` and `join` events, facilitating communication between clients.

With your main server file set up, the foundation of your Briefing WebRTC application is in place. The next step involves wiring all the components and creating the user interface, starting with the wireframe and then implementing specific features like the join screen and user controls.

## Step 2: Wireframe All the Components

### Creating the Wireframe

To begin implementing the client-side of your Briefing WebRTC application, you'll need to create the wireframe. The wireframe includes the basic structure of the user interface, such as the join screen and the main conference area. This step will set up the HTML and JavaScript files that will manage the user interactions and WebRTC functionalities.

#### [a] Create the HTML File
In the `public` directory, create an `index.html` file with the following content:

```html title="HTML"
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Briefing WebRTC</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div id="join-screen">
           <h1>Join a Conference</h1>
           <input type="text" id="room-input" placeholder="Enter room name">
           <button id="join-button">Join</button>
       </div>
       <div id="conference-screen" style="display:none;">
           <h1>Conference Room</h1>
           <div id="local-video-container"></div>
           <div id="remote-video-container"></div>
           <button id="leave-button">Leave</button>
       </div>
       <script src="/socket.io/socket.io.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/simple-peer/simplepeer.min.js"></script>
       <script src="main.js"></script>
   </body>
   </html>
```

#### [b] Create the JavaScript File
In the `public` directory, create a `main.js` file with the following initial content:

```javascript title="JavaScript"
   document.getElementById('join-button').addEventListener('click', () => {
       const room = document.getElementById('room-input').value;
       if (room === "") {
           alert("Please enter a room name.");
           return;
       }
       document.getElementById('join-screen').style.display = 'none';
       document.getElementById('conference-screen').style.display = 'block';
       // Implement signaling and peer connection logic here
   });
```

#### Explanation
   - **HTML Structure:** The `index.html` file contains two main sections: the join screen and the conference screen. The join screen is displayed initially, and the conference screen appears after the user joins a room.
   - **JavaScript Logic:** The `main.js` file handles the user interaction for joining a room. It hides the join screen and displays the conference screen when the user clicks the join button.

By setting up the wireframe, you establish the basic structure of your Briefing WebRTC application. The next steps will focus on implementing specific features such as the join screen functionality, user controls, and rendering participant views.

## Step 3: Implement Join Screen

### Building the Join Screen

With the wireframe in place, the next step is to implement the functionality for the join screen. This involves setting up the client-side logic to join a conference room and establish a connection with the signaling server.

#### [a] Modify `main.js` to Include Signaling Logic
Enhance the `main.js` file to include the signaling logic using `socket.io` for real-time communication between clients.

```javascript title="JavaScript"
   const socket = io();

   document.getElementById('join-button').addEventListener('click', () => {
       const room = document.getElementById('room-input').value;
       if (room === "") {
           alert("Please enter a room name.");
           return;
       }
       document.getElementById('join-screen').style.display = 'none';
       document.getElementById('conference-screen').style.display = 'block';

       socket.emit('join', room);

       socket.on('new user', (userId) => {
           console.log('New user connected:', userId);
           // Initialize peer connection with the new user
           initializePeerConnection(userId, true);
       });

       socket.on('signal', (data) => {
           handleSignal(data);
       });
   });

   function initializePeerConnection(userId, initiator) {
       const peer = new SimplePeer({ initiator: initiator });

       peer.on('signal', (signal) => {
           socket.emit('signal', { signal: signal, to: userId });
       });

       peer.on('stream', (stream) => {
           // Display the remote video stream
           const remoteVideoContainer = document.getElementById('remote-video-container');
           const videoElement = document.createElement('video');
           videoElement.srcObject = stream;
           videoElement.autoplay = true;
           remoteVideoContainer.appendChild(videoElement);
       });

       // Handle incoming signals
       peers[userId] = peer;
   }

   function handleSignal(data) {
       if (peers[data.from]) {
           peers[data.from].signal(data.signal);
       }
   }

   const peers = {};
```

#### [b] Explanation
   - **Socket Initialization:** The `socket` variable is initialized to connect to the signaling server.
   - **Join Room:** When the join button is clicked, the client emits a `join` event to the server with the room name. It also sets up listeners for `new user` and `signal` events.
   - **Initialize Peer Connection:** The `initializePeerConnection` function sets up a new `SimplePeer` instance for each new user. It handles signaling and receiving remote video streams.
   - **Handle Signal:** The `handleSignal` function processes incoming signals from other peers.

With this implementation, your join screen now allows users to connect to a room and establish peer-to-peer connections using WebRTC. The next steps will involve adding user controls and rendering participant views to enhance the functionality and user experience of your application.

## Step 4: Implement Controls

### Adding User Controls

In this step, we will implement the user controls, such as the ability to mute/unmute audio, toggle video, and leave the conference. These controls are essential for a functional video conferencing application.

#### [a] Update HTML for Controls
Modify your `index.html` file to include buttons for muting, toggling video, and leaving the conference.

```html title="HTML"
   <div id="conference-screen" style="display:none;">
       <h1>Conference Room</h1>
       <div id="local-video-container"></div>
       <div id="remote-video-container"></div>
       <button id="mute-button">Mute</button>
       <button id="video-button">Toggle Video</button>
       <button id="leave-button">Leave</button>
   </div>
```

#### [b] Add Control Logic in `main.js`
Update `main.js` to handle the user controls.

```javascript title="JavaScript"
   const localStream = new MediaStream();
   const localVideo = document.createElement('video');
   localVideo.srcObject = localStream;
   localVideo.muted = true;
   localVideo.autoplay = true;
   document.getElementById('local-video-container').appendChild(localVideo);

   navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
       stream.getTracks().forEach(track => localStream.addTrack(track));
       for (let userId in peers) {
           peers[userId].addStream(localStream);
       }
   });

   document.getElementById('mute-button').addEventListener('click', () => {
       const audioTrack = localStream.getAudioTracks()[0];
       audioTrack.enabled = !audioTrack.enabled;
       document.getElementById('mute-button').textContent = audioTrack.enabled ? 'Mute' : 'Unmute';
   });

   document.getElementById('video-button').addEventListener('click', () => {
       const videoTrack = localStream.getVideoTracks()[0];
       videoTrack.enabled = !videoTrack.enabled;
       document.getElementById('video-button').textContent = videoTrack.enabled ? 'Disable Video' : 'Enable Video';
   });

   document.getElementById('leave-button').addEventListener('click', () => {
       socket.emit('leave', room);
       location.reload();
   });

   socket.on('user left', (userId) => {
       if (peers[userId]) {
           peers[userId].destroy();
           delete peers[userId];
       }
   });
```

#### [c] Explanation
   - **Local Stream Setup:** Capture the user's media stream and add it to the local video element.
   - **Mute Button:** Toggle the audio track of the local stream.
   - **Video Button:** Toggle the video track of the local stream.
   - **Leave Button:** Emit a `leave` event to the server and reload the page to disconnect.
   - **Handle User Leaving:** Clean up peer connections when a user leaves.

With these user controls implemented, your Briefing WebRTC application now allows users to manage their audio and video streams and leave the conference when needed. The next step will focus on implementing the participant view to display video streams from other users.

How to Build OpenVidu WebRTC App?

How to Build Briefing WebRTC App with JavaScript?

Briefing WebRTC

## Step 5: Implementing Participant View

### Managing Participants

The participant view is crucial for displaying the video streams of all users in the session. This step involves managing the addition and removal of participant video streams dynamically as users join and leave the session.

### Displaying Video Streams of Multiple Participants

#### Handling Stream Events
We will update the `initializeSession` function to handle participant events such as stream creation and destruction.

```javascript title="JavaScript"
   function initializeSession(username) {
       const OV = new OpenVidu();
       const session = OV.initSession();

       // Handle stream creation (when a new participant joins)
       session.on('streamCreated', (event) => {
           const subscriber = session.subscribe(event.stream, 'remote-videos');
           subscriber.on('videoElementCreated', (event) => {
               event.element.play();
               const videoBox = document.createElement('div');
               videoBox.className = 'video-box';
               videoBox.id = `participant-${event.stream.streamId}`;
               videoBox.appendChild(event.element);
               document.getElementById('remote-videos').appendChild(videoBox);
           });
       });

       // Handle stream destruction (when a participant leaves)
       session.on('streamDestroyed', (event) => {
           const videoBox = document.getElementById(`participant-${event.stream.streamId}`);
           if (videoBox) {
               videoBox.parentNode.removeChild(videoBox);
           }
       });

       getToken().then(token => {
           session.connect(token, { clientData: username })
               .then(() => {
                   // Create a publisher for the local video
                   const publisher = OV.initPublisher('local-video', {
                       audioSource: undefined,
                       videoSource: undefined,
                       publishAudio: true,
                       publishVideo: true,
                       resolution: '640x480',
                       frameRate: 30,
                       insertMode: 'APPEND',
                       mirror: false
                   });
                   session.publish(publisher);

                   // Add event listeners for control buttons
                   document.getElementById('mute-audio').addEventListener('click', () => {
                       publisher.publishAudio(!publisher.stream.audioActive);
                       document.getElementById('mute-audio').textContent = publisher.stream.audioActive ? 'Mute Audio' : 'Unmute Audio';
                   });

                   document.getElementById('disable-video').addEventListener('click', () => {
                       publisher.publishVideo(!publisher.stream.videoActive);
                       document.getElementById('disable-video').textContent = publisher.stream.videoActive ? 'Disable Video' : 'Enable Video';
                   });

                   document.getElementById('share-screen').addEventListener('click', () => {
                       shareScreen(session, publisher);
                   });
               })
               .catch(error => {
                   console.error('Error connecting to the session:', error);
               });
       });

       function getToken() {
           return fetch('/api/get-token')
               .then(response => response.json())
               .then(data => data.token);
       }

       function shareScreen(session, publisher) {
           OV.initPublisherAsync('local-video', {
               videoSource: 'screen'
           }).then(screenPublisher => {
               session.unpublish(publisher);
               session.publish(screenPublisher);

               screenPublisher.on('streamDestroyed', () => {
                   session.unpublish(screenPublisher);
                   session.publish(publisher);
                   document.getElementById('share-screen').textContent = 'Share Screen';
               });

               document.getElementById('share-screen').textContent = 'Stop Sharing';
           }).catch(error => {
               console.error('Error sharing screen: ', error);
           });
       }
   }
```

### Handling Participant Events

#### Stream Created
When a new participant joins the session, the `streamCreated` event is triggered. This event allows us to subscribe to the new participant's stream and add their video element to the `remote-videos` container.

#### Stream Destroyed
When a participant leaves the session, the `streamDestroyed` event is triggered. This event removes the participant's video element from the `remote-videos` container.

### Code Examples for Managing Participant Views

The following JavaScript code ensures that participant video streams are dynamically added and removed as users join and leave the session:

#### Stream Creation Handling
Adds a new video element for each participant who joins the session.

```javascript title="JavaScript"
     session.on('streamCreated', (event) => {
         const subscriber = session.subscribe(event.stream, 'remote-videos');
         subscriber.on('videoElementCreated', (event) => {
             event.element.play();
             const videoBox = document.createElement('div');
             videoBox.className = 'video-box';
             videoBox.id = `participant-${event.stream.streamId}`;
             videoBox.appendChild(event.element);
             document.getElementById('remote-videos').appendChild(videoBox);
         });
     });
```

#### Stream Destruction Handling
Removes the video element of the participant who leaves the session.

```javascript title="JavaScript"
     session.on('streamDestroyed', (event) => {
         const videoBox = document.getElementById(`participant-${event.stream.streamId}`);
         if (videoBox) {
             videoBox.parentNode.removeChild(videoBox);
         }
     });
```

By implementing the participant view, your OpenVidu application can now dynamically manage the video streams of all participants in the session. This functionality is essential for creating a seamless and interactive video conferencing experience.

In the next part, we will focus on running your code and testing the application to ensure everything works as expected. This will involve starting the OpenVidu server, launching the application in a browser, and performing some basic tests.

## Step 6: Running Your Code and Conclusion
Now that we have implemented the core functionalities of our OpenVidu application, it's time to run the code and test the application to ensure everything works as expected. Follow these steps to start the OpenVidu server, launch the application, and perform some basic tests.

### Starting the OpenVidu Server

#### Download and Launch OpenVidu Server
If you haven’t already, download the OpenVidu server from the [OpenVidu Downloads page](https://openvidu.io/docs/deployment/deploying-on-premises/#1-download-and-launch-openvidu-server).

Start the server by running the following command in your terminal:

```bash title="bash"
     ./openvidu start
```

#### Configure OpenVidu
Ensure you have set the necessary configuration options, such as `OPENVIDU_SECRET` and `OPENVIDU_PUBLICURL`, in your `docker-compose.yml` or environment variables. This configuration ensures that your OpenVidu server is secure and accessible.

### Launching the Application in a Browser

#### Start Your Application
Navigate to your project directory and start your application server. If you’re using a Node.js server, the command will typically be:

```bash title="bash"
     node server.js
```

#### Open Your Browser
Open your preferred web browser and navigate to `http://localhost:YOUR_PORT`. Replace `YOUR_PORT` with the port number your application server is running on (commonly `3000` or `5000`).

### Testing and Debugging Tips

#### Join the Session
Enter your name in the join screen and click the “Join” button. Ensure that your video stream appears in the local video container and any other participants' video streams appear in the remote video container.

#### Test Controls
Test the mute/unmute audio, enable/disable video, and share screen functionalities by clicking the corresponding buttons. Verify that the video and audio states toggle correctly and that screen sharing works as expected.

#### Check Console for Errors
Open the browser’s developer console (usually accessible with `F12` or `Ctrl+Shift+I`) and check for any errors or warnings. Debugging information and error messages can help you identify and fix issues in your code.

## Conclusion
In this comprehensive guide, we build a video chat app with OpenVidu WebRTC using Javascript
from scratch. By following these instructions, and step by step guide you have learned how to set up your environment, wireframe components, implement a join screen, add video controls, and manage participant views. With your application running, you can now explore advanced features and customize your application further.

Learn how to build a video app using OpenVidu WebRTC with JavaScript. This guide covers everything you need to create real-time video communication solutions.

How to Build Briefing WebRTC App?

Building a Video Chat App with OpenVidu WebRTC using JavaScript

OpenVidu WebRTC

## Step 5: Implement Participant View 

In this step, we will implement the participant view, which displays all participants in the WebRTC session. This feature is crucial for providing a comprehensive and interactive experience by showing the video streams of all connected users.

### Participant View Implementation

#### [a] HTML Structure
Ensure your HTML file includes a container to display the participant video streams.

```html title="HTML"
   <div id="videoChat" style="display: none;">
     <video id="localVideo" autoplay muted></video>
     <div id="remoteVideos"></div>
     <div id="controls">
       <button id="muteBtn">Mute</button>
       <button id="endCallBtn">End Call</button>
     </div>
   </div>
```

#### [b] JavaScript to Handle Remote Streams
Update your WebRTC integration code to handle multiple participants and display their video streams.

```javascript title="JavaScript"
   const SimplePeer = require('simple-peer');
   const io = require('socket.io-client');

   const socket = io.connect('http://localhost:3000');
   let localPeer;
   let peers = {}; // Store peer connections

   // Function to initialize a WebRTC connection
   function initWebRTC(isInitiator, stream) {
     localPeer = new SimplePeer({
       initiator: isInitiator,
       stream: stream,
       trickle: false
     });

     localPeer.on('signal', data => {
       socket.emit('signal', { room: 'webrtc_room', signal: data });
     });

     localPeer.on('stream', remoteStream => {
       addRemoteStream(remoteStream);
     });

     socket.on('signal', data => {
       if (data.signal) {
         localPeer.signal(data.signal);
       }
     });
   }

   // Function to add remote stream to the participant view
   function addRemoteStream(stream) {
     const remoteVideo = document.createElement('video');
     remoteVideo.srcObject = stream;
     remoteVideo.autoplay = true;
     remoteVideo.playsInline = true;
     document.getElementById('remoteVideos').appendChild(remoteVideo);
   }

   // Function to start a WebRTC session
   function startSession() {
     navigator.mediaDevices.getUserMedia({ video: true, audio: true })
       .then(stream => {
         const localVideo = document.getElementById('localVideo');
         localVideo.srcObject = stream;
         localVideo.play();
         initWebRTC(true, stream); // Initialize WebRTC as the initiator
       })
       .catch(err => console.error('Error accessing media devices.', err));
   }

   // Event listener for joining a room
   socket.on('connect', () => {
     socket.emit('join', 'webrtc_room');
   });

   // Export the startSession function
   module.exports = { startSession };
```

#### [c] CSS for Participant View
Add CSS to style the remote video elements and ensure a responsive layout.

```css title="CSS"
   #remoteVideos {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 20px;
   }

   #remoteVideos video {
     width: 45%;
     margin: 10px;
     border: 1px solid #ccc;
     background-color: #000;
   }
```

#### [d] JavaScript to Handle New Participants
Update the socket event to handle new participants joining the session.

```javascript title="JavaScript"
   socket.on('newParticipant', data => {
     if (!peers[data.id]) {
       const peer = new SimplePeer({ initiator: false });
       peers[data.id] = peer;

       peer.on('signal', signal => {
         socket.emit('signal', { id: data.id, signal: signal });
       });

       peer.on('stream', remoteStream => {
         addRemoteStream(remoteStream);
       });

       peer.signal(data.signal);
     }
   });
```

By implementing the participant view, users can see all participants in the WebRTC session, enhancing the interactive experience. The next step will focus on running and testing your complete Mastodon WebRTC application.

## Step 6: Run Your Code Now

With all the components in place, it's time to run and test your Mastodon WebRTC application. Follow these steps to ensure everything works seamlessly.

#### [a] Start the Mastodon Server
Make sure your Mastodon server is running:

```sh title="sh"
   RAILS_ENV=production bundle exec rails s
```

#### [b] Start the WebRTC Signaling Server
Run your Socket.IO server to handle signaling:

```sh title="sh"
   node server/socket.js
```

#### [c] Access Your Application
Open your Mastodon instance in a web browser and navigate to the page with your WebRTC integration.

#### [d] Test the Functionality
   - Click the "Start Session" button.
   - Allow access to your camera and microphone.
   - Verify that your local video stream is displayed.
   - Test the mute/unmute and end call functionalities.
   - Ensure that remote participants' video streams are displayed correctly.

Congratulations! You've successfully integrated WebRTC into your Mastodon instance, enabling real-time communication features. This integration enhances user interaction by providing video and audio capabilities directly within the social network platform and [social wall](https://taggbox.com/social-wall/).

## Conclusion

This guide walked you through setting up a Mastodon WebRTC application, from project initialization and environment setup to implementing key features like the join screen, controls, and participant view. By following these steps, you've created a dynamic and interactive Mastodon instance that leverages the power of WebRTC.

Learn how to integrate WebRTC into your Mastodon instance with this step-by-step guide. Enhance your decentralized social network with real-time communication features like video calls and voice chats.

## Introduction to Mastodon WebRTC

Mastodon is a decentralized social network that operates on open-source software, providing users with an alternative to centralized social media platforms. Built on a federated model, Mastodon allows users to create their own servers, or "instances," which can communicate with each other seamlessly. This decentralized approach ensures greater control over data, enhanced privacy, and the ability to customize the user experience to meet the needs of diverse communities.

WebRTC (Web Real-Time Communication) is a technology that enables real-time communication directly between web browsers without the need for plugins. Utilizing a set of standards, WebRTC facilitates peer-to-peer video, audio, and data sharing, making it a powerful tool for creating interactive applications such as video conferencing, file transfer, and live streaming.

Integrating WebRTC into Mastodon can significantly enhance the platform's functionality by enabling real-time communication features. This integration can bring about a more dynamic and interactive user experience, allowing Mastodon to offer features such as video calls, voice chats, and real-time collaborative tools directly within the platform. This makes Mastodon not just a place for social interaction through posts and messages but also a hub for real-time, multimedia-rich communication.

The following sections of this article will guide you through the process of integrating WebRTC into a Mastodon instance, from setting up the project environment to implementing various WebRTC features. By the end of this guide, you will have a Mastodon application that leverages the power of WebRTC to offer enhanced communication capabilities.

## Getting Started with the Code!

In this section, we'll walk you through the process of creating a new Mastodon app with WebRTC integration. We'll cover the initial setup, installation of necessary packages, and the overall project structure.

### Create a New Mastodon WebRTC App

Before we begin, ensure you have the necessary prerequisites installed on your system:

- **Ruby** (version 2.5 or higher)
- **Node.js** (version 12 or higher)
- **Yarn** package manager
- **PostgreSQL** database
- **Redis** server

To create a new Mastodon project, follow these steps:

#### Clone the Mastodon repository

```sh title="sh"
   git clone https://github.com/mastodon/mastodon.git
   cd mastodon
```

#### Set up the environment
Copy the example environment file and configure it according to your setup:

```sh title="sh"
   cp .env.production.sample .env.production
```

#### Install dependencies
Install Ruby and Node.js dependencies using Bundler and Yarn:

```sh title="sh"
   bundle install
   yarn install
```

#### Database setup
Create and migrate the database:

```sh title="sh"
   RAILS_ENV=production bundle exec rails db:setup
```

### Install Necessary Packages
To integrate WebRTC, you'll need to install additional Node.js packages that facilitate real-time communication. These packages include `simple-peer` for WebRTC peer connections and `socket.io` for signaling.

#### [a] Install WebRTC packages

```sh title="sh"
   yarn add simple-peer socket.io
```

#### [b] Set up Socket.IO server
In the project directory, create a new file `server/socket.js` to handle signaling:

```javascript title="JavaScript"
   const io = require('socket.io')(3000);

   io.on('connection', socket => {
     socket.on('signal', data => {
       io.to(data.room).emit('signal', data);
     });

     socket.on('join', room => {
       socket.join(room);
     });
   });
```

### Structure of the Project

Understanding the project structure is crucial for efficient development. Here is an overview of the key directories and files in a Mastodon project:

- **app/**: Contains the Rails application code, including models, views, and controllers.
- **config/**: Configuration files for the Rails application.
- **db/**: Database schema and migration files.
- **public/**: Static files served by the web server.
- **server/**: Custom server-side scripts (e.g., `socket.js` for WebRTC signaling).
- **frontend/**: JavaScript and CSS assets for the client-side interface.

### App Architecture
![Mastodon Webrtc](https://strapi.videosdk.live/uploads/sequence_diagram_of_how_Mastodon_work_50fbd0239a.png)
Integrating WebRTC involves both server-side and client-side modifications. The architecture will consist of:

- **Backend**: A Socket.IO server to handle signaling between peers.
- **Frontend**: WebRTC APIs to manage peer-to-peer connections and user interface components for video and audio streams.

In the next sections, we will delve into the detailed implementation of each component, starting with setting up the WebRTC integration.

## Step 1: Get Started with WebRTC Integration

Integrating WebRTC into your Mastodon project begins with setting up the necessary files and configuring the basic WebRTC functionality. This step will guide you through creating the essential WebRTC integration file and configuring it for your Mastodon application.

### File: `webrtc_integration.js`

#### [a] Create the File
In your project’s frontend directory, create a new file named `webrtc_integration.js`. This file will handle the core WebRTC functionality.

```sh title="sh"
   touch frontend/webrtc_integration.js
```

#### [b] Basic WebRTC Setup
Open `webrtc_integration.js` and add the following code to establish a basic WebRTC connection using the `simple-peer` library:

```javascript title="JavaScript"
   const SimplePeer = require('simple-peer');
   const io = require('socket.io-client');

   const socket = io.connect('http://localhost:3000');
   let localPeer;
   let remotePeerId;

   // Function to initialize a WebRTC connection
   function initWebRTC(isInitiator, stream) {
     localPeer = new SimplePeer({
       initiator: isInitiator,
       stream: stream,
       trickle: false
     });

     localPeer.on('signal', data => {
       socket.emit('signal', { room: 'webrtc_room', signal: data });
     });

     localPeer.on('stream', remoteStream => {
       // Display the remote stream in a video element
       const remoteVideo = document.getElementById('remoteVideo');
       remoteVideo.srcObject = remoteStream;
       remoteVideo.play();
     });

     socket.on('signal', data => {
       if (data.signal) {
         localPeer.signal(data.signal);
       }
     });
   }

   // Function to start a WebRTC session
   function startSession() {
     navigator.mediaDevices.getUserMedia({ video: true, audio: true })
       .then(stream => {
         const localVideo = document.getElementById('localVideo');
         localVideo.srcObject = stream;
         localVideo.play();
         initWebRTC(true, stream);
       })
       .catch(err => console.error('Error accessing media devices.', err));
   }

   // Event listener for joining a room
   socket.on('connect', () => {
     socket.emit('join', 'webrtc_room');
   });

   // Export the startSession function
   module.exports = { startSession };
```

#### [c] Add HTML Elements
Ensure your HTML file includes video elements to display the local and remote streams:

```html title="HTML"
   <video id="localVideo" autoplay muted></video>
   <video id="remoteVideo" autoplay></video>
```

With this basic setup, your application can now initialize a WebRTC connection and handle video streams. The next steps will involve wireframing the components and implementing user interface elements to manage these connections efficiently.

## Step 2: Wireframe all the Components

In this step, we will outline the process of wireframing the WebRTC components within the Mastodon interface. Wireframing helps in visualizing the layout and user interaction flow before diving into the detailed implementation. This section focuses on creating a user-friendly interface for initiating and managing WebRTC sessions.

### Wireframing Components

#### [a] Join Screen
The join screen allows users to start or join a WebRTC session. It includes a simple form for entering the session details and a button to initiate the connection.

```html title="HTML"
   <div id="joinScreen">
     <h2>Join WebRTC Session</h2>
     <button id="startSessionBtn">Start Session</button>
   </div>
```

#### [b] Video Chat Interface
Once the session is started, users will see the local and remote video streams. The interface includes controls for managing the session, such as mute/unmute, and end call buttons.

```html title="HTML"
   <div id="videoChat">
     <video id="localVideo" autoplay muted></video>
     <video id="remoteVideo" autoplay></video>
     <div id="controls">
       <button id="muteBtn">Mute</button>
       <button id="endCallBtn">End Call</button>
     </div>
   </div>
```

#### [c] CSS for Layout
Apply basic CSS to ensure the components are displayed correctly and responsively.

```css title="CSS"
   #joinScreen, #videoChat {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }

   #videoChat {
     display: none;
   }

   video {
     width: 45%;
     margin: 10px;
   }

   #controls {
     margin-top: 10px;
   }

   button {
     margin: 5px;
     padding: 10px;
   }
```

#### [d] JavaScript to Toggle Views
Add JavaScript to toggle between the join screen and the video chat interface.

```javascript title="JavaScript"
   document.getElementById('startSessionBtn').addEventListener('click', () => {
     document.getElementById('joinScreen').style.display = 'none';
     document.getElementById('videoChat').style.display = 'flex';
     startSession(); // Call the function to start the WebRTC session
   });

   document.getElementById('endCallBtn').addEventListener('click', () => {
     document.getElementById('joinScreen').style.display = 'flex';
     document.getElementById('videoChat').style.display = 'none';
     // Add logic to end the WebRTC session
   });
```

By wireframing these components, you can ensure a smooth and intuitive user experience for initiating and managing WebRTC sessions within the Mastodon platform. In the next step, we will implement the join screen functionality.

## Step 3: Implement Join Screen

The join screen is the entry point for users to start or join a WebRTC session within your Mastodon application. In this step, we will implement the join screen functionality, which includes setting up the interface and handling user interactions to initiate WebRTC connections.

### Join Screen Implementation

#### [a] HTML Structure
Ensure your HTML file includes the necessary elements for the join screen.

```html title="HTML"
   <div id="joinScreen">
     <h2>Join WebRTC Session</h2>
     <button id="startSessionBtn">Start Session</button>
   </div>
   <div id="videoChat" style="display: none;">
     <video id="localVideo" autoplay muted></video>
     <video id="remoteVideo" autoplay></video>
     <div id="controls">
       <button id="muteBtn">Mute</button>
       <button id="endCallBtn">End Call</button>
     </div>
   </div>
```

#### [b] CSS Styling
Add CSS to style the join screen and video chat interface.

```css title="CSS"
   #joinScreen, #videoChat {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 50px;
   }

   video {
     width: 45%;
     margin: 10px;
     border: 1px solid #ccc;
   }

   #controls {
     margin-top: 10px;
   }

   button {
     margin: 5px;
     padding: 10px;
     cursor: pointer;
     background-color: #007BFF;
     color: white;
     border: none;
     border-radius: 5px;
   }

   button:hover {
     background-color: #0056b3;
   }
```

#### [c] JavaScript Functionality
Add JavaScript to handle the button click event for starting the session.

```javascript title="JavaScript"
   document.getElementById('startSessionBtn').addEventListener('click', () => {
     document.getElementById('joinScreen').style.display = 'none';
     document.getElementById('videoChat').style.display = 'flex';
     startSession(); // Function to initialize WebRTC session
   });

   document.getElementById('endCallBtn').addEventListener('click', () => {
     document.getElementById('joinScreen').style.display = 'flex';
     document.getElementById('videoChat').style.display = 'none';
     endSession(); // Function to terminate WebRTC session
   });
```

#### [d] WebRTC Session Initialization
Modify the `startSession` function in `webrtc_integration.js` to handle the user media stream and initiate the WebRTC connection.

```javascript title="JavaScript"
   function startSession() {
     navigator.mediaDevices.getUserMedia({ video: true, audio: true })
       .then(stream => {
         const localVideo = document.getElementById('localVideo');
         localVideo.srcObject = stream;
         localVideo.play();
         initWebRTC(true, stream); // Initialize WebRTC as the initiator
       })
       .catch(err => console.error('Error accessing media devices.', err));
   }

   function endSession() {
     if (localPeer) {
       localPeer.destroy(); // Terminate the peer connection
     }
   }
```

By implementing the join screen, users can now initiate WebRTC sessions seamlessly. The next step will focus on implementing the control features, such as muting the microphone and ending the call.

## Step 4: Implement Controls

In this step, we will implement the control features for the WebRTC session within your Mastodon application. These controls will include buttons for muting/unmuting the microphone and ending the call. These functionalities enhance user experience by providing essential tools to manage their WebRTC sessions effectively.

### Controls Implementation

#### [a] HTML Structure
Ensure the controls are included in your HTML file within the video chat interface.

```html title="HTML"
   <div id="videoChat" style="display: none;">
     <video id="localVideo" autoplay muted></video>
     <video id="remoteVideo" autoplay></video>
     <div id="controls">
       <button id="muteBtn">Mute</button>
       <button id="endCallBtn">End Call</button>
     </div>
   </div>
```

#### [b] JavaScript for Controls
Add JavaScript to handle the mute/unmute and end call functionalities.

```javascript title="JavaScript"
   let isMuted = false;

   document.getElementById('muteBtn').addEventListener('click', () => {
     const localStream = document.getElementById('localVideo').srcObject;
     localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
     isMuted = !isMuted;
     document.getElementById('muteBtn').textContent = isMuted ? 'Unmute' : 'Mute';
   });

   document.getElementById('endCallBtn').addEventListener('click', () => {
     document.getElementById('joinScreen').style.display = 'flex';
     document.getElementById('videoChat').style.display = 'none';
     endSession(); // Function to terminate WebRTC session
   });

   function endSession() {
     if (localPeer) {
       localPeer.destroy(); // Terminate the peer connection
     }
     // Reset the local video stream
     const localVideo = document.getElementById('localVideo');
     localVideo.srcObject.getTracks().forEach(track => track.stop());
     localVideo.srcObject = null;
   }
```

#### [c] Function to Toggle Audio Tracks
The function to mute and unmute the audio tracks of the local stream ensures that users can control their microphone during a session.

```javascript title="JavaScript"
   function toggleMute() {
     const localStream = document.getElementById('localVideo').srcObject;
     localStream.getAudioTracks().forEach(track => {
       track.enabled = !track.enabled;
     });
     isMuted = !isMuted;
     document.getElementById('muteBtn').textContent = isMuted ? 'Unmute' : 'Mute';
   }

   document.getElementById('muteBtn').addEventListener('click', toggleMute);
```

#### [d] Ending the Call
The function to end the call will clean up the WebRTC session and reset the interface.

```javascript title="JavaScript"
   function endSession() {
     if (localPeer) {
       localPeer.destroy(); // Terminate the peer connection
     }
     const localVideo = document.getElementById('localVideo');
     localVideo.srcObject.getTracks().forEach(track => track.stop());
     localVideo.srcObject = null;
     document.getElementById('joinScreen').style.display = 'flex';
     document.getElementById('videoChat').style.display = 'none';
   }

   document.getElementById('endCallBtn').addEventListener('click', endSession);
```

By implementing these controls, users have the necessary tools to manage their WebRTC sessions effectively. In the next step, we will focus on creating a participant view to display all participants in the session.

How to Build Synapse WebRTC App?

How to Build Dendrite WebRTC App?

How to Build Mastodon WebRTC App with Ruby?

Mastodon WebRTC

## Step 5: Implement Participant View

### Displaying Participants

To manage multiple participants, we'll dynamically add video elements for each participant. First, update your `index.html` to include a container for remote videos:

```html title="HTML"
<div id="video-container" style="display: none;">
    <video id="localVideo" autoplay muted></video>
    <div id="remoteVideos"></div>
    <div id="controls">
        <button id="muteAudioButton">Mute Audio</button>
        <button id="muteVideoButton">Mute Video</button>
        <button id="shareScreenButton">Share Screen</button>
    </div>
</div>
```

### Managing Multiple Streams

Update `public/main.js` to handle multiple remote streams. We'll modify the peer setup to include unique IDs for each peer connection:

```javascript title="JavaScript"
const remoteVideos = document.getElementById('remoteVideos');
let peers = {};

joinButton.addEventListener('click', () => {
    const roomName = roomInput.value;
    if (roomName) {
        socket.emit('join-room', roomName);
        joinContainer.style.display = 'none';
        videoContainer.style.display = 'flex';
        initializePeer();
    }
});

function initializePeer(isInitiator = false, peerId) {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
            localVideo.srcObject = stream;
            localStream = stream;

            const peer = new SimplePeer({
                initiator: isInitiator,
                trickle: false,
                stream: localStream
            });

            peer.on('signal', data => {
                socket.emit('signal', { peerId, data });
            });

            peer.on('stream', stream => {
                addRemoteStream(stream, peerId);
            });

            peer.on('data', data => {
                console.log('Received message:', data.toString());
            });

            peer.on('error', err => {
                console.error('Peer error:', err);
            });

            peers[peerId] = peer;
        })
        .catch(error => {
            console.error('Error accessing media devices.', error);
            alert('Could not access your camera and microphone. Please ensure they are connected and enabled.');
        });
}

socket.on('connect', () => {
    console.log('Connected to signaling server');
});

socket.on('signal', ({ peerId, data }) => {
    if (!peers[peerId]) {
        initializePeer(false, peerId);
    }
    peers[peerId].signal(data);
});

socket.on('joined-room', ({ peerId }) => {
    initializePeer(true, peerId);
});

function addRemoteStream(stream, peerId) {
    const videoElement = document.createElement('video');
    videoElement.id = `video-${peerId}`;
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    remoteVideos.appendChild(videoElement);
}
```

### Dynamic UI Updates

To keep the UI updated as participants join or leave, modify `public/main.js` to handle disconnections:

```javascript title="JavaScript"
socket.on('peer-disconnected', peerId => {
    const videoElement = document.getElementById(`video-${peerId}`);
    if (videoElement) {
        videoElement.remove();
    }
    delete peers[peerId];
});
```

Update the server-side code in `server.js` to notify clients about disconnections:

```javascript title="JavaScript"
io.on('connection', (socket) => {
    const { id } = socket;

    socket.on('join-room', (room) => {
        socket.join(room);
        socket.to(room).emit('joined-room', { peerId: id });
    });

    socket.on('signal', ({ peerId, data }) => {
        io.to(peerId).emit('signal', { peerId: id, data });
    });

    socket.on('disconnect', () => {
        io.emit('peer-disconnected', id);
    });
});
```

With these changes, your Simple-Peer application now supports multiple participants, dynamically adding and removing video elements as peers join and leave the session. In the next section, we'll guide you through running your application and performing final tests.

## Step 6: Run Your Code Now

### Testing the Application

Now that we have implemented all the essential features, it's time to test your Simple-Peer WebRTC application. Follow these steps to run and test your application locally:

#### Start the Server
Open your terminal, navigate to your project directory, and run:

```bash title="bash"
    node server.js
```

This command starts your Express server, which will handle signaling between peers.

#### Open the Application in the Browser
Open your web browser and navigate to `http://localhost:3000`. You'll see the join screen where you can enter a room name and join the session.

#### Test Peer Connections
Open another tab or a different browser and join the same room. You should see both local and remote video streams appear.

#### Test Controls
Use the Mute Audio, Mute Video, and Share Screen buttons to verify that the controls work as expected. Ensure that video and audio streams toggle on/off correctly and that screen sharing functionality works seamlessly.

### Debugging Tips

- **Console Logs**: Check the browser console for any error messages. These logs can help you identify issues with peer connections, media devices, or signaling.
- **Network Issues**: Ensure that your network allows WebRTC traffic. Firewalls or restrictive network policies can sometimes block peer-to-peer connections.
- **Media Permissions**: Ensure that your browser has the necessary permissions to access the camera and microphone.

### Deploying Your Application

To make your application accessible to others, deploy it on a web server. You can use platforms like Heroku, Vercel, or DigitalOcean. Here’s a basic guide to deploying on Heroku:

#### Initialize a Git Repository
If you haven't already, initialize a git repository in your project directory:

```bash title="bash"
    git init
    git add .
    git commit -m "Initial commit"
```

#### Deploy to Heroku

```bash title="bash"
    heroku create
    git push heroku master
```

#### Open Your Deployed App
Once the deployment is complete, open your application using the URL provided by Heroku.

#### Common Issues and Resolutions

- **Peer Connection Issues**: Ensure that your signaling server is running correctly and that peers are exchanging signaling data.
- **Media Device Errors**: Verify that your media devices are properly connected and that your browser has permission to access them.
- **Network Configuration**: Check your network configuration and firewall settings to ensure they allow WebRTC traffic.

With these steps, you should have a fully functional Simple-Peer WebRTC application running and accessible to others. In the final part, we'll summarize the key points and address frequently asked questions.

## Conclusion 
In this article, we've explored how to build a Simple-Peer WebRTC application using Node.js and JavaScript. We've covered setting up the project, creating a user interface, handling peer connections, implementing audio/video controls, and managing multiple participants. By following these steps, you can create robust P2P communication applications for various use cases like video conferencing, real-time data sharing, and more.

Learn how to build a WebRTC app with Simple Peer using nodejs and JavaScript. Follow this guide to create real-time video and audio connections effortlessly.

How to Build PeerJS WebRTC App?

Build Nodejs WebRTC App with Simple-peer

Simple-Peer WebRTC

## Step 5: Implement Participant View

In this section, we will implement the participant view, which is responsible for displaying the media streams of all participants in the WebRTC session. This step is crucial for providing a comprehensive view of the communication session, allowing users to see and interact with each other.

### Participant View Implementation

#### [a] Extend HTML for Participant View
Ensure your `index.html` includes a container for the participant view:

```html title="HTML"
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Synapse WebRTC</title>
         <style>
             #join-screen {
                 display: block;
             }
             #controls, #participant-view {
                 display: none;
             }
             video {
                 width: 300px;
                 height: 200px;
                 margin: 10px;
                 border: 1px solid #ccc;
             }
         </style>
     </head>
     <body>
         <div id="join-screen">
             <h2>Join a Room</h2>
             <input type="text" id="room-id" placeholder="Enter Room ID">
             <button onclick="joinRoom()">Join</button>
         </div>
         <div id="controls">
             <button onclick="toggleMute()">Mute/Unmute</button>
             <button onclick="toggleVideo()">Video On/Off</button>
         </div>
         <div id="participant-view">
             
         </div>

         <script src="webrtc.js"></script>
     </body>
     </html>
```

#### [b] JavaScript for Handling Participant Streams
Update your `webrtc.js` file to handle the display of remote participant streams:

```javascript title="JavaScript"
     let localStream;
     let pc;
     const participantView = document.getElementById('participant-view');

     async function joinRoom() {
         const roomId = document.getElementById('room-id').value;
         if (!roomId) {
             alert("Please enter a room ID");
             return;
         }

         document.getElementById('join-screen').style.display = 'none';
         document.getElementById('controls').style.display = 'block';
         participantView.style.display = 'block';

         await startWebRTC();
     }

     async function startWebRTC() {
         pc = new RTCPeerConnection();

         pc.onicecandidate = (event) => {
             if (event.candidate) {
                 sendIceCandidate(event.candidate);
             }
         };

         pc.ontrack = (event) => {
             const videoElement = document.createElement('video');
             videoElement.srcObject = event.streams[0];
             videoElement.autoplay = true;
             participantView.appendChild(videoElement);
         };

         localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
         localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

         const offer = await pc.createOffer();
         await pc.setLocalDescription(offer);

         const response = await fetch('/offer', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({ sdp: pc.localDescription.sdp, type: pc.localDescription.type })
         });

         const answer = await response.json();
         await pc.setRemoteDescription(new RTCSessionDescription(answer));
     }

     async function sendIceCandidate(candidate) {
         await fetch('/candidate', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(candidate)
         });
     }

     function toggleMute() {
         const audioTracks = localStream.getAudioTracks();
         audioTracks[0].enabled = !audioTracks[0].enabled;
     }

     function toggleVideo() {
         const videoTracks = localStream.getVideoTracks();
         videoTracks[0].enabled = !videoTracks[0].enabled;
     }
```

### Explanation of the Participant View Process

**HTML Structure:** The `index.html` file now includes a `div` with the id `participant-view`, which will hold video elements for each participant's media stream.

**JavaScript Functions:**
  - **joinRoom Function:** Handles the user input for joining a room and initializes the WebRTC connection.
  - **startWebRTC Function:** Sets up the RTCPeerConnection, requests the local media stream, and handles the negotiation of the WebRTC connection.
  - **pc.ontrack Event:** When a remote track is received, this event creates a new video element, sets its source to the received media stream, and appends it to the `participant-view` div.
  - **sendIceCandidate Function:** Sends ICE candidates to the server to help establish the WebRTC connection.
  - **toggleMute and toggleVideo Functions:** Allow the user to mute/unmute their microphone and turn their video on/off.

By implementing the participant view, you provide a comprehensive interface for users to see and interact with all participants in the WebRTC session. This step completes the core functionality of your Synapse WebRTC application, enabling real-time, decentralized, and secure communication.

In the next section, we will focus on running your code, testing the application, and troubleshooting common issues to ensure everything works as expected.

## Step 6: Run Your Code Now

With the implementation complete, it’s time to run your Synapse WebRTC application and ensure everything works as expected. This final step involves testing the application, troubleshooting any issues, and verifying that all components interact seamlessly.

### Running the Application

#### Start the Synapse Server
   - Ensure your Synapse server is configured correctly and all dependencies are installed.
   - Run your `main.py` script to start the Synapse server:

```bash title="bash"
     python main.py
```

You should see log messages indicating that the Synapse server has started and is listening for WebRTC signaling.

#### Open the Application
   - Open your `index.html` file in a web browser.
   - You should see the join screen where you can enter a room ID.

#### Join a Room and Test
   - Enter a room ID and click the "Join" button.
   - The application should transition to the participant view, displaying your local video stream.
   - Open the application in another browser or on another device, enter the same room ID, and join the room.
   - Verify that both participants can see and hear each other.

#### Test Media Controls
   - Use the "Mute/Unmute" and "Video On/Off" buttons to control your media streams.
   - Ensure that the audio and video states toggle correctly and that changes are reflected in the participant view.

### Troubleshooting Common Issues

#### No Video or Audio
  - Ensure your browser has permission to access the camera and microphone.
  - Check the console for any errors related to media device access.

#### Connection Issues
  - Verify that the signaling server is running and accessible.
  - Check the network settings and firewall rules to ensure that WebRTC signaling ports are open.

#### ICE Candidate Errors
  - Ensure that ICE candidates are being exchanged correctly between peers.
  - Check the console for any ICE candidate errors and troubleshoot accordingly.

#### General Debugging
  - Use browser developer tools to inspect the console logs and network activity.
  - Look for any errors or warnings that can provide clues to potential issues.

## Conclusion

By following this guide, you have successfully built a Synapse WebRTC application that enables decentralized, secure, real-time communication. The integration of Synapse and WebRTC allows for robust and private interactions, making it a powerful solution for modern communication needs.

Learn how to build a secure and decentralized Synapse WebRTC application using Python.

How to Build Mastodon WebRTC App?

How to Build Synapse WebRTC App with Python?

Synapse WebRTC

Python Step-by-Step QuickStart Guide using VideoSDK

Learn how Media Server can ensure smooth real-time communication, improve audio and video quality, and enhance user experience on your platform.