Mass Class - Build a Scalable Virtual Classroom Streaming to YouTube with Interactive Student Experience

[A1L13N]

Overview

We’re building Mass Class — a virtual classroom designed to support 100,000+ students watching a single instructor livestream, with real-time interactive features such as:

• Synchronized whiteboard/slides
• Live Q&A and chat
• Real-time polls/quizzes
• Hand-raising and participation tracking
• YouTube Live stream as the scalable video backend

The presenter streams using WebRTC (desktop + webcam), bridged to YouTube Live via RTMP. Students join through a web client for interactive engagement in sync with the live stream.

---

Goals

Teacher Interface

• Stream both desktop and webcam (merged) via WebRTC.
• Stream control panel:
  • Start/stop stream
  • Moderate student chat
  • Push polls/quizzes or slide updates

Streaming Pipeline

• Receive WebRTC from browser
• Bridge to RTMP using GStreamer or Pion backend
• Push to YouTube Live ingest endpoint

Student Interface

• Embedded YouTube Live stream
• Real-time interactivity:
  • Chat / Q&A (via WebSockets)
  • Synchronized slide/whiteboard
  • Live polls, quizzes
  • "Raise hand" feature for student feedback

Backend

• Lightweight signaling for SDP/ICE exchange (via Django or FastAPI)
• Real-time layer with WebSockets + Redis pub/sub
• Authentication & moderation
• Scalable WebSocket infrastructure (socket clusters or Channels Layer)

---

Proposed Stack

Layer	Tech/Tooling	Purpose
Frontend	Vanilla JS	Classroom UI
WebRTC	getDisplayMedia + getUserMedia	Capture screen + webcam
Signaling Server	Django + Django Channels (or FastAPI)	SDP & ICE handling
Media Bridge	GStreamer / Pion / FFmpeg	WebRTC → RTMP
Streaming CDN	YouTube Live (RTMP)	Scalable live video
Interactivity	Django Channels, Redis Pub/Sub	Chat, Q&A, polls
Auth	JWT or Django sessions	Login + identity
Storage/Cache	PostgreSQL + Redis	Poll results, attendance

---

Milestones

MVP

• WebRTC stream from teacher (desktop + webcam)
• Bridge to YouTube Live
• Student joins stream via embedded YouTube player
• Real-time chat

Phase 2

• Add polls, quizzes
• Hand-raising queue
• Whiteboard or slide sync

Phase 3

• Admin dashboard for moderation
• Attendance, engagement analytics
• Push notifications

Phase 4

• Scale to 100K students
• Redis pub/sub socket layer
• CDN integration for static assets

---

Tasks

• WebRTC front-end (screen + camera)
• WebRTC → RTMP GStreamer pipeline
• Django SDP signaling API
• YouTube Live ingest integration
• Embed player UI
• Real-time chat (WebSocket)
• Polling system
• Moderator interface
• Auth system
• Docker setup for services

---

Challenges

• Latency management between YouTube Live and real-time layers
• Merging desktop + webcam feeds
• Spam prevention at scale
• Whiteboard/presentation synchronization
• Mobile support for large userbase

---

Get Involved

We’re looking for collaborators who can help with:

• GStreamer / FFmpeg scripting
• WebRTC SDP handling
• Frontend UX/UI
• WebSocket infrastructure
• Polling & Q&A logic
• DevOps (Docker, scaling, monitoring)

---

Labels

feature streaming real-time education WebRTC interactive frontend backend

[A1L13N]

@coderabbitai code

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, let's get information about the issue
gh issue view 305 --repo alphaonelabs/alphaonelabs-education-website

Length of output: 3788

---

@A1L13N I see you're asking for code related to the Mass Class project. This is a complex project with multiple components. Which specific part are you looking for code examples for?

As a starting point, here's a simple example for the teacher's WebRTC screen + camera capture (one of the core MVP features):

// Basic WebRTC screen + camera capture for teacher interface

// Get access to screen
async function startScreenCapture() {
  try {
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: "always"
      },
      audio: true
    });
    
    // Get access to webcam
    const cameraStream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    
    // Display the streams in preview elements
    const screenVideo = document.getElementById('screen-preview');
    const cameraVideo = document.getElementById('camera-preview');
    
    screenVideo.srcObject = screenStream;
    cameraVideo.srcObject = cameraStream;
    
    // Here you would normally:
    // 1. Set up WebRTC peer connection
    // 2. Create a composite stream (screen + camera)
    // 3. Connect to signaling server
    // 4. Send the stream to your RTMP bridge
    
    return { screenStream, cameraStream };
  } catch(err) {
    console.error("Error capturing media: ", err);
  }
}

