Inhaltsverzeichnis

rC3 Remote Streaming to R2R-DIVOCeStage

(english version not ready yet)

Vorwort

Für Euch als Vortragende gibt es mehrere Möglichkeiten, Euren talk zu halten * live * prerecorded Das anschließende Q&A findet aber immer live statt, macht also das Prerecording für Euch etwas komplizierter, da ihr zwei Setups baut.

Für Eure Präsentationen

Layout

Design, Farben, Schriften

Wenn ihr Eure Folien noch nach dem Event-Motto optisch gestalten wollen solltet: Das Design ist leichtherzig, verspielt und ein wenig schebs.

  1. Welche Schriftarten?
    1. Überschriften: Ubuntu (semibold) https://design.ubuntu.com/font/
  2. Design-Farben
    1. Dark Theme:
      1. Hintergund: dunkelviolett: 1f0229
      2. Akzent-grün: fe7900
      3. Akzent-orange: FE7900
      4. Schrift: weiß
    2. Light-Theme
      1. hintergrund: weiß
      2. Akzent-grün: 009951
      3. Akzent-pink: d10069
      4. Font-grün: 00292d
  3. Hier ein fertiges Folien-Template
    1. Wir haben eine Präferenz für Folien in 4:3 (grund siehe oben)

vorproduzierte Videos

  1. OBS-Designvorschlag (gern nehmen wir aber auch mehrere syncron laufende Vollbild-Videos von Speakerinnen-Kamera(s) und Folienaufzeichnung , die wir dann selbst „pseudolive“ abmischen)
    1. OBS mit 4:3-Folien
    2. OBS mit 16:9-Folien
  2. Mehr Desing-Elemente zum mit rumspielen gibt es ganz unten auf dieser Page!
  3. Um Misverständnissen vorzugebeugen: Das hier ist
    1. ein Layout für Videoproduktion, es ist NICHT der Vorschlag für ein „Powerpoint-Backgroundbild“ (der ist oben)
    2. es ist ein Vorschlag. Euch steht es frei, es total anders zu machen. Lasst Eurer Kreativität freien Lauf! (Das hier ist nicht „der Congress“ auf dem hier und da strenger zugehen könnte.)

prerecorded

