sbmeet 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ecf2a5562c629b32a4e74e341a52a9284398b2572c2b3f56af8d94fb2026d605
+  data.tar.gz: b816bfdc4728e1357db41c1d2e1bd84d6471426127f8da4c1ac58a2236ee693c
+SHA512:
+  metadata.gz: a12fa26b5bb1facd24c5ffad5b9cec39d065312fe15a51853af082b9ee0970c9f0db8ca2d9dd9ac2165c486b3bc87054d5c248a264a6fcdf6ddcf73c816d24ff
+  data.tar.gz: b11fa95c46fc6c8f4811f506d3b5a3f4be94744d47699bd65a4eff111678ddbcae84b04a00c2622f1334c5e4435d4c9412be916991af635a65d752860853f368

data/Gemfile

@@ -0,0 +1,2 @@
+source "https://rubygems.org"
+gemspec

data/README.md

@@ -0,0 +1,27 @@
+# SBMeet
+
+SBMeet is a fully functional, high-definition (1080p) WebRTC video conferencing for your rails  application.  
+
+One on One only , fullscreen supported (even in stupid IOS),realtime bandwith and audio level  visualisation.  
+
+It support 4/5g to wifi switch , page refresh and ios fullscreen and it comes with basic bootstrap styling.  
+
+Minimal implementation , with maximum performance .(Work on basic dyno of heroku)  
+
+
+## Prerequisites
+* **Devise** (Used to ensure room administration as well as reconection or participant maxing)
+* **PostgreSQL** (Used natively for both ActiveRecord and ActionCable signaling)
+* **Importmap, esbuild, or Webpack** (for Stimulus and ActionCable JS)  
+## Installation
+Add `gem 'sbmeet'` to your Gemfile and run `bundle install`.
+It takes care of styling with bootstrap cdn  if not present
+It injects configurations and views files .   
+
+## Usage
+Run the installation generator:
+`rails generate sbmeet:install`
+`rails db:migrate`
+
+Start your server (`bin/dev`) and navigate to `/rooms`.
+

data/lib/generators/sbmeet/install_generator.rb