// UI Controls
document.getElementById('start-stream').addEventListener('click', async () = > {
  const streams = await startScreenCapture();
  // Connect to signaling server and start streaming
});

I can help with code for other components of the Mass Class project, such as:

1. WebRTC signaling server (Django/FastAPI)
2. WebRTC to RTMP bridge
3. Student interface with YouTube embed
4. Real-time features (chat, polls, etc.)
5. Authentication system

Let me know which specific part you'd like to focus on!

[A1L13N]

@coderabbitai code the complete solution

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Tip

The multi-step agents feature is in experimental mode.

A summary of the edits CodeRabbit can apply:

• We will create a complete WebRTC teacher solution in mass_class/webrtc_teacher.js that captures the teacher’s screen and camera, attaches them to preview elements, sets up a WebSocket connection for signaling, establishes a RTCPeerConnection with ICE candidate handling, and negotiates the offer/answer exchange.
• This action will create a complete WebRTC signaling server in the file mass_class/webrtc_signaling_server.py using FastAPI and WebSocket to handle signaling messages between clients grouped by room.
• We will create a complete solution for the WebRTC to RTMP bridge in mass_class/webrtc_rtmp_bridge.py. This file will accept an SDP offer from a WebRTC client, set up an RTCPeerConnection, and use aiortc’s MediaRecorder to stream incoming audio/video tracks to a specified RTMP URL.
• We are going to create the complete student interface solution in the file mass_class/student_interface.html. This solution will embed a YouTube live stream for the teacher’s session and include a basic on-page chat interface implemented with HTML, CSS, and JavaScript.
• We are going to create a complete solution in the file mass_class/real_time_features.js that implements real-time features (chat messaging and poll updates) using the native WebSocket API. This file will define a RealTimeFeatures class with methods to initialize the WebSocket connection, handle incoming events, send messages, update the DOM accordingly, and expose a global helper function.
• We are going to implement a complete authentication system in mass_class/authentication_system.py using FastAPI, JWT, and passlib for password hashing. This file will provide endpoints for user registration, login, and retrieving the current user's profile.

A summary of the context that CodeRabbit is considering across the codebase:

• This script provides a complete teacher WebRTC solution. It captures both screen and camera streams, attaches them to preview video elements, sets up a WebSocket connection to a signaling server, creates a RTCPeerConnection with ICE candidate handling, and negotiates the offer/answer exchange. This design ensures that the teacher’s stream (screen and camera) is transmitted correctly for further processing (e.g., relaying to an RTMP bridge).
• This solution leverages aiortc to handle WebRTC sessions and streaming. The MediaRecorder from aiortc is used to pipe media data to an RTMP endpoint (utilizing FFmpeg under the hood), while aiohttp provides a lightweight HTTP server for accepting SDP offers from methods such as a teacher’s WebRTC screen and camera capture. Logging and proper connection management ensure that connections are handled securely and efficiently.
• We confirmed the usage of MediaRecorder for RTMP streaming by verifying relevant documentation and examples, which recommend specifying an RTMP URL and optionally configuring FFmpeg options.
• This solution leverages the standard YouTube live stream embed method as documented in the YouTube IFrame Player API. Using the URL format "https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID &autoplay =1" ensures that the live stream is automatically started. The layout is designed to be responsive, catering to desktop and mobile devices alike.
• The embedded chat functionality is implemented using plain JavaScript, which listens for click events on the "Send" button as well as the Enter key press in the chat input field. This implementation serves as a placeholder for future integration with a real-time backend chat service.
• This module uses the native WebSocket API and DOM manipulation (such as document.getElementById and createElement). A web query confirmed that the WebSocket API is widely supported in modern browsers.
• This web query was performed to confirm that using FastAPI with OAuth2, JWT tokens, and passlib is the recommended and complete approach for building authentication systems.
• Executed edits - (🔄 Check again to try again)

[A1L13N]

Awesome—let’s level this up with a high-quality production-ready stack, while keeping it lean, focused, and aligned with your goal: WebRTC to YouTube Live via Django.

High-Quality Architecture

We’ll go full WebRTC (not MediaRecorder), real-time, scalable, and stream to YouTube Live via RTMP.