Wenn ihr “optimale Qualität”, auch bei evtl. wackeligem Internet-Upstream möchtet für Euren Content, dann bietet sich “Vorproduktion/Voraufzeichung” an. Dabei reicht ihr ein entweder

  1. ein komplett produziertes Video inkl. Layout und ggf. Bildregie (Folien, Vortragende). Layout-Vorschläge: Siehe unten
  2. oder separate Videos für “Präsentations-Recording” plus ein oder mehrere “Speaker:in/:innen”-Videos.
    1. Diese Videos müssen dann jedoch vom Timing syncron sein!
    2. ohne jedes Layout. wir machen dann daraus mit unseren Designelementen die Bildregie. So eine “Quasi-Live-Bildregie” mit den Videos aus der Konserve.
  3. Format für die Videos: 1080p25, 16:9, Bitrate 4-10MBit/s (max), Codec: bekommen wir gewandelt, h.264 in mp4 oder webm bevorzugt.
  4. Zum Aufzeichnen von Videos gibt es viele Möglichkeiten, nutzt das was Euch womit ihr selbst gut zurechtkommt, wir können lediglich Dinge empfehlen. z.b.
    1. „Kevin“ für den Webbrowser vom c3voc https://kevin.c3voc.de/
      1. hat die Option „Record?“ („zusätzlich aufzeichnen“), das funktioniert auch „semi-offline“ und wenn niemand zuschaut. Am Ende der „Übertragung“ werdet ihr nach Klick auf „Stop Recording“, wo die Datei aus dem RAM auf die lokale Platte gespeichert werden soll.
      2. Das funktioniert auch mit mehreren Browserinstanzen gleichzeitg (Notfalls: verschiedene Browser nutzen, falls sich Aufzeichnung von Bildschirm und Videokamera blockieren sollte, Chrome/-ium hat sich bewährt.)
      3. Es geht auch mit dem Mobilelefon für die Speakerinnen-Kamera. Bildqualität ist dann meist überragend, ihr sollte nur das Handy irgendwo/-wie festklemmen, damit die Zusehenden nicht seekrank werden.
  1. Abgabefrist 28.03. abends, gern aber auch früher, damit es noch Chancen für Korrekturen gibt.
  2. Transfer:
    1. Entweder gibt ihr uns per Mail eine URL zum Download.
    2. Oder ihr nutzt unsere Upload-Freigabe (https://sf.nadeshda.org/u/d/9b1c60f3e27c42e587d9/) mit einem sinnvollen Dateinamen (also „Welcher Talk, plus ggf. Versionierung im Dateinamen, bei mehreren Uploads, also bitte nicht „Divoc-talk–version.mp4“)

Q&A und Live-Remote-Streaming-Setup

Wir möchten eine gute Stream-Qualität produzieren und es Euch dabei trotzdem so einfach wie möglich machen. Diverse Techniken (offene und proprietäre) haben wir uns angeschaut, simple und sehr ausgefeilte. (Hier könnte eine lange Liste stehen mit Vor- und Nachteilen, die wir Euch jetzt ersparen.)

Architektur

Nach einigen Testläufen sieht das vorgeschlagene Setup wie folgt aus:

  1. Von den Vortragenden zur Regie: OBS-Ninja
  2. Rückkanal und Notfall-Kommunkation bei Störungen: Mumble

Mumble Audiochat

Zuerst zum Rückkanal von der Regie und der Moderation: Mumble ist ein quelloffener Voicechat, der gute Audioqualität bietet, niedrige Bandbreiten braucht und sich bei Netzstörungen sicher wiederverbindet.

OBS-Ninja Desktop/Videoshare

Eurer Content zur Regie: OBS-Ninja ist ein Browser-Streaming, das keine Installation einer App benötigt sondern lediglich einen aktuellen Browser (Chromium/Chrome bevorzugt).

Ablauf

Vom Ablauf her wollen wir vor dem Divoc einen Testlauf machen und werden Euch zwecks Terminabsprache kontaktieren. Grundsätzlich bitten wir Euch ca. 20 Minuten vor dem gesetzten Termin (Testlauf als auch Event selbst)

  1. via Mumble-Client in einen vereinbarten Raum (Lobby) zu kommen
  2. ein Regieengel holt Euch dort ab und “bringt” Euch “in einen Saal”
  3. Dort bekommt ihr zwei URLs für Euren Browser
    1. URL für Camera-Share: Diesem Browser gebt ihr Zugriff auf Webcam und Mikrofon. Das Browserfenster könnt ihr dann minimieren.
    2. URL für Slide/Desktop-Share
      1. Dort wählt ihr entweder das Fenster mit der Applikation aus, die ihr für Eure Präsentationsfolien nutzen wollt oder den Komplettbildschirm.
  4. Falls ihr mehrere Vortragende seid oder mehrere Kameras habt, z.B. wenn noch was unter einer Dokumentenkamera gebastelt wird, gibt es so viele URLs bis alle Teilnehmenden und alle Kameras versorgt sind.
  5. Wenn die Technik richtig funktioniert
  6. Wir warten gemeinsames auf den Slotbeginn laut Fahrplan
  7. Die Herald:in wird Euren Talk anmoderieren, evtl. wechselt ihr auch dabei im Dialog schon ein paar Worte. Herald:in und Regie werden per Mumble zu hören sein (kein Bild).
  8. Ihr haltet einfach Euren Talk, die Bildmischung zwischen den Bildquellen (Folien/Speaker) macht die Regie
  9. Bei jeweils 10min und 5min Restzeit bekommt ihr eine entsprechende kurze Ansage von der Regie über Mumble
  10. Im Anschluss an Euren Talk übernimmt die Herald:in wieder und wird das Q&A mit dem Signalangel machen. Ein “Saalmikro” wird es nicht geben. Die Fragen müssen also per IRC&Co online kommen.

Ein paar Tipps an dieser Stelle

Die meisten Betriebsysteme haben mindestens eine Möglichkeit die Aufnahmen eurer Webcam anzuzeigen. Schaut Euch also vor Eurem Talk einmal das Bild der Kamera an und stellt fest, ob ihr damit zufrieden seid. Beachtet die Lichtverhältnisse, die zum Zeitpunkt Eures Talks herschen werden. Ein Kameracheck mittags um 12 Uhr mit Tageslicht ist nicht aussagekräftig, wenn der Talk erst abends um 22 Uhr stattfindet. Eventuell lohnt es sich du noch eine Lampe umzustellen, um das Licht zu verbessern. Passt aber auf, dass ihr nicht überbelichtet und ihr so zu einem einfarbiger Fleck werdet.

Gestaltet den Hintergrund möglichst neutral und vermeidet persönliche Gegenstände wie Photos, deinen Geburtstagskalender, Sextoys oder eine freie Sichtlinie in das Fenster deiner Nachbarn. Je “langweiliger” der Hintergrund ist, desto besser.

Die Vortragsweise ist dieses Jahr deutlich anders als in den letzten Jahren. Es gibt keine direkten Zuschauer im Saal und somit auch kein sofortiges Feedback aus dem Publikum. Gestaltet Eure Talks persönlicher indem ihr Wackelaugen, Euer Lieblingsstofftier oder eine Quietscheente auf/an/um/hinter die Kamera setzt. Dadurch schaut ihr den Zuschauern im Stream öfters ins Gesicht und habt gleichzeitig “reale” Zuschauer, was häufig das Vortragen erleichtert.

Software-Installation / Erläuterungen der Tools

Mumble VoiceChat

Zur Erinnerung: Den Mumble-Voicechat braucht ihr für die Kommunikation vor und während Eures Talks, also zur Regie oder damit ihr den Herald und andere Mit-Vortragende hören könnt.

Mumble auf Windows installieren

Als Windows user:

Geht zu www.mumble.info und klickt auf die grüne Schaltfläche.

 Download

Nun könnt ihr die für Euer Betriebssystem passende Datei herunterladen.

Ist die Datei erfolgreich heruntergeladen, muss sie im Dateimanager aufgerufen und mit einem Doppelklick gestartet werden.

Nun öffnet sich der Installationsassistent. Klickt auf die Schaltfläche “Weiter” um die Installation zu starten.

Bestätige die Geschäftsbedingungen und klicke auf die Schaltfläche “Weiter”.

Hier kann ein Installationspfad ausgewählt werden. Falls ihr diesen ersetzt habt oder ihn nicht ändern möchtet, bestätigt mit einem Klick auf die Schaltfläche “Weiter”. Die anderen Einstellungen müssen nicht verändert werden.

Um die Installation abzuschließen, klicke auf die Schaltfläche “Installieren”.

Danach wird eine Erfolgsmeldung angezeigt und ihr könnt Mumble gleich starten.

Mumble auf MacOS

Die aktuelle Version von Mumble hat noch kein Sicherheitszertifikat von Apple erhalten. Daher könnt ihr entweder die Warnung zur Kenntnis nehmen und diese trotzdem von www.mumble.info herunterladen.

Nach erfolgreichem Download öffne die Datei mit DiskImageMounter.

Zieht das Icon Mumble.app in den Ordner Anwendungen/Applications.

Öffnet die Datei auf keinen Fall mit einem Doppelklick sondern ausschließlich mit einem Rechtsklick. Ein Doppelklick führt zu folgender Fehlermeldung:

Geht in “Finder” und öffnet die Anwendung Mumble mit Rechtsklick. Ein weiteres Dialogfenster weist auf das fehlende Sicherheitszertifikat hin. Bestätigt mit “Öffnen”. Falls ihr doch noch weitere Probleme habt, meldet Euch bitte bei Eurem Speaker-Support unter divoc-r2r@hamburg.freifunk.net

Mumble einrichten

Mumble Server ‘mumble.freifunk.net’ hinzufügen

Nach der erfolgreichen Installation könnt ihr nun dem Mumbleserver beitreten. Die Divoc nutzt hierfür den Mumble-Server von freifunk.net. Beim Starten von Mumble öffnet sich das Fenster “Server verbinden”. Falls dem wider Erwarten nicht so ist, kann es nachträglich mittels einem Klick auf die Erdkugel oben links geöffnet werden.

Im Fenster “Server verbinden” könnt ihr den Freifunk Mumble-Server entweder hinzufügen oder diesen aus der Liste auswählen und Euch direkt damit verbinden.

Um sich erstmalig mit dem Freifunk Mumble-Server zu verbinden klickt auf die Schaltfläche “Server hinzufügen”.

Gebt mumble.freifunk.net als Adresse/Server an. Der Port ist standardmäßig 64738. Wählt einen echten Namen oder Nickname als Benutzernamen. Bestätigt die Eingaben mit einem Kllick auf “OK”.

Mumble Settings

Bitte geht einmal durch den “Audio-Assistenten”, diesen findet ihr unter “Konfiguration” und dann “Audio-Assistent”

Durch die Dialoge bitte mit “Weiter” durchgehen, ggf. das richtige Audio-Gerät anwählen (hier im Beispiel das USB Headset, um sicherzugehen)

Auf dem folgenden Audio-Pegel-Schirm kann man am Regler noch Änderungen vornehmen für die automatische Sprachaktivierung, der vorgeschlagene Wert passt jedoch meist.

Wichtig: “Text zu Sprache” MUSS abgeschaltet werden (mittlere Option)

Dann noch zweimal mit Weiter bestätigen, wobei ihr die Statistik-Übertragung deaktivieren könnt.

OBS NINJA

Um Euren Vortrag auf die Divoc-Bühne zu bringen nutzen wir OBS Ninja. Dies ist eine Live-Streaming Software die rein im Browser funktioniert und somit keine zusätzliche Softwareinstallation benötigt. Fragt Euren Speaker-Kontakt nach einem persönlichen Invite-Link. Falls ihr noch keinen erhalten habt, könnt ihr Euch via E-Mail an divoc-r2r@hamburg.freifunk.net wenden oder einen eigenen Raum ausprobieren.

Bitte beachtet, dass ihr zwei Fenster, bzw. Tabs, von OBS-Ninja braucht, um sowohl die Webcam zu nutzen als auch den Bildschirm zu teilen. OBS-Ninja läuft aktuell am besten in Chromium/Chrome.

Kopiert den Link in die Adresszeile eures Browsers und gebt das Passwort ein.

Gebt Bildschirm und Webcam frei.

Einen Raum eröffnen

Geht auf die VOC-OBS-Ninja-Seite OBS-Ninja und startet mit der Auswahl/Freigabe von Screenshare und Kamera.

Webcam einrichten

Um die Kamera freizugeben muss nun die korrekte Kamera ausgewählt und im Browser freigegeben werden.

Nun gibt es ein kleines Vorschaubild in dem die Ansicht kontrolliert werden kann. Die sonstigen Einstellungen sollten den zuvor gewählten Einstellungen im Browser entsprechen.

Beginnt den Stream mit einem Klick auf den Startbutton.

Bildschirm freigeben

Wählt den gewünschten Bildschirm aus und gebt diesen im Browser frei. (Achtung: In Firefox ist dieser Dialog leider weniger intuitiv gestaltet, aka „potentiell verwirrend“)

Bestätigt die Auswahl und startet die Übertragung mit dem Share Button.

Unter MacOS muss in Firefox die Bildschrimfreigabe erstmalig bestätigt werden. Danach muss Firefox noch einmal neu gestartet werden.

Alternativ kann der Bildschirm auch aus einem laufenden Stream freigegeben werden. Dazu muss unten auf die Bildschirmfreigabeschaltfläche geklickt werden. Die Speakeransicht wird dann geteilt und in der rechten Hälft kann ein Fenster oder Bildschirm ausgewählt werden, der gestreamt werden soll. Wenn nur ein Fenster ausgewählt wird, ist eine Übertragung des Tons unmöglich! Der Ton kann in firefox generell bei der Bildschirmübertragung nicht übertragen werden. In anderen Browsern muss ein zusätzliches Häkchen gesetzt werden um die Audioübertragung zu starten.

Bedienelemente

Es gibt unter dem Videobild Bedienelemente die die Übertragung steuern.

Links ist eine Sprechblase die ein Chatfenster öffnet. Der Chat ist für alle Teilnehmenden sichtbar.

Daneben ist ein Lautsprechersysmbol, mit dem die Übertragung von Tönen aus anderen Programmen gestoppt werden kann.

Das 3. Symbol von links ist ein Mikrofon mit dem das eigene Mikro ausgeschaltet werden kann.

Daneben befindet sich ein Auge mit dem die Übertragung schwarz geschaltet wird, so dass der eigene Bildschirm bzw. die Webcam nicht mehr zu sehen sind.

Das Zahnrad öffnet die Streameinstellungen in denen z.B. andere Mikrofone ausgewählt werden können oder ein anderer Bildschrim zur Übertragung.

Ganz rechts ist ein rotes Telefon mit dem der Anruf/Stream beendet wird.

Backup Video

Warum?

Leider hat nicht jedeR immer eine 100% zuverlässige Internetverbindung. Im rC3 ist es mehrfach vorgekommen, dass Speaker:innen während ihres Vortrags aus dem Meeting gefallen sind, das VOC mit DDOS zu kämpfen hatte und weitere Unannehmlichkeiten. Seit der aktuellen Version ist es in OBS Ninja möglich ein lokales Recording anzufertigen. Dadurch können Talks mit technischen Schwierigkeiten noch im Nachhinein vollständig auf media.ccc.de landen.

Um das lokale Recording zu aktivieren muss der betreuende Engel im Controlroom auf den Button „record remote“ klicken.

Beim Speaker startet dann ein „Download“. Dies ist kein Download aus dem Internet, sondern das Speichern der lokalen Quelle (Webcam, Screencapture). Je nach Browser müsst ihr noch einen Speicherort auswählen und auf „Datei speichern“ klicken. Wenn die Aufzeichnung durch den Engel beendet wird, ist die Datei beim Speaker gespeichert. Die Datei erstmal aufzubewahren, damit sie im Notfall noch nachgefordert werden kann. (Und nach dem Vortrag auch nicht einfach die OBS-Browsertabs schließen bevor Eurer Director-Engel auf den Button geklickt hat)

Datei speichern auswählen, einen sinnvollen Dateinamen einfügen und an einem Ort speichern, der auch nach dem Event noch wiederzufinden ist.

Chrome beginnt einen automatischen Download. Eventuell gibt es ein Pop-Up-Fenster in dem der Download gestattet werden muss. Der Download ist danach am unteren Bildschirmrand zu sehen.

Der Download startet automatisch und wird am unteren Bildschirmrand angezeigt.

Selbst testen

Hier könnt ihr selbst Eure Bildqualität beurteilen, auch in Abhängigkeit von der gewählten Maximalauflösung und Eurer nutzbaren Internetbandbreite. Probiert es selbst aus mit unterschiedlichen Settings, vorzugsweise mit zwei getrennten PCs an unterschiedlichen Internetanschlüssen, da das genutzte Protokoll webRTC sonst (idealerweise) gar nicht “durch’s Internet” geht, sondern lokal bleibt, was Einflüsse von z.B. verfügbarer Upload-Bandbreite nicht zeigt. Bitte probiert das Backup-Recording aus, falls ihr dazu die Möglichkeit habt.

* Speaker Webcam

Test-Session / technische Stellprobe

Wir werden Eure Setups im Vorfeld mit Euch testen.

Dabei geht es vor allem um die optimalen Einstellungen von Bild- und Audioqualität. Euren Talk müsst ihr dafür also noch nicht(!) fertig haben!

Bitte kontaktiert uns kurzfristig per Mail an divoc-r2r@hamburg.freifunk.net wann wir gemeinsam vor dem 26.03. einen Testlauf starten können. Eventuell trefft ihr uns auch zufällig auf dem Mumble-Server https://mumble.freifunk.net, wenn ihr dort im Raum „R2R-DiVOC-Lobby“ vorbeikommt. Es mag aber sein, dass dort niemand ist oder ihr nicht bemerkt werdet. Unangekündigt ist also vermutlich “Warten” angesagt. In den nächsten Tagen melden wir uns nochmal mit konkreten Slots/Sprechzeiten.

Designelemente

Hier gibt es Design-Elemente mit denen ihr spielen könnt