Webcam: Stream- in- Stream: Eine bereits realisierte Variante ist im Kanal 3 meines animierten Laptop zu erkennen (Screenshot). Mittels zweier unterschiedlicher Videoquellen erzeuge ich zwei unterschiedliche Einzelbilder, die ich ganz einfach übereinander positioniere.
Im Beispiel ist auf einer einzigen HTML- Seite beim Besucher mit 320x240 Pixel das Hauptbild und in dessen rechter oberer Ecke ein weiteres, unwichtigeres Bild zu erkennen.
Um jeweils eine Art Livestream zu erhalten, genügt es, ausreichend neue Frames durch die Videoquellen bereitzustellen, zu downloaden und diese mittels Refresh, dynamischem HTML und Javascript zu "dynamisieren", d.h. in Bewegung zu versetzen, wie bei einem Daumenkino.
Um den Aufwand sendeseitig möglichst gering zu halten, trotzdem aber viele Einsatzvarianten zu erhalten, setze ich das Programm webcamXP ein. Das Programm kann als Webcam- Server beide Videoquellen, in völlig unterschiedlicher Art und gleichzeitig bedienen.
Das einfache Prinzip ist im Quelltext der Stream-in-Stream- Wiedergabeseite erkennbar:
Um eindeutige Bezugspunkte und eine verzerrungsfreie Darstellung zu bekommen, wende ich die bereits unter Webcam- HTML publizierte Methode "Webcam- Bild im Inline- Frame" an. Dazu erstelle ich eine eigene Wiedergabeseite, auf der der Webcam- Livestream absolut, also ohne wenn und aber, in die linke obere Ecke positioniert werden muss. Im Quelltext ist deshalb aufgeführt:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Für die Wiedergabe des Haupt- Livestreams setze ich ein ausgelagertes Javascript "cam3.js" ein. Dieses einfache Javascript existiert in verschiedensten Versionen, kann aber auch aus dem Programm webcamXP heraus kopiert werden (Einstellungen -> Generiere HTML-Code für ihre Seite).
<script src="scripts/cam3.js" type="text/javascript"></script>
Eine solche Seite ist die klassische Wiedergabeseite für den Kanal 3 von webcamXP mit Javascript. Natürlich kann die gleiche Seite für beliebige andere Webcam- Programme eingesetzt werden: lediglich der Pfad / die URL zum einzelnen Bild muss im Javascript angepasst werden.
Neu kommt jedoch ein überlagerndes, zweites Webcam- Bild, d.h. einer anderen Videoquelle hinzu:
Das Programm webcamXP bietet gleich mehrere Vorteile: neben der Verarbeitung mehrerer Videoquellen erstellt es immer auch kleinere Vorschaubilder, die unter http://ip:8080/cam_1.jpg?preview=1 in 80x60 Pixel abgeholt werden können, die Übertragungsbandbreite also relativ gering belasten.
Das heißt also, das Hauptmotiv sollte im Hintergrund, das zweite Motiv darüber, verkleinert im Vordergrund zu sehen sein.
Auf der empfohlenen Stream-in-Stream- Wiedergabeseite wird als eine ganz einfache Methode das kleinere Bild 80x60 Pixel absolut positioniert, 230 Pixel vom linken Rand und 14 Pixel vom oberen Rand :
<img name="angelpage.de" src="http://angelpage.dyndns.tv:8080/cam_2.jpg?preview=1"
style="position:absolute;left:230px; top:14px;" width="80" height="60" border="0">
Neben der Auflösung 80x60 bzw. der Bildgröße reduziert sich natürlich auch die Dateigröße, also die Menge der zu übertragenden Daten für das zweite Bild und damit die Übertragungszeit. Bild 1 erhält dadurch den gebührenden Platz
Limiter 30 Sekunden ...
Div- Container, Ebene, ...
Kombinationen "Stream-in-Stream", Statusumschaltung ...
..... wird irgendwann fortgesetzt
* - Falls Unklarheiten zu den oben aufgeführten Programmen WebcamMax, KoolKam und webcamXP bestehen, also weitere Hilfe zum "Stream-im-Stream" benötigt wird, verwenden Sie ganz einfach das Forum.
