Diverse Hilfestellungen

Diverse Hilfestellungen zu allen Themen rund um Streaming.

Passwortschutz mit SecureID

Um einen Zugriffsschutz über Ihre Webseite zu steuern (Abfrage Ihrer Datenbank, nur angemeldete Nutzer, etc.)  bieten wir einen "Zugriffsschutz per SecureID" an. Hierbei wird der Streamingserver bei jedem Zuschauerabruf zuerst Ihre Webseite fragen, ob der Zugriff gestattet wird. Und wenn ja, wie lange.

Dies ist ideal für Bezahlsysteme und Anforderungen mit besonders hoher Sicherheit. Zudem bietet es viele individuelle Möglichkeiten für Sie, wenn Sie sehr flexibel abgleichen möchten ob ein User zugreifen darf. Sie können die Entscheidung jederzeit weiter anpassen und auf neue Gegebenheiten reagieren, ohne das auf Ihrem Streamingaccount etwas angepasst werden müsste.


Schaubild-Secure-id_Zeichenfläche-1-Kopie.jpg

Vorgehensweise/Ablauf:

  1. Standard für jede Webseite mit einer Kundendatenbank:
    Ihr System kennt Ihre Kunden und kann nach eigener Logik entscheiden ob User X auf Videostreams zugreifen darf (oder auch nur auf spezielle Streamnamen, etc.). Beispielsweise weil der User X dafür im Shop bezahlt hat oder weil er Mitarbeiter von Ihrem Unternehmen ist.
  2. Bei dem Einsatz des Videoplayers auf Ihrer Webseite wird für den aktiven Kunden eine secureID erstellt. Dies ist ein erzeugte Kennung, Zufallszahl oder auch die Kundennummer des Nutzers. (Programmierung: bitte einen String aus Buchstaben und/oder Zahlen übergeben. Bitte vermeiden Sie Sonderzeichen und extrem lange IDs mit hunderten Zeichen.)
    Falls es eine Zufallszahl ist, könnten diese für den aktiven Kunden zusammen mit der aktuellen Uhrzeit (Timestamp) in der Datenbank gespeichert werden.
    Im folgenden Beispiel lautet diese ID "1234".

  3. Bei der Auslieferung der Webseite (z.B. das zusammensetzen der Inhalte per PHP und Ausgabe an den Browser) wird im Videoplayercode auch diese secureID des aktuellen Kunden als Parameter eingefügt.
    D.h. der Player erhält in der URL den Parameter: id=1234

  4. Der Player wird auf der Webseite (im Browser des Kunden) aufgerufen und übergibt beim Streamstart die angegebene ID als Parameter an den Streamingserver.

  5. Der Streamingserver würde ohne aktive Sicherung an dieser Stelle den Videostream an den Player übertragen.
    Durch die aktive Sicherung ruft er jedoch zuvor eine vereinbarte URL von Ihrer Webseite auf und gibt als Parameter die ID an. (Zusätzlich die IP-Adresse und den Streamnamen).
    Beispiel:
    http://www.ihreWebseite.de/sicherheitsabfrage.php?id=1234&userip=217.91.5.7&stream=meinstreamname

  6. Ihr System gleicht die ID mit Ihrer Datenbank ab. Sie wissen das die ID z.B. 20 Sekunden alt ist und zu Kunde X gehört. Sie können nun prüfen, ob der Kunde zugreifen darf (z.B. ob er bezahlt hat). Ergänzend könnten Sie die Anzahl der Abrufe, etc. protokollieren. 

    Ihr System antwortet daraufhin an den Streamingserver ob der User zugreifen darf oder nicht (bzw. wie viele Sekunden dieser Kunde zugreifen darf). Die Antwort erfolgt als einfache Zahl.
    Beispielsweise: 3600
    Diese 3600 entsprechen 3600 Sekunden und somit eine Stunde die dieser Stream von diesem User abgerufen werden darf. Alternativ können Sie beliebige Zeit gewähren, wie beispielsweise 36000, so dass der User 10 Stunden am Stück und quasi zeitlich unlimitiert zugreifen kann. Geben Sie 0 zurück, darf der User NICHT zugreifen.

    Beispielscript (ganz einfacher Aufbau):

    Wir bieten keinen Support für Javascript/PHP-Programmierung (etc.) auf Ihrer Webseite. Dies gilt auch für hier vorgestellten Beispiel-Code. Dieser dient nur dem schnellen Einstieg und dem Aufzeigen eines denkbaren Lösungsweg. Ein Programmierer für Ihre Webseite der z.B. auch Ihre Sicherheitsaspekte berücksichtigt, wird hierdurch nicht ersetzt.


    <?php
