Wie veröffentliche ich eine Yellow-Webcam auf meiner Webseite?

Yellow-Feeds sind so konzipiert, dass sie möglichst einfach in andere Webseiten integriert werden können. Wir bieten Ihnen zwei verschiedene Möglichkeiten, dies zu tun. Mit einer der Möglichkeiten können Sie das Aussehen des Feeds kontrollieren, mit der anderen nicht.

Feed als iFrame einbetten

Dies ist die einfachere der beiden Möglichkeiten. Allerdings haben Sie mit dieser Möglichkeit keine Kontrolle darüber, wie die Webcam angezeigt wird. Der einfachste Weg, einen Feed auf diese Weise einzubetten, ist der folgende: Öffnen Sie das Yellow-Portal, gehen Sie im Menü auf der linken Seite zu Feeds -> Bildfeeds und klicken Sie in der Liste mit der rechten Maustaste auf den gewünschten Feed. Wählen Sie anschliessend "einbetten". So wird Ihnen der Ausschnitt des HTML-Codes angezeigt, den Sie in den Code Ihrer Seite einfügen können. Der Code sollte so aussehen:

Sie müssen wahrscheinlich die Breite und Höhe anpassen, damit das iFrame in Ihre Seite passt. Damit ist alles Nötige erledigt. Der Feed sollte nun auf Ihrer Seite angezeigt werden.

Diese Art der Einbettung hat einen großen Nachteil: Sie ist nicht responsive. Wenn Sie das iFrame auf die Auflösung des Bildschirms skalieren möchten, müssen Sie etwas CSS verwenden (sehen Sie hier, wie Sie ein iFrame nur mit CSS responsive machen) oder sich mit Media Queries oder etwas JavaScript beschäftigen, um die Größe des Feeds anzupassen.

Feed als JavaScript-Plugin einbetten

Alternativ können Feeds über ein JavaScript-Plugin in Ihre Website eingebettet werden. Der Vorteil dabei ist, dass es standardmäßig responsive ist und Ihnen eine gewisse Kontrolle über das Aussehen gibt. Es ist auch ziemlich einfach zu machen, bringt aber ein paar Dinge mit sich, die es wert sind, berücksichtigt zu werden.

Als erstes brauchen Sie das Plugin. Sie können es direkt vom Yellow-Server in Ihre Seite laden. Fügen Sie einfach diese Zeile in den Kopf Ihres HTML-Dokuments ein:

Das Skript ist komplett selbstinitialisierend und wird eine Reihe von Abhängigkeiten herunterladen, damit es funktioniert. Diese Abhängigkeiten sind weiter unten aufgeführt. Auf jeden Fall muss das Plugin wissen, welche Feeds Sie wo anzeigen möchten. Dies ist wiederum sehr einfach mit dem Yellow-Feed-Tag:

Das waren die Grundlagen. Laden Sie das Plugin, fügen Sie einen Tag in Ihren HTML-Code mit dem Token des Feeds als Attribut ein. Dann sollte Ihr Feed bereits angezeigt werden. Sie können natürlich mehrere dieser Tags hinzufügen. Allerdings sollten Sie nie den gleichen Feed zweimal auf derselben Seite platzieren.

Styling des Yellow-Feed Plugins

Erstens reagiert der Plugin-Feed responsive auf seine übergeordneten Container, sodass Sie sich keine Sorgen um die Größenänderung machen müssen. Aber vielleicht möchten Sie dennoch stilistische Akzente setzen, um es besser in das Design Ihrer Website zu integrieren. Es gibt mehrere CSS-Klassen, die es Ihnen ermöglichen, dies zu tun:

• image-container: Umfasst das gesamte Bild, nicht aber die Zeitleistensteuerung wie z.B. die Bildauswahl des History-Feeds.

• branding-container: Die obere Leiste des Feeds, in der Logos, Titel und Zeitstempel angezeigt werden.

• branding-box: Ein allgemeiner Stil, der für alle Boxen im Branding-Container gilt.

• project / timestamp: Zusätzliche Styles für den Titel bzw. die Zeitstempel-Branding-Boxen.

• history-images: Container von Timeline-Steuerelementen wie den Bildauswahlen in History- und Archiv-Feeds.

• history-image-stripe: Wird auf die einzelnen wählbaren Elemente in der Timeline Control angewendet.

