Dateien hochladen nach „components“

components/audioplayer.md

@@ -0,0 +1,91 @@
+---
+noindex: false
+comments: false
+#author: HaPe
+#author_tools: hape
+#level: beginner
+#article_type: info
+#date: 2019-10-28
+last_updated: 2019-10-28
+title: Komponente Audioplayer
+description: 'iStream Tools - Komponente Audioplayer'
+keywords: 'Audioplayer, Mediaplayer, Soundeffekte, Stream, Tool'
+
+---
+
+# Audioplayer
+
+<div class="lead" markdown="1">
+Mit dem Audioplayer kannst Du Deine Zuschauer mit Soundeffekten oder ein bisschen Fahrstuhlmusik
+  unterhalten. Der Audioplayer ist nicht sichtbar. Du kannst mehrere Audioplayer einbinden und
+  unabhängig voneinander steuern. Mach einen für knackige Soundeffekte, einen für unterhaltende
+  Musik unde noch einen für ....
+</div>
+
+## Audiplayer einrichten
+
+Um einen Audioplayer einzurichten wählst Du einen bereits vorhandenen Audioplayer aus oder erstellst
+  mit dem Add-Button einen neuen Audioplayer und wählst anschliessend diesen aus.
+
+Es stehen Dir nun folgende Einstellungen zur Verfügung:
+
+**Über die generelle Konfiguration:**
+
+- Den Namen des Audioplayers anpassen.
+- Die Startlautstärke festlegen.
+- Das aktuelle Setup des Audiplayers löschen.
+
+**Die Standard-Buttons:**
+
+- Lautstärke reduzieren
+- Pause
+- Lautstärke erhöhen
+- Schnellzugriff niedrige Lautstärke
+- Loop
+- Schnellzugriff obere Lautstärke
+
+**Button Audio (-datei) abspielen:**
+
+- Datei per Drag n Drop oder Auswahl hochladen
+- Name des Buttons anpassen
+- Lautstärke für diese Datei festlegen
+- Farbe des Buttons festlegen
+- Datei löschen.
+
+## Lautstärke Einstellungen
+
+Wenn Du mehrere Audiodateien, womöglich noch aus unterschiedlichen Quellen hast, dann wird Dir
+  vermutlich schon aufgefallen sein, dass diese Dateien selten den gleichen Lautstärkepegel haben.
+  Die eine Datei ist ein bisschen leiser als die restlichen Dateien und eine andere Datei ist ein
+  bisschen lauter als die restlichen. Diesen Unterschied über den Mixer in der Encodersoftware
+  auszugleichen ist etwas mühsam. Zudem kann es auch vorkommen, dass man vergisst den passenden
+  Lautstärkepegel über den Mixer einzustellen.
+
+Mit dem Audioplayer kann man diesen Umstand ausgleichen. Man kann einen Standardlautstärkepegel
+  einstellen. Und die Medien erhalten ihren individuellen Lautstärkepegel. Der individuelle
+  Lautstärkepegel ist immer eine Angabe im Verhältnis zur Grundlautstärke. Daraus wird die
+  tatsächliche Lautstärke errechnet. So kann im optimalen Fall ein stetiges nachregeln im Mixer
+  vermieden werden.
+
+Alle Lautstärkeangaben werden in Prozent angegeben. Angenommen, du stellst die Grundlautstärke auf
+  80% ein, und die Lautstärke der Datei ebenfalls auf 80%, dann ist die tatsächliche Lautstärke
+  64%. Die tatsächliche Lautstärke berechnet sich `(80/100) * (80/100) * 100`
+
+Um das System zu verdeutlichen gehen wir einfach mal davon aus, Du hast 3 Audiodateien. Eine davon
+  ist genau richtig abgemischt (Audio1). Eine ist etwas zu leise (Audio2), und die letzte ist etwas
+  zu laut (Audio3). Du richtest nun die Grundlautstärke auf 80% ein. Audio1 bekommt ebenfalls 80%.
+  Audio2, die etwas zu leise ist, bekommt 120% und Audio3, die etwas zu laut ist, bekommt 60%.
+  Daraus ergeben sich folgende Werte für die tatsächliche Lautstärke.
+
+- Audio1 64% (80/100 * 80/100 * 100)
+- Audio2 96% (120/100 * 80/100 * 100)
+- Audio3 48% (60/100 * 80/100 * 100)
+
+Das schaut in Zahlen ein bisschen nach Misch Masch aus, wenn aber die richtigen Einstellungen
+  ausgewählt werden, erscheinen alle 3 Dateien gleich laut, obwohl sie unterschiedlich abgemischt
+  sind.
+
+## in OBS einbinden
+
+Der Audioplayer enthält keine visuellen Komponenten. Du kannst ihn direkt in Deine Szene oder in
+  eine Subszene einbinden. Grössenangaben haben keinen Einfluss auf die Funktionsweise der App.