$array = array("testid1234", "zweiteErlaubeId1111", "weiterID...");

$dieIdVomUser = null;
if ( isset($_GET["id"]) ) {
	$dieIdVomUser = "". $_GET["id"];
}

for ($i=0; $i< count($array); $i++) {
	
	if ($dieIdVomUser == $array[$i]) {
		print(10800); //3 Stunden Zugriff
		die();
	}
}

print('0'); //Kein Zugriff
?>

    Da diese Abfrage bei jedem Aufruf von einem Video erfolgt (Dateistreaming/VOD wie auch Live), haben Sie es 100% in der Hand den gewünschten Zugriff für Ihre Kunden zu gewähren oder unerwünschten Zugriff abzulehnen.
    Da diese Sicherheitsabfrage direkt zwischen dem Streamingserver und Ihrer Webseite erfolgt, hat der Kunde wie auch ein Hacker keine Möglichkeit hierauf Einfluss zu nehmen.
    Die Schnittstelle ist äußerst simpel in der Umsetzung und lässt sich oftmals an einem halben Tag realisieren. Gleichzeitig ist sie extrem sicher. Nur ein Angreifer der die Streamingserver zu Webserver Kommunikation direkt im Rechenzentrum oder über die Backbones beeinflussen kann, hat hier einen Angriffspunkt (z.B. Geheimdienste).

Preis: In allen aktuellen Tages- und Monatspakten kostenfrei enthalten.
Aktivierung auf Kundenwunsch.
Empfehlenswert:  Die Methode ist für einen Webentwickler einfach und schnell umzusetzen (wir sind gerne behilflich).

Einwilligung für Video-Inhalte (Codebeispiel)

Bei der Darstellung der übertragenen Daten und Inhalte (Streamingvideos, Videoplayer, Chat, etc.) auf unserer Webseite, wird eine direkte Verbindung zwischen Ihrem Browser und den Servern hergestellt, die diese Dienste von VSH bereitstellen. Ihr Browser sendet hierzu eine Anfrage inkl. Ihrer IP-Adresse und erhält die abgefragten Daten zurück. Beispiele wären der Abruf des Videoplayers beim Laden der Webseite, ein Videoinhalt oder die Chat-Texte sobald Sie diese abrufen.

Die hierfür notwendige IP-Adresse wird von VSH nur kurzzeitig gespeichert und für die Übertragung der Daten und die technische und sicherheitsbezogene Bereitstellung der Dienstleistung verwendet. Für eine längere Speicherung der IP-Adresse wird diese anonymisiert - hierdurch ist es VSH nicht möglich, diese zu Ihrem Anschluss zurückzuverfolgen (d.h. diese ist nicht personenbezogen).

Die Idee: Einwilligung des Nutzers einholen: 

Bevor der Player überhaupt geladen wird, können wir erstmal ein Bild anzeigen. Nach dem "Klick" auf das Bild, wird erst der Player geladen. Es ist wie ein "Opt In" nur für ein Video:

<style>
.container div img,
.container {
    max-width: 800px !important;
    cursor: pointer;
}

#videodiv {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
}
#videodiv img {
    border: 1px dashed #000;
    border-radius: 4px;
}
#videodiv iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

</style>

<div class="container">
    <div id="videodiv"><img id="iframebutton" src="https://IHREURL/images/videoklick.jpg" /></div>
</div>