Andere Zeitzone anzeigen

Standardmässig wird der Zeitstempel im Feed in der Zeitzone angezeigt, in der sich die Kamera befindet, falls die Geokoordinaten der Kamera eingestellt sind. Wenn dies nicht der Fall ist, wird die Zeitzone standardmäßig auf UTC gesetzt.

Wenn es nötig ist, ist es möglich, diese Zeitzone zu überschreiben und eine andere mit den Zeitzonen- und Offsetattributen des Yellow-Feed-Tags anzuzeigen. Das Zeitzonenattribut ist nur das hinter dem Zeitstempel angezeigte Label und kann relativ einfach geändert werden. Die eigentliche Zeitkonvertierung erfolgt basierend auf dem Offset-Attribut, das den gewünschten UTC-Offset in einer Zeichenkette angibt, wie es im ISO 8601-Format üblich ist. Hier ein konkretes Beispiel:

Das Yellow-Feed-Plugin konvertiert lediglich die Zeit des Bildes mit diesem Offset, es berechnet keinen Offset basierend auf der Zeitzone. Wenn also die Zeitzone, die Sie anzeigen möchten, über eine Sommerzeit verfügt, müssen Sie einen eigenen Weg finden, um den richtigen Offset zur richtigen Zeit einzugeben.

Abhängigkeiten des Plugins

Das Yellow-Feed-Plugin erfordert einige Abhängigkeiten. Wenn Sie das Plugin vom Yellow-Server verwenden, werden diese Abhängigkeiten beim Laden des Skripts dynamisch geladen. Wenn Sie sich entscheiden, dass Sie Abhängigkeiten aufgrund von Latenzzeiten oder Konflikten mit Ihrer Website lieber preloaden möchten, empfehlen wir Ihnen, yellow-feedplugin.js herunterzuladen und an Ihre Bedürfnisse anzupassen. Das Plugin-Skript selbst ist nur ein Initialisierer, so dass es nicht schwierig sein sollte, alles, was Sie nicht wollen, aus loadDependencies() zu entfernen. Stellen Sie jedoch sicher, dass die erforderlichen Abhängigkeiten alle verfügbar sind, sonst funktioniert der Feed nicht.

In jedem Fall lauten die Abhängigkeiten, die das Skript im Hintergrund lädt, wie folgt:

• https://fonts.googleapis.com/css?family=Open+Sans Font, der vom Feed verwendet wird

• "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js" Framework, in dem der Feed geschrieben ist

• "https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" Bibliothek für die Verarbeitung von Touchscreen-Gesten

• https://cdnjs.cloudflare.com/ajax/libs/RyanMullins-angular-hammer/2.2.0/angular.hammer.min.js Brücke zwischen angularJS und hammer.

• https://feed.yellow.webcam/css/feed.css Stylesheet für die Feeds

• https://feed.yellow.webcam/js/common.js Utility functions für dynamisches Resizing.

• https://feed.yellow.webcam/js/feed.js Tatsächlicher Code des Feeds

Responsive Verhalten

Beim Einbetten als responsive iFrame oder als Plugin wird die Skalierung der Feeds durch die Breite bestimmt. Das heisst, das iFrame wird erweitert, um die verfügbare Breite zu füllen und die Höhe nach Bedarf zu skalieren, um das Seitenverhältnis zu erhalten. Es wird jedoch eine max-height css-Eigenschaft in Pixel (und nur wenn sie in Pixel angegeben ist) des iFrames oder des Yellow-Feed-Elements akzeptiert.

Wenn eine maximale Höhe angegeben ist, wird der Feed nur die ganze Breite verwenden, wenn die daraus resultierende Höhe das Maximum nicht überschreitet, andernfalls dehnt er sich auf die maximal zulässige Höhe aus und passt die Breite an, ohne das Seitenverhältnis zu verändern.

Beachten Sie, dass die gesamte Höhe des Feeds möglicherweise nicht die Höhe des Bildes selbst ist. Im Falle eines Verlaufs- oder Archiv-Feeds ist die Bildauswahlleiste Teil dieser Höhe.

Beachten Sie auch, dass das Plugin versucht, sich dem Browserfenster anzupassen, wenn die Fensterhöhe kleiner als die maximale Höhe ist, während ein responsive iFrame dies nicht tut.