caruso connect logo

Agenda

  • Ausgangssituation
  • Zielsetzung
  • Planung
  • Realisierung
  • Ergebnis

Ausgangssituation

Zielsetzung

Planung

Realisierung

Ergebnis

Projektumfeld

Projektumfeld

Projektumfeld

BigBlueButton

  • Webkonferenz-System
  • Entwickelt für Fernunterricht
  • Quelloffene Komponenten
  • Browserclient benötigt Adobe Flash Plugin
bbb logo
Flash was created during the PC era – for PCs and mice. [...] New open standards [...], such as HTML5, will win on mobile devices (and PCs too).
Steve Jobs
– Mitbegründer und ehemaliger CEO von Apple

Projektumfeld

Problemstellung

Probleme der Adobe Flash-Plattform

  • Performance
  • Corporate Design
  • Integration
  • Mobile Geräte no flash on mobile
  • Sicherheit flash crashed

Ausgangsituation

Zielsetzung

Planung

Realisierung

Ergebnis

Zielsetzung

Projektumfeld

Zielsetzung

Anforderungen

  • Native Videokommukationsmöglichkeit ermitteln
  • Integration in CARUSO
  • Kontaktanfrage-Logik
  • Grafische Oberfläche
  • Benachrichtigungen

Ausgangsitutation

Zielsetzung

Planung

Realisierung

Ergebnis

Planung

Zeitplanung

ProjektphasenKW 45KW 46KW 47KW 48KW 49KW 50KW 51
Initiierung3 h
Planung18 h
Realisierung35 h
Abschluss3 h
Dokumentation11 h
Gesamt70 h

Kostenplanung

  • 0 € Lenovo ThinkCentre, IntelCore© Core™ i5, 500GB HDD, 16GB RAM
  • 0 € Asus X59SL, IntelCore© Core™2 Duo, 320GB HDD, 3GB RAM
  • 0 € Software
    • Microsoft Windows 7 / Vista
    • IDE: Oracle Netbeans 7
    • Server: Apache Tomcat 7, Joyend Node.js 0.10
    • Diverse Browser
  • 1.000 € Personal
    • 560 €Sören Müller - 70 Stunden à 8 €
    • 440 €TMT-Mitarbeiter - 4 Stunden à 50 €, 2 Stunden à 120 €

  • Gesamtkosten1.000 €

Ablaufplanung

Sequenzdiagramm

GUI-Konzept

Mock-up

Ausgangssituation

Zielsetzung

Planung

Realisierung

Ergebnis

Projektphasen

  • Implementierung der Basis für Kommunikation
  • Erstellung der GUI
  • Integration der Kommunikationsmöglichkeit und der Steuerelemente in die GUI
  • Anpassung der GUI an die Weboberfläche des Projektumfeldes
  • Umsetzung und Anbindung der Kontaktliste
  • Implementierung der Kontaktanfrage-Logik und -UI-Elemente

Realisierung

Ergebnis Anforderungsanalyse

  • html
  • css
  • js
  • jQuery
  • node.js
  • WebRTC

WebRTC

  • Web Real Time Communications
  • Echtzeitkommunikation im Web(-browser)
  • Working Draft des W3C
  • Offenes Framework
  • VoIP, Chat, Video-Telefonie, Daten
  • Ansprechbar via JavaScript und damit nativ
  • Entwickler: Google, Mozilla und Opera
    WebRTC Browser
WebRTC

simpleWebRTC

  • WebRTC Bibliothek von &yet
  • Sammlung von Modulen
  • Vereinfacht Funktionen
  • Gleicht Browserunterschiede aus
<script src="//simplewebrtc.com/lastest.js"></script>
simpleWebRTC

Events

  • Auf Ereignisse bzw. Fehler reagieren
webrtc.on('speaking',function(e){ 
  if(typeofe==='undefined'){ 
    var el="#"+webrtc.config.localVideoEl;
  } else {
    var el="#"+e.id+"_video_incoming";
  } 
  $(el).addClass("speaking");
});

Benachrichtigungen

  • Web Notifications
  • Notify Library
  • displayNotification("Teilnehmer hat den Raum betreten!");
    
    function displayNotification(m) {
      if (notify.permissionLevel() === notify.PERMISSION_GRANTED) {
        notify.createNotification("CARUSO Connect", 
          {body: m, icon: notify_icon, timeout: 5}
        );
      }
    }
    

Einbettung in Projekt

  • Einbau mit einer Zeile möglich
  • Dynamisch generiertes JavaScript
<script src="chat.js.jsp"></script>

Ausgangssituation

Zielsetzung

Planung

Ergebnis

Ergebnis

Demo

Ergebnis

Soll-ist-vergleich

  • Native Videokommunikationsmöglichkeit ermitteln
  • Integration in CARUSO
  • Kontaktanfrage-Logik
  • Grafische Oberfläche
  • Benachrichtigungen

Ergebnis

Ausblick

  • Mehrbenutzerfähigkeit
  • Fallbacklösung
  • Erweiterung
    • Whiteboard
    • Screen-Sharing
    • Anzeige von Dokumenten

<Danke!>