<script>
    playercode =
        '<iframe width="100%" height="100%" style="border: none;" class="iframewrapper" src="https://start.video-stream-hosting.de//player.html?serverip=62.113.210.2&serverapp=vod&smil=video-stream-hosting-testvideo.smil&timelinecolor=2b8eda&bgimage=video-stream-hosting-testvideo.jpg" allowfullscreen="allowfullscreen"></iframe>';
    var playcookie = document.cookie;

    if (playcookie != "loadVideoConsent=play") {
        document.getElementById("iframebutton").onclick = function () {
            document.cookie = "loadVideoConsent=play; max-age=" + 60 * 60 * 24 * 10;
            document.getElementById("videodiv").innerHTML = playercode;
        };
    } else {
        document.getElementById("iframebutton").onload = function () {
            document.getElementById("videodiv").innerHTML = playercode;
        };
    }
</script>

Mit diesem Beispiel laden wir zuerst einmal nur ein Bild. Beispielsweise so ein Bild: 

videoklick.jpg

Nach klick auf das Bild, wird dann der richtige Player geladen. Bitte beachte: Der Code wurde hier nicht eingesetzt. Das oben eingefügte Bild hat keine Funktion. Für diese Einwilligung haben wir keine Demo. Sie können den Code kopieren, auf Ihrem Webserver testen und ggf. nutzen. 

Wir bieten keinen Support für Javascript/PHP-Programmierung (etc.) auf Ihrer Webseite. Dies gilt auch für hier vorgestellten Beispiel-Code. Dieser dient nur dem schnellen Einstieg und dem Aufzeigen eines denkbaren Lösungsweg. Ein Programmierer für Ihre Webseite der z.B. auch Ihre Sicherheitsaspekte berücksichtigt, wird hierdurch nicht ersetzt.

Workshop - Iframe Code und Player Link verarbeiten

Im folgenden Artikel zeigen wir Ihnen, wie Sie den Player Code für Ihren Account öffnen.

1. Wir liefern Zugangsdaten per Mails aus.

In der E-Mail finden Sie im Anhang eine ZIP Datei. Oftmals mit dem Name "Player-und-Einstellungen.zip".
Diese Datei wird geöffnet und der Inhalt abgespeichert, sodass Sie diesen wiederfinden.

2. Die Player-Dateien sind HTML Dateien.

Sie können diese Beispielsweise mit dem Browser oder einem HTML Editor öffnen.
Im folgenden finden Sie verschiedene Möglichkeiten dazu:

a) Über einen Browser:

chrome-quelltext.png

Chrome:
- Rechtsklick auf die Datei
- Öffnen mit Chrome
- Drücken Sie Strg+U (Windows) oder ⌘-Option-U (Mac).

Firefox:
- Rechtsklick auf die Datei
- Öffnen mit Firefox
- neben dem Player Rechtsklick ins Weiße und "Seitenquelltext anzeigen" wählen.

Safari:
- Rechtsklick auf die Datei
- Öffnen mit Safari
- bei MacOS oben auf Safari > Einstellungen > Erweitert navigieren und den letzten Punkt "Menü Entwickler in der Menüleiste anzeigen" wählen.
- Einstellungen schließen und neben dem Player Rechtsklick ins Weiße und "Seitenquelltext einblenden" wählen.

Sie haben bei diesen drei exemplarischen Beispielen nun den Code für den Player gefunden. Dieser besteht im wesentlichen aus einem langen Link mit Parametern. Wie Sie dem Player weitere Funktionen hinzufügen können, finden Sie unter Erweiterte Playereinstellungen (Parameter)

b) Unser Windows:

Windows verfügt Editoren wie WordPad, Editor oder Microsoft Word welche den Code nicht korrekt verarbeiten können. Der Code würde in so einem Editor zerstört werden. Nutzen Sie einen CODE Editor wie beispielsweise den kostenlosen Notepad++ (https://notepad-plus-plus.org/downloads/)
Laden und installieren Sie das Programm, öffnen Sie die HTML Datei anschließend mit dem Editor.

c) Unter MacOS:

