Dateien hochladen nach „components“

4 years ago · f71e0d2d32
5 changed files with 316 additions and 0 deletions
--- a/components/audioplayer.md
+++ b/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.
--- a/components/console.md
+++ b/components/console.md
--- a/components/index.md
+++ b/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.
--- a/components/obsbridge.md
+++ b/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">
--- a/components/obsremote.md
+++ b/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">