SimpleWebRTC is a JavaScript library that simplifies the use of WebRTC technology. It provides intuitive APIs for managing real-time audio and video communicationn, including room management. This guide will walk you through the process of creating, joining, and leaving rooms using SimpleWebRTC.

Setting Up SimpleWebRTC

To get started with SimpleWebRTC, clone the repository and install the dependencies:

git clone https://gitcode.com/gh_mirrors/si/SimpleWebRTC
cd SimpleWebRTC
npm install

Initialize a SimpleWebRTC instance with the following code:

const webrtc = new SimpleWebRTC({
  localVideoEl: 'localVideo',
  remoteVideosEl: 'remoteVideos',
  autoRequestMedia: true
});

Creating a Room

Creating a room is the first step in real-time communication. Use the createRoom method to create a new room.

Basic Usage

// Create a room named "my-first-room"
webrtc.createRoom('my-first-room', (err, room) => {
  if (err) {
    console.error('Failed to create room:', err);
  } else {
    console.log('Room created successfully:', room);
    // Handle successful room creation
  }
});

Method Parameters

• name (string): The name of the room, used to identify different rooms.
• cb (function, optional): A callback function to handle the result of the room creation.

Joining a Room

To join an existing room, use the joinRoom method.

Basic Usage

// Join the room named "my-first-room"
webrtc.joinRoom('my-first-room', (err, roomDescription) => {
  if (err) {
    console.error('Failed to join room:', err);
  } else {
    console.log('Successfully joined room:', roomDescription);
    // Handle successful room joining
  }
});

Event Handling After Joining a Room

After successfully joining a room, SimpleWebRTC triggers several events. You can listen to these events to handle different scenarios:

// When a new peer joins the room
webrtc.on('peerStreamAdded', (peer) => {
  console.log('New user joined:', peer);
  // Handle the new user's audio and video stream
});

// When a peer leaves the room
webrtc.on('peerStreamRemoved', (peer) => {
  console.log('User left:', peer);
  // Clean up the departed user's audio and video stream
});

Leaving a Room

To leave a room, use the leaveRoom method.

Basic Usage

// Leave the current room
webrtc.leaveRoom();

Internal Processing of leaveRoom

The leaveRoom method performs the following actions:

1. Sends a notification to the server to leave the room.
2. Ends all current peer connections.
3. Stops screen sharing if it is active.
4. Triggers the leftRoom event.

You can listen to the leftRoom event to handle post-leave cleanup:

webrtc.on('leftRoom', (roomName) => {
  console.log('Left room:', roomName);
  // Perform cleanup after leaving the room
});

Complete Example of Room Management

Here is a complete example that includes creating, joining, and leaving a room:

// Initialize SimpleWebRTC
const webrtc = new SimpleWebRTC({
  localVideoEl: 'localVideo',
  remoteVideosEl: 'remoteVideos',
  autoRequestMedia: true
});

// Event listener for creating a room
document.getElementById('createRoom').addEventListener('click', () => {
  const roomName = document.getElementById('roomName').value;
  webrtc.createRoom(roomName, (err) => {
    if (err) {
      alert('Failed to create room: ' + err.message);
    } else {
      alert('Room created successfully!');
    }
  });
});

// Event listener for joining a room
document.getElementById('joinRoom').addEventListener('click', () => {
  const roomName = document.getElementById('roomName').value;
  webrtc.joinRoom(roomName, (err) => {
    if (err) {
      alert('Failed to join room: ' + err.message);
    } else {
      alert('Successfully joined room!');
    }
  });
});

// Event listener for leaving a room
document.getElementById('leaveRoom').addEventListener('click', () => {
  webrtc.leaveRoom();
  alert('Left room');
});

Common Issues and Solutions

Room Creation Failure

If room creation fails, possible reasons include:

• The room name already exists.
• Network connection issues.
• Server configuration errors.

Solutions:

1. Try using a different room name.
2. Check your network connection.
3. Review the console error messages for more details.

Detecting User Status in a Room

You can detect user status changes by listening to the following events:

• peerJoined: A new user has joined the room.
• peerLeft: A user has left the room.
• connectionReady: The connection is ready.

Conclusion

SimpleWebRTC offers a straightforward and powerful API for managing WebRTC rooms. With the createRoom, joinRoom, and leaveRoom methods, developers can easily implement real-time audio and video communication features. Whether you are building a video conferencing application or a online education platform, SimpleWebRTC can help you get started with WebRTC technology and reduce development complexity.