@@ -0,0 +1,147 @@
+require "rails/generators/active_record"
+
+module Sbmeet
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      include Rails::Generators::Migration
+      source_root File.expand_path("templates", __dir__)
+      desc "Injects the complete SBMeet WebRTC infrastructure into the host application."
+
+      def check_host_authentication_capabilities
+        say "Analyzing host application environment...", :yellow
+        Rails.application.eager_load!
+        
+        user_model_path = "app/models/user.rb"
+
+        if ApplicationController.new.respond_to?(:current_user, true)
+          say_status :success, "Found 'current_user' definition.", :green
+
+          if ::File.exist?(user_model_path)
+            user_methods = defined?(User) ? User.instance_methods : []
+
+            if user_methods.include?(:admin?)
+              say_status :success, "Found 'admin?' method on the User model.", :green
+            else
+              say_status :warning, "User model found, but 'admin?' is missing.", :yellow
+              method_injection = <<~RUBY
+                  # Added by SBMeet Installer
+                  def admin?
+                    Rails.env.development? || Rails.env.test?
+                  end
+              RUBY
+
+              inject_into_file user_model_path, method_injection, after: /class User < ApplicationRecord.*\n/
+              say_status :insert, "Added fallback admin? method to #{user_model_path}", :green
+            end
+          else
+            say_status :error, "Could not find a standard 'User' model file at #{user_model_path}.", :red
+            exit 1
+          end
+        else
+          say_status :error, "No 'current_user' method detected in ApplicationController.", :red
+          say "Make sure you install and configure an authentication library (like Devise) before using SBMeet.", :white
+          exit 1
+        end
+      end
+
+      def check_if_pg
+        unless File.read("config/database.yml").include?("postgresql")
+          say_status :error, "SBMeet requires PostgreSQL for ActionCable signaling.", :red
+          exit 1
+        end
+      end
+
+      def verify_and_update_application_js
+        target_file = "app/javascript/application.js"
+
+        unless File.exist?(target_file)
+          say_status :error, "SBMeet requires a configured JavaScript asset pipeline.", :red
+          exit 1
+        end
+
+        js_content = File.read(target_file)
+
+        unless js_content.include?('import "channels"') || js_content.include?("import './channels'")
+          say_status :insert, "Appending channels import to application.js", :green
+          append_to_file target_file, "\nimport \"channels\""
+        end
+      end
+
+      def self.next_migration_number(dirname)
+        ActiveRecord::Generators::Base.next_migration_number(dirname)
+      end
+
+      def setup_database
+        migration_template "migrations/create_rooms.rb.erb", "db/migrate/create_rooms.rb"
+        say_status :success, "Created Room model migration.", :green
+      end
+
+      def verify_devise
+        has_devise_gem = File.read("Gemfile").include?("gem 'devise'")
+        has_devise_model = File.exist?("app/models/user.rb") && File.read("app/models/user.rb").include?("devise :")
+
+        if has_devise_gem && has_devise_model
+          say_status :success, "Devise authentication validated.", :green
+        else
+          say_status :warning, "Devise setup not fully detected. Check your configuration if connection errors occur.", :yellow
+        end
+      end
+
+      def copy_application_logic
+        copy_file "models/room.rb", "app/models/room.rb", force: true
+        copy_file "controllers/rooms_controller.rb", "app/controllers/rooms_controller.rb", force: true
+      end
+
+      def copy_frontend_assets
+        copy_file "javascript/room_controller.js", "app/javascript/controllers/room_controller.js", force: true
+        copy_file "javascript/index.js", "app/javascript/controllers/index.js", force: true
+        
+        directory "javascript/channels", "app/javascript/channels", force: true
+        directory "views/rooms", "app/views/rooms", force: true
+      end
+
+      def inject_bootstrap_if_missing
+        has_bootstrap = ((File.exist?("config/importmap.rb") && File.read("config/importmap.rb").include?("bootstrap")) ||
+                         (File.exist?("package.json") && File.read("package.json").include?("bootstrap")) ||
+                         (File.exist?("app/assets/stylesheets/application.bootstrap.scss")))
+
+        unless has_bootstrap
+          say_status :info, "Injecting Bootstrap 5 CDN into room views.", :yellow
+          prepend_file "app/views/rooms/show.html.erb", "<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n"
+          prepend_file "app/views/rooms/index.html.erb", "<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n"
+        end
+      end
+
+      def setup_action_cable
+        # Overwrite cable configuration with your PG/Redis required layout
+        template "config/cable.yml", "config/cable.yml", force: true
+
+        copy_file "channels/signaling_channel.rb", "app/channels/signaling_channel.rb", force: true
+
+        # FIXED: Use force: true to overwrite default empty Rails framework files
+        copy_file "channels/connection.rb", "app/channels/application_cable/connection.rb", force: true
+        copy_file "channels/channel.rb", "app/channels/application_cable/channel.rb", force: true
+      end
+
+      def setup_javascript_dependencies
+        if File.exist?("config/importmap.rb")
+          importmap_content = File.read("config/importmap.rb")
+          
+          unless importmap_content.include?('"@rails/actioncable"')
+            append_to_file "config/importmap.rb", "\npin \"@rails/actioncable\", to: \"actioncable.esm.js\""
+          end
+          unless importmap_content.include?('pin_all_from "app/javascript/channels"')
+            append_to_file "config/importmap.rb", "\npin_all_from \"app/javascript/channels\", under: \"channels\""
+          end
+          unless importmap_content.include?('pin_all_from "app/javascript/controllers"')
+            append_to_file "config/importmap.rb", "\npin_all_from \"app/javascript/controllers\", under: \"controllers\""
+          end
+        end
+      end
+
+      def inject_routes
+        route "resources :rooms, only: [:index, :show, :new, :create, :destroy]"
+      end
+    end
+  end
+end

data/lib/generators/sbmeet/templates/channels/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

data/lib/generators/sbmeet/templates/channels/connection.rb

@@ -0,0 +1,17 @@
+module ApplicationCable
+    class Connection < ActionCable::Connection::Base
+      identified_by :current_user
+  
+      def connect
+        self.current_user = find_verified_user
+      end
+  
+      private
+  
+      def find_verified_user
+        # Devise handles session tracking using warden inside cookies
+        env['warden'].user || reject_unauthorized_connection
+      end
+    end
+  end
+  

data/lib/generators/sbmeet/templates/channels/signaling_channel.rb

@@ -0,0 +1,13 @@
+class SignalingChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "signaling_room_#{params[:room_id]}"
+  end
+
+  def receive(data)
+    # Inject authenticated current_user context directly into outbound payloads
+    data[:user_id] = current_user.id
+    data[:user_name] = current_user.email.split('@').first.capitalize
+    
+    ActionCable.server.broadcast("signaling_room_#{data['room_id']}", data)
+  end
+end