components/index.md

@@ -0,0 +1,90 @@
+# Komponenten
+
+<div class="lead" markdown="1">
+Hier siehst Du eine Übersicht der Komponenten und Anwendungen zu iStream Tools. Abgesehen von den
+Komponenten, die Du auf streamtool.net findest und die Du in Deine Streams einbinden kannst, gibt es
+noch einige eigenständige Internetauftritte, die speziell für iStream Tools erstellt wurden und die
+das Angebot ergänzen. Die Auflistung findest Du weiter unten.
+</div>
+
+## Slides / Präsentationen
+
+Mit den Slides kannst Du, mit nur wenigen Klicks, Präsentationen zusammenstellen. Du kannst sie aber
+  auch für andere Effekte in Deinem Stream oder in Deinen Videos verwenden. So lassen sich mit den
+  Slides auch "Lowerthirds", "Imageslider", wechselnde Hintergründe und Overlays, Intros und
+  Abspann erstellen. Du kannst verschiedene Slides erstellen und diese miteinander kombinieren.
+
+## Prompter / Teleprompter
+
+Der Teleprompter wird in einem extra Browserfenster gestartet. Du kannst die Schrift sowohl
+  horizontal als auch vertikal spiegeln. Die Geschwindigkeit und die Schriftgrösse können jederzeit
+  eingestellt werden.
+
+## Ticker / Laufschrift
+
+Der typische Ticker. Du kannst den Ticker während des Streams ergänzen, ausblenden, wieder
+  einblenden, Farben und Geschwindiglkeit einstellen. Du kannst mehrere Ticker erstellen und diese
+  unabhängig voneinander steuern.
+
+## Audioplayer
+
+Mit dem Audioplayer kannst Du Deine Zuschauer mit Soundeffekten oder ein bisschen Fahrstuhlmusik
+  unterhalten. Der Audioplayer ist nicht sichtbar. Du kannst mehrere Audioplayer einbinden und
+  unabhängig voneinander steuern. Mach einen für knackige Soundeffekte, einen für unterhaltende
+  Musik unde noch einen für ....
+
+## Videoplayer
+
+Mit dem Videoplayer bekommst Du Videos direkt in Deinen Stream. Du kannst die Videos uploaden und
+  dann mit einem Klick mit der Maus oder einem Tap auf dem Tablet, je nachdem wie du die Console
+  geöffnet hast, starten. Du kannst Dir so wechselnde Hintergründe einrichten und oder "Beep-Videos"
+  einblenden. Kein mühsames suchen auf Youtube und keine Werbeeinblendungen mehr.
+
+### OBS Remote &amp; OBS Bridge
+
+Die OBS Bridge ist die Schnittstelle zwischen OBS-Studio und den Streamtools. Sobald die OBS Bridge
+  eingerichtet ist, lassen sich in OBS Remote die gewünschten Schalter einrichten, mit denen man
+  die Szenen, Quellen, Gruppen und Filter in OBS- Studio steuern kann.
+
+## Console / Kontroller / C&C
+
+Die Leitzentrale. Sozusagen. Du kannst dir mehrere Consolen einrichten und den Link an einen Freund
+  oder Moderator weitergeben. Dieser kann dann für Dich die Regie übernehmen. Du kannst die Consolen
+  im Browser, auf dem Tablet oder dem Smartphone öffnen und bedienen. Wie Dir beliebt.
+
+## zusätzliche Internetangebote
+
+Folgende Internetangebote stehen ebenfalls zur Verfügung. Sie ergänzen das Angebot der iStream
+  Tools. Manche werden automatisch in den iStream Tools verwendet. Bei einigen kannst Du dich direkt
+  bedienen oder auch mitwirken.
+
+### stid.cc
+
+Die Sicherheit verlangt es, dass man die Links gegen Missbrauch absichert. Sonst könnte ejmand den
+  Link evtl. erraten und so den Stream stören oder den MessageBus blockieren. Eine Registrierung
+  soll aber vermieden werden, damit ein einfaches verwenden der Apps und Consolen möglich ist. Die
+  Konsequenz daraus sind sehr lange Links. Damit man aber mit diesen langen Links nicht hantieren
+  muss, gibt es den Url-Shortener. Er erzeugt sehr kurze Links, die aus ein paar Buchstaben und
+  Zahlen bestehen. Die Links werden automatisch generiert und werden auf der Seite Links angeboten.
+  Du musst also nichts weiter tun.
+
+### stlib.cc
+
+Mit stlib.cc entsteht eine Media-Bibliothek für Bilder, Videos und Audiodateien. Alle dort
+  aufgelisteten Dateien sind copyrightfrei. Du kannst sie frei in den Anwendungen und Komponenten
+  der iStream Tools verwenden.
+
+### space1.cc
+
+Space #1 ist eine PasteBin Anwendung. Man kann dort sehr schnell und einfach sogenannte Codesnippets
+  eintragen und auch wieder abrufen. Diese Codesnippets eignen sich sehr gut als Templates für z.B.
+  die Slides, die auch in einer HTML-Ansicht bearbeitet werden können. Wenn du das für dich richtige
+  Template auf Space #1 findest, brauchst Du es schon nicht mehr selbst zusammenstellen. Zeit
+  gespart!
+
+### quiro.net
+
+Quiro ist der zentrale Helpdesk. Wenn Du einen Fehler melden möchtest oder in den iStream Tools
+  nicht weiter kommst, dann kannst Du im Helpdesk direkt eine Anfrage starten oder Du sendest
+  einfach eine Email an help@streamtool.net. Auf Quiro gibt unter anderem auch ein Forum zu den
+  iStream Tools.