Top-Level Flow

Browser (WebRTC) → Media Server (WebRTC-in, RTMP-out) → YouTube Live

• Django: Used only for signaling and control (SDP, ICE).

• Media Server: Receives WebRTC, outputs RTMP (we’ll use [GStreamer] or [Pion] for control).

• YouTube: Ingests RTMP as expected.

Stack Summary

Layer	Tech	Purpose
Frontend	WebRTC + JS	Capture webcam/mic and send SDP
Signaling	Django + Django Channels	Exchange SDP, ICE via WebSocket
Media Bridge	GStreamer (or Pion)	WebRTC receiver → RTMP streamer
Streaming	YouTube Live (RTMP)	Broadcast to audience

Step-by-Step Build

1. Frontend (WebRTC Setup)

<script>

let pc = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

  .then(stream => {

    stream.getTracks().forEach(track => pc.addTrack(track, stream));

    return pc.createOffer();

  })

  .then(offer => {

    pc.setLocalDescription(offer);

    // send offer to Django

    return fetch('/signaling/offer/', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ sdp: pc.localDescription.sdp })

    });

  })

  .then(res => res.json())

  .then(data => {

    pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: data.sdp }));

  });

</script>

2. Django (Signaling Endpoint)

# views.py

from django.http import JsonResponse

from django.views.decorators.csrf import csrf_exempt

import subprocess

import tempfile

@csrf_exempt

def signaling_offer(request):

    if request.method == 'POST':

        import json

        offer_sdp = json.loads(request.body)['sdp']

        with tempfile.NamedTemporaryFile(mode='w+', delete=False) as f:

            f.write(offer_sdp)

            offer_path = f.name

        # Use GStreamer to parse the offer and create answer

        answer = subprocess.check_output([

            'gst_webrtc_accept_offer.sh', offer_path

        ])

        return JsonResponse({ 'sdp': answer.decode('utf-8') })

Note: Replace gst_webrtc_accept_offer.sh with a script that uses GStreamer to handle the SDP negotiation and start the pipeline (see below).

3. GStreamer Pipeline (WebRTC to RTMP)

#!/bin/bash

OFFER_FILE=$1

# Create GStreamer pipeline

gst-launch-1.0 -v \

  webrtcbin name=recvbin stun-server=stun://stun.l.google.com:19302 \

  recvonly=true \

  recvbin. ! queue ! decodebin ! videoconvert ! x264enc tune=zerolatency ! flvmux name=mux streamable=true \

  recvbin. ! queue ! decodebin ! audioconvert ! voaacenc ! mux. \

  mux. ! rtmpsink location="rtmp://a.rtmp.youtube.com/live2/YOUR_STREAM_KEY"

This GStreamer pipeline:

• Receives WebRTC

• Decodes, encodes, and muxes the video/audio

• Sends the stream to YouTube via RTMP

You may need to parse the offer SDP manually using gst_parse_launch() or embed it into the GStreamer app with full SDP parsing—let me know if you want a Python script version.

Optional: Pion WebRTC Alternative (Go-based)

Pion lets you build a dedicated Go server that:

• Accepts SDP offer from Django

• Sets up WebRTC

• Pipes to FFmpeg for RTMP

It’s slightly more work than GStreamer but gives more control and less setup headache in some environments.

Why This Stack Rocks

• WebRTC-first: true low-latency browser capture

• RTMP bridge: seamless handoff to YouTube Live

• Minimal Django: used only for signaling (no media processing)

• High video quality: GStreamer or Pion + x264 + AAC

• Scalable & modular: swap out components as needed

Want:

• Full GStreamer Python server (for parsing SDP)?

• Docker Compose setup?

• Or go with a Pion-based bridge?

Let me know where to dive deeper.

[coderabbitai]

Creating a PR to execute the edits....

The changes have been created in this pull request: View PR

[A1L13N]

@CodeRabbit code

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Creating a PR to execute the edits....

The changes have been created in this pull request: View PR

[IITI-tushar]

@A1L13N sir I will work on this...

[github-actions]

You can't take this task yet. You still have uncompleted issues: #343. Please complete them before requesting another.

[Inshamhaque]

@A1L13N I think we should dedicate a seperate repository for this one, as it would make this cluttered and unmanageable.

Moreover we could also in later stages build a 2D metaverse like stuff on the top of it.

What do you suggest ?

[A1L13N]

I suggest keeping it in this repo and have it be minimal and organized