data/lib/generators/sbmeet/templates/config/cable.yml

@@ -0,0 +1,9 @@
+development:
+  adapter: postgresql
+
+test:
+  adapter: test
+
+production:
+  adapter: postgresql
+  channel_prefix: sbmeet_production

data/lib/generators/sbmeet/templates/controllers/rooms_controller.rb

@@ -0,0 +1,39 @@
+class RoomsController < ApplicationController
+  before_action :authenticate_user!, only: [:index, :show, :create, :destroy]
+  def index
+    @rooms = Room.all
+    @room = Room.new
+  end
+
+  def show
+      @room = Room.find(params[:id])
+      @active_users = [@current_user] 
+    end
+
+  def create
+    @room = Room.new(room_params)
+    if @room.save
+      redirect_to @room
+    else
+      render :index, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    if current_user
+      @room = Room.find(params[:id])
+      @room.destroy
+      redirect_to rooms_path, notice: "Room deleted successfully."
+    else
+      redirect_to rooms_path, alert: "You do not have permission to delete this room."
+    end
+  end
+
+  private
+  def set_room
+    @room = Room.find(params[:id]) # This only requires params[:id], which the link sends.
+  end
+  def room_params
+    params.require(:room).permit(:name)
+  end
+end

data/lib/generators/sbmeet/templates/javascript/channels/consumer.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

data/lib/generators/sbmeet/templates/javascript/channels/index.js

@@ -0,0 +1,2 @@
+// Import all the channels to be used by Action Cable
+import "channels/signaling_channel"

data/lib/generators/sbmeet/templates/javascript/channels/signaling_channel.js

@@ -0,0 +1,15 @@
+import consumer from "channels/consumer"
+
+consumer.subscriptions.create("SignalingChannel", {
+  connected() {
+    // Called when the subscription is ready for use on the server
+  },
+
+  disconnected() {
+    // Called when the subscription has been terminated by the server
+  },
+
+  received(data) {
+    // Called when there's incoming data on the websocket for this channel
+  }
+});

data/lib/generators/sbmeet/templates/javascript/index.js

@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/lib/generators/sbmeet/templates/javascript/room_controller.js