MacOS verfügt einen Editor wie TextEdit oder "Pages" welche den Code nicht korrekt verarbeiten können. Der Code würde in so einem Editor zerstört werden. Nutzen Sie einen Code Editor wie beispielsweise Sublime (https://www.sublimetext.com/)
Laden und installieren Sie das Programm, öffnen Sie die HTML Datei anschließend mit dem Editor.

3. HTML Code verstehen:

Der iFrame Code ist ganz einfaches HTML. Jeder Webdesigner wird Ihnen dazu Hilfestellung leisten können.
Der Code ist einfach aufgebaut.

<iframe width="845" height="475" style="border: none" allowfullscreen src="XXXX"></iframe>

Es gibt also aktuell folgende Parameter (Nicht zu verwechseln mit den Parametern in der URL):

width="845"
height="475"
style="border: none"
src="XXXX"

anstelle der XXXX würde hier die URL zum Live- oder Dateistream stehen. Diese URL können Sie bei Bedarf innerhalb der Anführungsstriche anpassen und ändern.
Weitere Infos zu Iframe inkl. Beispiele finden Sie auch auf w3schools auf folgender Seite: https://www.w3schools.com/html/html_iframe.asp

Wenn Sie einen Responsive Player erstellen möchten, müssen einige Werte geändert werden.
Mehr dazu unter Responsive Player für Mobilgeräte

Diesen Code können Sie nun ggf. Anpassen (Dateinamen, Livestream-Namen) und einfach auf Ihrer Seite einfügen.

Livestreaming in ein Firmennetz mit limitierter Bandbreite

Wenn Sie einen Livestream in ein Firmennetzwerk (lokal oder in deren VPN) übertragen möchten, ist die Anzahl der Zuschauer, die Bandbreite des Internetanschluss sowie die Belastung des Netzwerk zu beachten. 

Beispielrechnung

Angenommen Sie übertragen den Livestream von einem Vortrag in FullHD mit einer Datenrate von 4000 kbit/s. Das entspricht 30 MB pro Minute je Zuschauer. Bei 100 Zuschauern parallel errechnet sich eine Datenvolumen von 3 GB pro Minute. (Sie können diesen Bedarf auf Ihre Anzahl von Zuschauern umrechnen.)

3 GB Daten pro Minute entspricht 50 MB in der Sekunde. In der Maßeinheit von Internetanschlüssen entspricht dies 400 Mbit/s oder auch "DSL 400.000".

Wie schnell ist der Internetanschluss der Firma? Gemessen wird eine solche Bandbreite oft mit Speedtests, bei denen eine einzelne Download-Verbindung zu einem einzelnen Punkt im Netzwerk ermittelt wird. Greift aber nicht ein einzelner Punkt im Netzwerk zu, sondern konkurrierend 100 parallel, steht real weniger Bandbreite zur Verfügung als im Einzeltest gemessen wurde. Hinzu kommen andere Dienste im Firmennetzwerk wie Mailserver, ggf. Updates, andere Aktivitäten von Gerätekommunikation, etc.

Dies ist auf jeden Fall mit der IT der Firma zu besprechen. 

Lösungsansätze

Die Wahl der richtigen Methode oder deren Kombination ist natürlich immer von der Situation, Vertraulichkeit des Inhalt, Art des Inhalt, des Bedarf alle Zuschauer zeitgleich zu erreichen, dem Eigeninteresse der Mitarbeiter, usw. abhängig.

Die genannten Ansätze werden oft angewendet um Engpässe und physikalische Limits in Firmennetzen zu berücksichtigen.

Stream-Weiterleitung an Facebook

Ihre Livestreams können parallel zum eigenen Streaming auch an weitere Ziele weitergeleitet werden. Beispielsweise an Facebook, Youtube, Twitter/Periscope, etc. Auch parallel an mehrere Ziele.

Sie senden uns hierzu die Streaming-Zugangsdaten die Sie von dem Ziel erhalten haben (RTMP-URL + Streamkey bzw. Streamschlüssel). Diese werden bei uns konfiguriert. (Bitte möglichst 2-3 Werktage vor der Übertragung mitteilen).

Ihr Livestream ist nun sowohl von Ihrem Streamingpaket bei uns abrufbar (normales Streaming auf Ihrer Webseite) als auch zeitgleich auf der gewünschten Plattform an die wir weiterleiten. 

Hier sehen Sie, wie Sie exemplarisch bei Facebook vorgehen:

Facebook1.jpgFacebook2.jpgFacebook3.jpg

Oftmals wichtig ist das Aktivieren der Option "Permantenter Streamkey/Streamschlüssel". Andernfalls ändert das Ziel ggf. unvermittelt die Zugangsdaten.

Die Weiterleitung können Sie für Ihren Streaming-Account im Onlineshop beauftragen: Weiterleitung buchen
Ggf. teilen wir Ihnen einen neuen Streamnamen mit, der für die Weiterleitung verwendet wird.

 

Wichtige Einstellungen sind hier zu beachten

Facebook empfiehlt zur Zeit die unten folgenden Einstellungen. Stellen Sie sicher, dass diese von Ihnen so gesendet werden, da Facebook den Stream zwar sonst ggf. entgegen nimmt, aber nicht an die Zuschauer überträgt. Nach unserer Erfahrung zeigt FB auch keine aussagekräftige Fehlermeldung, so dass der Grund nicht sofort deutlich wird.

Quelle: https://www.facebook.com/help/1534561009906955

Stream-Weiterleitung an Youtube

Ihre Livestreams können parallel zum eigenen Streaming auch an weitere Ziele weitergeleitet werden. Beispielsweise an Youtube, Facebook, Twitter/Periscope, etc. Auch parallel an mehrere Ziele.

Sie senden uns hierzu die Streaming-Zugangsdaten die Sie von dem Ziel erhalten haben (RTMP-URL + Streamkey bzw. Streamschlüssel). Diese werden bei uns konfiguriert. (Bitte möglichst 2-3 Werktage vor der Übertragung mitteilen).

Ihr Livestream ist nun sowohl von Ihrem Streamingpaket bei uns abrufbar (normales Streaming auf Ihrer Webseite) als auch zeitgleich auf der gewünschten Plattform an die wir weiterleiten. 

Hier sehen Sie die Vorgehensweise:

Youtube1.jpg

Youtube2.jpgYoutube3.jpgYoutube4.jpg

Oftmals wichtig ist das Aktivieren der Option "Permantenter Streamkey/Streamschlüssel". Andernfalls ändert das Ziel ggf. unvermittelt die Zugangsdaten.

Die Weiterleitung können Sie für Ihren Streaming-Account im Onlineshop beauftragen: Weiterleitung buchen
Ggf. teilen wir Ihnen einen neuen Streamnamen mit, der für die Weiterleitung verwendet wird.

 

 

Wiederverwendbare RTMP Streaming Schlüssel

Wenn Sie regelmäßig Streams erstellen, können Sie Ihre vorherigen Stream-Einstellungen einfach für neue Streams wiederverwenden.

 

Quelle: https://support.google.com/youtube/answer/2853818?hl=de

 

Mehrsprachiger Livestream mittels verschiedener Livestream-Slots

Sie können sowohl Livestreams als auch Videodateien in verschiedenen Sprachen übertragen.

Hierfür gibt es zwei Varianten:

Für Livestreams übertragen Sie wie immer per Live-Encoder mit jeweils einem Stream je Sprache. In den Streaming Tages- und Monatspaketen ist immer ein Livestream-Slot enthalten. Wenn Sie mehrere Streams/Sprachen gleichzeitig senden, benötigen Sie je zusätzlichem Stream der zeitgleich übertragen wird einen weiteren Livestream-Slot á 40 Euro mtl.

Für Dateistreams wird jede Sprache als Videodatei hochgeladen. Dies ließe sich auch über verschiedene Audiospuren innerhalb der selben Datei realisieren. Dies würde jedoch nicht in allen Browsern und nicht auf allen Mobilgeräten funktionieren. (Sprechen Sie uns an, wenn Sie eine Sonderlösung benötigen.)


Vorgehen: 
1. Vorab können Sie Livestream-Slots hier bestellen: https://www.video-stream-hosting.com/angebot-preise/live-transcoding/
2. Im Kundencenter können Sie unter Livestreaming Ihre Streamingnamen anlegen: https://verwaltung.video-stream-hosting.de/livestreaming
Beispielsweise:  oder:
livestreamDE
livestreamEN
livestreamFR		 unsereventDE
unsereventEN
unsereventFR

Wichtig ist, die Syntax / Schreibweise zu respektieren. Also kleingeschrieben "ihrestreamname" gefolgt vom Sprachkürzel in Großbuchstaben (EN) oder (DE)

 

3. Wenn Sie auf einen Livestream klicken, können Sie die "Mehrsprachigkeit" aktivieren: 

image-1647340450676.jpg

Hier gibt es nochmal eine kurze Beschreibung und der Parameter wird automatisch gesetzt, wenn die Mehrsprachigkeit aktiviert wurde. Wählen Sie unten noch Ihre Streams aus. 

image-1647342487807.08.01.jpg

4. Optional: Tutorial für Open Broadcaster Software (Dolmetscher Ton hinterlegen)

In diesem Tutorial, erfahren Sie, wie Sie ein remote RTMP Signal mit anderem Ton unterlegen können: https://docs.video-stream-hosting.de/books/diverse-hilfestellungen/page/rtmp-videoquelle-in-obs-fur-den-streamabruf-zur-weiterverarbeitung 

Fertig.
Im Player sieht den Sie auf Ihre Homepage einbetten können, sieht die Steuerleiste nun wie folgt aus: 

image-1647342580615.09.23.jpg

Empfohlene Netzwerkkonfiguration/ Ports für Streaming

Hochladegeschwindigkeit

Idealerweise sollten Sie über eine Ethernet-Verbindung in einem dedizierten (nicht gemeinsam genutzten) Netzwerk streamen. Weitere Informationen, inkl. empfohlener Upload-Geschwindigkeiten, finden Sie im Artikel Internetleitung und Qualität von Livestreaming

 

Firewall-Konfiguration

Wenn Sie Probleme haben, einen Stream zu video-stream-hosting.com über RTMP zu starten, sollten Sie oder Ihr Netzwerk-Team überprüfen, ob Firewall-Ports blockiert sind.

Bei unseren Servern kommen folgende Ports zum Einsatz: 

TCP 1935 (RTMP Protokoll für den Live-Encoder)
TCP 80 (HTTP: Kann notfalls für RTMP genutzt werden)
TCP 443 (HTTPS: Typischerweise für den Playerabruf)


Domains auf die Whitelist setzen

Wenn Ihr Unternehmensnetzwerk den Zugang zu bestimmten Domains einschränkt, richten Sie ggf. eine Ausnahme für folgende Domains von video-stream-hosting.com ein: 

*.streamlock.net
*.video-stream-hosting.de
*.video-stream-hosting.com
go2.stream

Hinweis: Die Haupdomain streamlock.net gehört zu Wowza, es werden von video-stream-hosting.com außsschließlich streamlock Subdomains mit eigenen Server verwendet. 

 

IP-Adressen

Es kommen verschiedene IP-Adressen zum Einsatz. Wenn möglich, whitelisten Sie bitte die o.g. Domains. Andernfalls können Sie gerne unseren Support fragen, welche IP-Adressen für Ihren Account zum Einsatz kommen. Wir schicken Ihnen dann eine Liste zu. 

Vorschaubild für Livestream- / Dateistreamplayer hinzufügen

Wenn Sie Ihrem Live- oder Dateistream-Player ein Vorschaubild hinzufügen möchten, geht das ganz einfach über unsere Verwaltungsoberfläche:


  1. Loggen Sie sich bitte mit Ihren Zugangsdaten auf der Verwaltungsoberfläche ein.
  2. Klicken Sie auf Dateistreaming oder Livestreaming und wählen Sie in der Liste Ihren Stream aus: 

    docs-dateistreaming-screenshot.jpg

  3. Klicken Sie auf Vorschaubild und wählen zwischen "Vorschaubild hochladen", wenn Sie selbst ein Bild definieren möchten, oder "Vorschaubilder generieren" wenn per Zufall drei Bilder erstellt werden sollen.

    docs-vorschaubild-auswaehlen.jpg

  4. Im Anschluss können sie das Vorschaubild, welches unten angezeigt wird anklicken und es wird automatisch als aktives Bild für den Player gespeichert. 

    Fertig. Sie können jetzt Ihren Player (auf der Homepage prüfen).