components/obsbridge.md

@@ -0,0 +1,78 @@
+---
+noindex: false
+comments: false
+#author: HaPe
+#author_tools: hape
+#level: beginner
+#article_type: info
+#date: 2019-10-28
+last_updated: 2020-06-30
+title: Komponente OBS Bridge
+description: 'iStream Tools - Komponente OBS Bridge'
+keywords: 'Audioplayer, Mediaplayer, Soundeffekte, Stream, Tool, OBS-Studio'
+
+---
+
+# OBS Bridge
+
+Die OBS Bridge ist die Schnittstelle zwischen OBS-Studio und den Streamtools. Sobald die OBS Bridge
+  eingerichtet ist, lassen sich in OBS Remote die gewünschten Schalter einrichten, mit denen man
+  die Szenen, Quellen, Gruppen und Filter in OBS-Studio, von der Console aus, steuern kann.
+
+Um diese Funktionalität nutzen zu können, muss in OBS-Studio zuerst das [Websocket-Plugin](https://github.com/Palakis/obs-websocket/releases) installiert
+  und eingerichtet werden. Sobald Du das Plugin auf Deinem System eingerichtet, und OBS-Studio neu
+  gestartet hast, findest Du im Menü `Werkzeuge` den zusätzlichen Menüpunkt `Websocket-Servereinstellungen`.
+  Über diesen Müpunkt öffnest Du einen Dialog, mit dem Du die Parameter für den Websocket einstellen
+  kannst. Die Voreinstellungen sind `Port: 4444` und `kein Passwort`. In den meisten Fällen kann man
+  diese Voreinstellungen unverändert stehen lassen.
+
+<img src="/images/docs-obsbridge-03.png">
+
+<img src="/images/docs-obsbridge-04.png">
+
+Nachdem der Websocket eingerichtet ist, kannst Du die OBS Bridge von Streamtool einrichten. Im OBS-Studio
+  Gehst Du im Menü zu `Ansicht` -> `Docks` -> `Benutzerdefinierte Browser-Docks`. In dem Dialog vergibst Du
+  einen Namen und trägst die Url zur OBS Bridge ein. Den Link findest Du im Userbereich unter `Links`. Hast
+  Du alles eingetragen, die Änderungen speichern. Der Dialog schliesst sich von alleine.
+
+<img src="/images/docs-obsbridge-07.png">
+
+<img src="/images/docs-obsbridge-11.png">
+
+Nun sollte ein weiterer Menüpunkt im Untermenü `Ansicht` -> `Docks` angezeigt werden.
+
+<img src="/images/docs-obsbridge-12.png">
+
+Wähle den neuen Menüpunkt aus, und es erscheint nun ein dialog mit der OBS Bridge (Bild unten). Überprüfe die
+  Felder `Port` und `Passwort`. Hier müssen die gleichen Daten verwendet werden, wie zuvor beim Einrichten
+  des Websockets eingetragen. Die Defaultwerte sind `Port: 4444` und `kein Passwort`.
+
+<img src="/images/docs-obsbridge-13.png">
+
+Sobald Du den Schalter `Save &amp; Connect` betätigst, wird anhand der eingegbenen Daten eine Verbindung
+  zum Websocket-Server, also eine Verbindung zu OBS selbst, hergestellt. Wenn die Verbindung hergestellt
+  werden konnte, dann siehst Du zwei grüne Punkte und ein pulsierendes Herz. Das sind die Statusinformationen
+  und zeigen an, dass alles wie gewünscht funktioniert.
+
+<img src="/images/docs-obsbridge-15.png">
+
+Du kannst den Dialog nun noch in die Oberfläche von OBS "eindocken". Die folgenden Bilder geben dir eine
+  wie das geht. Du kannst den Dialog fast überall in der Oberfläche verankern. Du kannst das ganze auch
+  auf die wesentlichen Statusinformationen minimieren.
+
+Wenn Du die OBS Bridge auf diese Art in der Oberfläche von OBS verankerst, dann wird die Verbindung zwischen
+  Streamtool und OBS mit dem Start von OBS hergestellt. Du musst dann nichts mehr weiter machen.
+
+<img src="/images/docs-obsbridge-16.png">
+
+<img src="/images/docs-obsbridge-17.png">
+
+<img src="/images/docs-obsbridge-18.png">
+
+Um die OBS Bridge zu schliessen und damit auch die Verbindung zum Websocket zu trennen, musst Du einfach nur
+  auf den `Schlissen Button` (Kreuz rechts oben) klicken. Aber bitte immer daran denken, ohne OBS Bridge kann
+  OBS Remote nicht funktionieren!
+
+<img src="/images/docs-obsbridge-19.png">
+
+<img src="/images/docs-obsbridge-20.png">

components/obsremote.md

@@ -0,0 +1,57 @@
+---
+noindex: false
+comments: false
+#author: HaPe
+#author_tools: hape
+#level: beginner
+#article_type: info
+#date: 2019-10-28
+last_updated: 2020-06-30
+title: Komponente OBS Remote
+description: 'iStream Tools - Komponente OBS Remote'
+keywords: 'Audioplayer, Mediaplayer, Soundeffekte, Stream, Tool, OBS-Studio'
+
+---
+
+# OBS Remote
+
+**Achtung: OBS Remote funktioniert nur, wenn die [OBS Bridge](/docs/obsbridge.html) eingerichtet
+  und aktiviert wurde.**
+
+Mit OBS Remote lassen sich alle Szenen, Quellen, Gruppen und Filter in OBS aktivieren bzw.
+  deaktivieren. Dazu werden die Daten aus OBS-Studio mit dem Schalter `OBS Import` importiert.
+  Jedes Element wird dann als ein Schalter angezeigt. Diese Schalter lassen sich dann auf
+  der Console beliebig anordnen.
+
+<img src="/images/OBS-Remote-einrichten.png">
+
+<p>&nbsp;</p>
+Damit es nicht zu unübersichtlich wird, wenn sehr viele Elemente in OBS eingerichtet wurden,
+  sind Gruppen- und Filter-Elemente zunächst verdeckt. Können aber mit einem Klick auf das
+  entsprechende Symbol auf dem Schalter angezeigt werden.
+
+<img src="/images/OBS-Remote-Filter-Gruppen-einrichten.png">
+<p>&nbsp;</p>
+
+Jeder Schalter enthält einen oder mehrere Options-Schalter mit zusätzlichen Möglichkeiten.
+  Oben Rechts ist der Schalter, mit dem festgelegt wird, ob der Schalter in der Auswahlliste
+  der Console auftauchen soll. Unten Rechts sind die Symbole für Gruppe und Filter angeordnet.
+  Das Filter-Symbol ist ein Trichter und das Gruppensymbol sind mehrere Layer. Wenn für ein
+  Element Filter eingerichtet sind, dann wird dieser zusätzliche Options-Schalter, mit dem die
+  zugehörigen filter angezeigt werden können, angezeigt. Enthält ein Element weitere Unterelemente
+  `Gruppe`, dann wird der Options-Schalter für Gruppen-Elemente angezeigt.
+
+<img src="/images/OBS-Remote-Button.png">
+
+<p>&nbsp;</p>
+
+Die eingerichteten Schalter können nun mit allen anderen Schaltern auf der Console angeordnet
+  und bedient werden.
+
+<img src="/images/OBS-Remote-Console-einrichten.png">
+
+<p>&nbsp;</p>
+
+Und stehen von nun an auf der console zur Verfügung.
+
+<img src="/images/OBS-Remote-Console.png">