@@ -0,0 +1,365 @@
+// app/javascript/controllers/room_controller.js
+import { Controller } from "@hotwired/stimulus"
+import { createConsumer } from "@rails/actioncable"
+
+const MEDIA_CONSTRAINTS = {
+  video: { width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 30, max: 60 }, facingMode: "user" },
+  audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, channelCount: 1 }
+}
+
+const RTC_CONFIG = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] }
+const MAX_BITRATE = 4000000
+
+export default class extends Controller {
+  static targets = ["localVideo", "remoteContainer"]
+  static values = { id: Number, currentUserId: Number, currentUserName: String }
+
+  connect() {
+    this.peers = {}
+    this.audioAnimationFrames = {} 
+    this.audioContext = null
+    this.consumer = createConsumer()
+    this.startLocalStream()
+  }
+
+  disconnect() {
+    if (this.signalingChannel) this.signalingChannel.unsubscribe()
+    if (this.localStream) this.localStream.getTracks().forEach(t => t.stop())
+    if (this.audioContext) this.audioContext.close()
+    
+    Object.values(this.audioAnimationFrames).forEach(cancelAnimationFrame)
+    Object.values(this.peers).forEach(pc => clearInterval(pc.statsInterval))
+  }
+
+  // --- 1. MEDIA & SIGNALING INITIALIZATION ---
+
+  async startLocalStream() {
+    try {
+      this.localStream = await navigator.mediaDevices.getUserMedia(MEDIA_CONSTRAINTS)
+      this.localVideoTarget.srcObject = this.localStream
+      this.trackAudioLevel(this.localStream, "local-audio-level")
+      this.connectToSignaling()
+    } catch (error) {
+      console.error("Media permission rejected:", error)
+      alert("Microphone and Camera access are required.")
+    }
+  }
+
+  connectToSignaling() {
+    const self = this
+    this.signalingChannel = this.consumer.subscriptions.create(
+      { channel: "SignalingChannel", room_id: this.idValue },
+      {
+        connected() { self.transmit("join") },
+        received(data) { self.handleSignal(data) }
+      }
+    )
+  }
+
+  transmit(type, payload = {}) {
+    this.signalingChannel.perform("receive", { room_id: this.idValue, type, ...payload })
+  }
+
+  // --- 2. SIGNALING ROUTER ---
+
+  handleSignal(data) {
+    if (data.user_id === this.currentUserIdValue) return
+
+    if (data.type === "join") {
+      const separateActivePeers = Object.keys(this.peers).filter(id => parseInt(id) !== data.user_id)
+      if (separateActivePeers.length >= 1) {
+        return this.transmit("room-full", { target_user_id: data.user_id })
+      }
+      if (this.peers[data.user_id]) this.removeParticipant(data.user_id) 
+    }
+
+    if (data.type === "room-full" && data.target_user_id === this.currentUserIdValue) {
+      return this.handleRoomFullExclusion()
+    }
+
+    if (["offer", "answer", "ice-candidate"].includes(data.type) && data.target_user_id !== this.currentUserIdValue) return
+
+    switch (data.type) {
+      case "join":
+        this.initPeer(data.user_id, data.user_name, true)
+        this.transmit("discover", { target_peer_id: data.user_id })
+        break
+      case "discover":
+        if (data.target_peer_id === this.currentUserIdValue) this.initPeer(data.user_id, data.user_name, false)
+        break
+      case "offer":
+        this.handleOffer(data.user_id, data.user_name, data.offer)
+        break
+      case "answer":
+        if (this.peers[data.user_id]) this.peers[data.user_id].setRemoteDescription(new RTCSessionDescription(data.answer))
+        break
+      case "ice-candidate":
+        if (this.peers[data.user_id]) this.peers[data.user_id].addIceCandidate(new RTCIceCandidate(data.candidate))
+        break
+      case "leave":
+        this.removeParticipant(data.user_id)
+        break
+    }
+  }
+
+  // --- 3. WEBRTC PIPELINE ---
+
+  initPeer(userId, userName, isOfferor) {
+    if (this.peers[userId]) return
+    this.addParticipantToRoster(userId, userName)
+
+    const pc = new RTCPeerConnection(RTC_CONFIG)
+    pc.isOfferor = isOfferor
+    this.peers[userId] = pc
+
+    this.localStream.getTracks().forEach(track => pc.addTrack(track, this.localStream))
+
+    pc.addEventListener("negotiationneeded", () => this.maximizeVideoBitrate(pc))
+    
+    pc.oniceconnectionstatechange = () => {
+      if (["disconnected", "failed"].includes(pc.iceConnectionState)) {
+        this.triggerIceRestart(userId)
+      } else if (pc.iceConnectionState === "connected") {
+        this.trackNetworkStats(pc, userId)
+      }
+    }
+
+    pc.onicecandidate = (event) => {
+      if (event.candidate) this.transmit("ice-candidate", { candidate: event.candidate, target_user_id: userId })
+    }
+
+    pc.ontrack = (event) => this.mountRemoteVideo(userId, userName, event.streams[0])
+
+    if (isOfferor) this.createAndSendOffer(userId)
+  }
+
+  async maximizeVideoBitrate(pc) {
+    try {
+      const videoSender = pc.getSenders().find(s => s.track?.kind === "video")
+      if (!videoSender?.getParameters) return
+      
+      const parameters = videoSender.getParameters()
+      if (!parameters.encodings) parameters.encodings = [{}]
+      parameters.encodings[0].maxBitrate = MAX_BITRATE
+      parameters.degradationPreference = "maintain-resolution"
+      
+      await videoSender.setParameters(parameters)
+    } catch (err) {
+      console.warn("Bitrate override failed:", err)
+    }
+  }
+
+  async createAndSendOffer(userId, iceRestart = false) {
+    const pc = this.peers[userId]
+    const offer = await pc.createOffer({ iceRestart })
+    await pc.setLocalDescription(offer)
+    this.transmit("offer", { offer: pc.localDescription, target_user_id: userId })
+  }
+
+  async handleOffer(userId, userName, offer) {
+    this.initPeer(userId, userName, false)
+    const pc = this.peers[userId]
+    await pc.setRemoteDescription(new RTCSessionDescription(offer))
+    const answer = await pc.createAnswer()
+    await pc.setLocalDescription(answer)
+    this.transmit("answer", { answer: pc.localDescription, target_user_id: userId })
+  }
+
+  async triggerIceRestart(userId) {
+    if (this.peers[userId]?.isOfferor) {
+      console.log("Network topology shift. Initiating ICE restart...")
+      this.createAndSendOffer(userId, true)
+    }
+  }
+
+  // --- 4. NETWORK DIAGNOSTICS POLLING ---
+
+  trackNetworkStats(pc, userId) {
+    let lastResult = null
+
+    pc.statsInterval = setInterval(async () => {
+      if (pc.iceConnectionState !== "connected" && pc.iceConnectionState !== "completed") return
+
+      try {
+        const stats = await pc.getStats()
+        
+        stats.forEach(report => {
+          if (report.type === "outbound-rtp" && report.kind === "video") {
+            const now = report.timestamp
+            const bytes = report.bytesSent
+
+            if (lastResult && lastResult.has(report.id)) {
+              const lastReport = lastResult.get(report.id)
+              const bitRate = (8 * (bytes - lastReport.bytesSent)) / (now - lastReport.timestamp)
+              const mbps = (bitRate / 1000).toFixed(2) 
+              
+              const localEmitLabel = document.getElementById("local-emit-rate")
+              if (localEmitLabel) localEmitLabel.innerText = mbps
+            }
+          }
+
+          if (report.type === "inbound-rtp" && report.kind === "video") {
+            const now = report.timestamp
+            const bytes = report.bytesReceived
+            const packetsLost = report.packetsLost
+
+            if (lastResult && lastResult.has(report.id)) {
+              const lastReport = lastResult.get(report.id)
+              const bitRate = (8 * (bytes - lastReport.bytesReceived)) / (now - lastReport.timestamp)
+              const mbps = (bitRate / 1000).toFixed(2)
+              
+              const remoteRecvLabel = document.getElementById(`remote-recv-rate-${userId}`)
+              if (remoteRecvLabel) remoteRecvLabel.innerText = mbps
+
+              const remoteLossLabel = document.getElementById(`remote-loss-${userId}`)
+              if (remoteLossLabel) {
+                remoteLossLabel.innerText = packetsLost
+                const droppedRecently = packetsLost - lastReport.packetsLost
+                remoteLossLabel.className = droppedRecently > 0 ? "text-danger fw-bold" : "text-success"
+              }
+            }
+          }
+        })
+        
+        lastResult = stats
+      } catch (err) {
+        console.warn("Could not retrieve WebRTC stats:", err)
+      }
+    }, 1000) 
+  }
+
+  // --- 5. DOM & UI MANAGEMENT ---
+
+  mountRemoteVideo(userId, userName, stream) {
+    if (document.getElementById(`video-${userId}`)) return
+
+    const html = `
+      <div class="col-12" id="container-${userId}">
+        <div class="card bg-dark border-0 shadow overflow-hidden">
+          <div class="position-relative d-flex flex-column bg-black">
+            <div class="d-flex position-relative" id="wrapper-${userId}">
+              <div class="ratio ratio-16x9 bg-black flex-grow-1">
+                <video id="video-${userId}" autoplay playsinline class="w-100 h-100 object-fit-cover"></video>
+              </div>
+              <div class="bg-black border-start border-secondary p-1 d-flex align-items-end" style="width: 14px;">
+                <div id="audio-level-${userId}" class="w-100 bg-success rounded-top" style="height: 0%; min-height: 2px; transition: height 0.05s ease;"></div>
+              </div>
+              <span class="position-absolute bottom-0 start-0 m-3 badge bg-secondary opacity-75 z-3">${userName}</span>
+              <button id="fullscreen-${userId}" class="btn btn-sm btn-light position-absolute top-0 end-0 m-2 opacity-50 hover-opacity-100 z-3" title="Toggle Fullscreen">⛶</button>
+            </div>
+            
+            <div class="bg-dark text-white p-2 small font-monospace d-flex justify-content-between border-top border-secondary" style="font-size: 0.75rem;">
+              <div>📥 Receiving: <span id="remote-recv-rate-${userId}">0.00</span> Mbps</div>
+              <div>📉 Loss: <span id="remote-loss-${userId}" class="text-success">0</span> pkts</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+    this.remoteContainerTarget.insertAdjacentHTML('beforeend', html)
+    
+    const videoEl = document.getElementById(`video-${userId}`)
+    videoEl.srcObject = stream
+    
+    document.getElementById(`fullscreen-${userId}`).onclick = () => this.toggleFullscreen(document.getElementById(`wrapper-${userId}`), videoEl)
+    
+    this.trackAudioLevel(stream, `audio-level-${userId}`, userId)
+  }
+
+  toggleFullscreen(containerNode, videoNode) {
+    if (typeof videoNode.webkitEnterFullscreen === 'function') {
+      return videoNode.webkitEnterFullscreen() 
+    }
+    
+    if (!document.fullscreenElement) {
+      containerNode.requestFullscreen().catch(() => {
+        if (videoNode.requestFullscreen) videoNode.requestFullscreen().catch(console.error)
+      })
+    } else {
+      if (document.exitFullscreen) document.exitFullscreen()
+    }
+  }
+
+  toggleLocalFullscreen() {
+    this.toggleFullscreen(this.localVideoTarget.closest(".d-flex.position-relative"), this.localVideoTarget)
+  }
+
+  handleRoomFullExclusion() {
+    alert("This room is full. Only 2 participants are allowed simultaneously.")
+    this.disconnect()
+    window.location.href = "/" 
+  }
+
+  // --- 6. AUDIO VISUALIZER ---
+
+  trackAudioLevel(stream, elementId, userId = 'local') {
+    if (stream.getAudioTracks().length === 0) return
+
+    try {
+      if (!this.audioContext) this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
+      
+      const analyser = this.audioContext.createAnalyser()
+      const source = this.audioContext.createMediaStreamSource(stream)
+      
+      analyser.fftSize = 256
+      source.connect(analyser)
+      
+      const dataArray = new Uint8Array(analyser.frequencyBinCount)
+
+      const updateLevel = () => {
+        const progressBar = document.getElementById(elementId)
+        if (!progressBar) return
+
+        analyser.getByteFrequencyData(dataArray)
+        const average = dataArray.reduce((acc, val) => acc + val, 0) / analyser.frequencyBinCount
+        const percentage = Math.min(Math.round((average / 120) * 100), 100)
+        
+        progressBar.style.height = `${percentage}%`
+        progressBar.className = `w-100 rounded-top ${percentage > 80 ? 'bg-danger' : percentage > 45 ? 'bg-warning' : 'bg-success'}`
+
+        this.audioAnimationFrames[userId] = requestAnimationFrame(updateLevel)
+      }
+
+      updateLevel()
+    } catch (e) {
+      console.error("Audio context initialization failure", e)
+    }
+  }
+
+  // --- 7. ROSTER MANAGEMENT ---
+
+  addParticipantToRoster(userId, userName) {
+    if (document.getElementById(`roster-${userId}`)) return
+    const listContainer = document.getElementById("participant-list")
+    if (!listContainer) return
+
+    listContainer.insertAdjacentHTML('beforeend', `
+      <li id="roster-${userId}" class="list-group-item d-flex align-items-center text-muted">
+        <span class="p-1 bg-secondary border border-light rounded-circle me-2"></span>${userName}
+      </li>
+    `)
+    this.updateParticipantCount()
+  }
+
+  removeParticipant(userId) {
+    if (this.peers[userId]) {
+      clearInterval(this.peers[userId].statsInterval)
+      this.peers[userId].close()
+      delete this.peers[userId]
+    }
+    
+    if (this.audioAnimationFrames[userId]) {
+      cancelAnimationFrame(this.audioAnimationFrames[userId])
+      delete this.audioAnimationFrames[userId]
+    }
+
+    document.getElementById(`container-${userId}`)?.remove()
+    document.getElementById(`roster-${userId}`)?.remove()
+    this.updateParticipantCount()
+  }
+
+  updateParticipantCount() {
+    const counter = document.getElementById("participant-count")
+    if (counter) counter.innerText = Object.keys(this.peers).length + 1
+  }
+}

data/lib/generators/sbmeet/templates/migrations/create_rooms.rb.erb

@@ -0,0 +1,8 @@
+class CreateRooms < ActiveRecord::Migration[<%= ActiveRecord::Migration.current_version %>]
+  def change
+    create_table :rooms do |t|
+      t.string :name, null: false
+      t.timestamps
+    end
+  end
+end

data/lib/generators/sbmeet/templates/models/room.rb

@@ -0,0 +1,3 @@
+class Room < ApplicationRecord
+  validates :name, presence: true
+end

data/lib/generators/sbmeet/templates/views/rooms/index.html.erb

@@ -0,0 +1,63 @@
+<div class="container my-5">
+  <div class="row justify-content-center">
+    <div class="col-md-8">
+      <div class="d-flex justify-content-between align-items-center mb-5">
+        <div>
+          <h1 class="display-5 fw-bold text-dark">Video Rooms</h1>
+          <p class="text-muted">Select an existing workspace or create a new video conference instantly.</p>
+        </div>
+      </div>
+      <div class="card border-0 shadow-sm mb-5 bg-light">
+        <div class="card-body p-4">
+          <h2 class="h5 mb-3 fw-semibold">Create a New Room</h2>
+          <%= form_with(model: @room, class: "row g-3 align-items-center") do |f| %>
+            <% if @room.errors.any? %>
+              <div class="col-12">
+                <div class="alert alert-danger py-2 px-3 small mb-0" role="alert">
+                  <%= @room.errors.full_messages.to_sentence %>
+                </div>
+              </div>
+            <% end %>
+            <div class="col-sm-8">
+              <%= f.text_field :name,
+                                placeholder: "e.g., Standup Meeting, Coding Sync",
+                                class: "form-control form-control-lg border-secondary-subtle",
+                                required: true %>
+            </div>
+            <div class="col-sm-4 d-grid">
+              <%= f.submit "Launch Room", class: "btn btn-primary btn-lg fw-medium" %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <h2 class="h4 mb-3 fw-bold text-secondary">Active Sessions</h2>
+      <% if @rooms.any? %>
+        <div class="list-group shadow-sm rounded-3">
+          <% @rooms.each do |room| %>
+            <%= link_to room_path(room), class: "list-group-item list-group-item-action d-flex justify-content-between align-items-center p-3 transition" do %>
+              <div>
+                <span class="fw-semibold text-dark text-lg"><%= room.name %></span>
+                <div class="small text-muted">ID: #<%= room.id %></div>
+              </div>
+              <span class="btn btn-sm btn-outline-primary px-3 rounded-pill">Join Room &rarr;</span>
+            <% end %>
+            <%if current_user && current_user.admin?%>
+              <%= link_to "Destroy Room", room_path(room), 
+              data: { turbo_method: :delete, turbo_confirm: "Are you sure you want to delete this room?" }, 
+              class: "btn btn-outline-danger" %>
+            <%end%>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="text-center p-5 border border-dashed rounded-3 bg-white">
+          <div class="text-muted mb-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-camera-video text-secondary opacity-50" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"/>
+            </svg>
+          </div>
+          <p class="text-muted mb-0">No active video conference rooms found. Create one above to get started.</p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/lib/generators/sbmeet/templates/views/rooms/show.html.erb

@@ -0,0 +1,73 @@
+<style>
+  .hover-opacity-100:hover { opacity: 1 !important; }
+</style>
+
+<div class="container my-5"
+  data-controller="room"
+  data-room-id-value="<%= @room.id %>"
+  data-room-current-user-id-value="<%= current_user.id %>"
+  data-room-current-user-name-value="<%= current_user.email.split('@').first.capitalize %>">    
+  
+  <div class="d-flex justify-content-between align-items-center mb-4">        
+    <div><h1 class="h2 mb-1">Room: <%= @room.name %></h1></div>
+    <%= link_to 'Leave Room', rooms_path, class: 'btn btn-outline-danger fw-medium' %>
+  </div>
+
+  <div class="row g-4">
+    <div class="col-12 col-md-9">
+      <div class="row g-3">
+        
+        <%# Local Video Frame %>
+        <div class="col-12 col-md-6" id="local-video-container">
+          <div class="card bg-dark border-0 shadow overflow-hidden">
+            <div class="position-relative d-flex flex-column bg-black">
+              <div class="d-flex position-relative">
+                <div class="ratio ratio-16x9 bg-black flex-grow-1">
+                  <video data-room-target="localVideo" autoplay playsinline muted class="w-100 h-100 object-fit-cover"></video>
+                </div>
+                <div class="bg-black border-start border-secondary p-1 d-flex align-items-end" style="width: 14px;">
+                  <div id="local-audio-level" class="w-100 bg-success rounded-top" style="height: 0%; min-height: 2px; transition: height 0.05s ease;"></div>
+                </div>
+                <span class="position-absolute bottom-0 start-0 m-3 badge bg-secondary opacity-75 z-3">
+                  You (<%= current_user.email.split('@').first.capitalize %>)
+                </span>
+                <button data-action="click->room#toggleLocalFullscreen" class="btn btn-sm btn-light position-absolute top-0 end-0 m-2 opacity-50 hover-opacity-100 z-3" title="Toggle Fullscreen">⛶</button>
+              </div>
+              
+              <%# LOCAL LIVE STATS FOOTER %>
+              <div class="bg-dark text-white p-2 small font-monospace d-flex justify-content-between border-top border-secondary" style="font-size: 0.75rem;">
+                <div>🚀 Emitting: <span id="local-emit-rate">0.00</span> Mbps</div>
+                <div class="text-success">● Local Camera</div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+        
+        <%# Remote Video Container %>
+        <div class="col-12 col-md-6">
+          <div id="remote-videos" data-room-target="remoteContainer" class="row g-3"></div>
+        </div>
+
+      </div>
+    </div>
+
+    <%# Sidebar: Active Users %>
+    <div class="col-12 col-md-3">
+      <div class="card border-0 shadow-sm h-100">
+        <div class="card-header bg-white border-0 pt-3">
+          <h5 class="card-title fw-bold text-secondary mb-0">Active Users</h5>
+        </div>
+        <div class="card-body">
+          <ul class="list-group list-group-flush small" id="participant-list">
+            <li class="list-group-item d-flex align-items-center text-success fw-semibold" id="list-item-local">
+              <span class="p-1 bg-success border border-light rounded-circle me-2"></span>
+              <%= current_user.email.split('@').first.capitalize %> (You)
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

data/lib/sbmeet/version.rb

@@ -0,0 +1,3 @@
+module Sbmeet
+    VERSION = "0.1.0"
+end

data/lib/sbmeet.rb

@@ -0,0 +1,5 @@
+require_relative "sbmeet/version"
+
+module Sbmeet
+  class Error < StandardError; end
+end

data/sbmeet.gemspec

@@ -0,0 +1,23 @@
+require_relative "lib/sbmeet/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "sbmeet"
+  spec.version       = Sbmeet::VERSION
+  spec.authors       = ["Stéphane Ballet"] 
+  spec.email         = ["plombix@gmail.com"]
+  spec.summary       = "A turnkey WebRTC video conferencing for Rails."
+  spec.description   = "SBMeet injects a complete, production-ready P2P WebRTC video conferencing system directly into a Rails application."
+  spec.homepage      = "https://github.com/yourusername/sbmeet"
+  spec.license       = "MIT"
+  spec.required_ruby_version = ">= 3.0.0"
+
+  spec.files = Dir.chdir(File.expand_path(__dir__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{\A(?:(?:test|spec|features)/|\.(?:git|travis|circleci)|appveyor)}) }
+  end
+  
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "rails", ">= 7.0.0"
+end

metadata

@@ -0,0 +1,78 @@
+--- !ruby/object:Gem::Specification
+name: sbmeet
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Stéphane Ballet
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2026-06-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+description: SBMeet injects a complete, production-ready P2P WebRTC video conferencing
+  system directly into a Rails application.
+email:
+- plombix@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- README.md
+- lib/generators/sbmeet/install_generator.rb
+- lib/generators/sbmeet/templates/channels/channel.rb
+- lib/generators/sbmeet/templates/channels/connection.rb
+- lib/generators/sbmeet/templates/channels/signaling_channel.rb
+- lib/generators/sbmeet/templates/config/cable.yml
+- lib/generators/sbmeet/templates/controllers/rooms_controller.rb
+- lib/generators/sbmeet/templates/javascript/channels/consumer.js
+- lib/generators/sbmeet/templates/javascript/channels/index.js
+- lib/generators/sbmeet/templates/javascript/channels/signaling_channel.js
+- lib/generators/sbmeet/templates/javascript/index.js
+- lib/generators/sbmeet/templates/javascript/room_controller.js
+- lib/generators/sbmeet/templates/migrations/create_rooms.rb.erb
+- lib/generators/sbmeet/templates/models/room.rb
+- lib/generators/sbmeet/templates/views/rooms/index.html.erb
+- lib/generators/sbmeet/templates/views/rooms/show.html.erb
+- lib/sbmeet.rb
+- lib/sbmeet/version.rb
+- sbmeet.gemspec
+homepage: https://github.com/yourusername/sbmeet
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.1
+signing_key:
+specification_version: 4
+summary: A turnkey WebRTC video conferencing for Rails.
+test_files: []