Notes on Building a Web Conferencing Application

Course Overview

• Create a web conferencing site similar to Google Meet.
• Technologies: HTML, CSS, JavaScript, WebRTC, Socket.io.
• Structure: Modules for setting up the environment, creating UI, signaling, and video handling.

Course Structure

• Setting Up the Environment

  • Create root folder structure:
    • Google_meet
    • public
    • assets (images, CSS, JS)
    • Create index.html, action.html files.
  • Confirm Node.js installation and initialize npm.
  • Install dependencies: Express.js, Socket.io.

• Landing Page (action.html)

  • Create HTML structure.
  • Use Bootstrap for CSS styling.
  • Create buttons for joining and starting meetings.
  • Create JavaScript functionality to direct users to the appropriate meeting pages.

• Web Conferencing Page (index.html)

  • Basic HTML structure and styling for video conferencing.
  • Use Flexbox for layout.
  • Handle user video and audio streams using WebRTC.

• Signaling with Socket.io

  • Use Socket.io for signaling between users.
  • Emit events for user joining/leaving, sending messages, and video stream handling.

• Video Functionality

  • Implement user video/audio streams using WebRTC.
  • Handle joining user streams, including enabling/disabling audio and video.
  • Create full-screen functionality for video.

• Messaging System

  • Create UI for messaging between users.
  • Handle sending/receiving messages with Socket.io.
  • Display incoming messages in the chat area.

• Participant Details

  • Create UI to display participant information.
  • Dynamically update participant count as users join/leave.

• File Sharing

  • Use Express File Upload to handle file uploads from users.
  • Notify users of file attachments using Socket.io.
  • Display uploaded files in the chat or participant area.

• Recording Functionality

  • Implement recording functionality for meetings using MediaRecorder API.
  • Allow users to start/stop recordings and download them as files.

Important Code Snippets and Functionalities

• Socket.io Setup:

  const io = require("socket.io")(server);  
  io.on("connection", (socket) => {
      console.log(`User connected: ${socket.id}`);
  });
  

• Adding Participants:

  • Store user data in an array and notify other users of participation.

  socket.on("user_connect", (data) => {
      // Handle new user connection
  });
  

• Full-Screen Functionality:

  videoElement.requestFullscreen();
  

• File Upload Handling:

  app.post('/upload', (req, res) => {
      let file = req.files.sampleFile;  
      file.mv('./uploads/' + file.name, (err) => {
          if (err) return res.status(500).send(err);
          res.send('File uploaded!');
      });
  });
  

Additional Notes

• Error Handling: Always include error checking for all asynchronous operations such as file uploads and socket communications.
• Testing: Ensure to test the application in multiple environments to validate functionality.