WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Echtzeit Wetter-Daten als Overlay für Livestream (Für Ecamm Live oder OBS)

von | Jul 19, 2021 | Allgemein | 2 Kommentare

Schlagwörter: Ecamm Live - OBS - PHP

Es gibt gerade eine Mode unter den Livestreamern und zwar zeigen viele Youtube, Twitch Content Creator (wie man heute so neumodisch sagt) immer öfters die aktuellen Wetterdaten in ihrem Livestream oder Videos an. Man sieht dann das in Madeira gerade 28°C herrscht mit Sonnenschein etc. Die meisten Livestreamer machen das aber mit der Hand – das heisst also sie müssen jedesmal die Wetterangaben von Hand updaten.

Ich persönlich bin ja eine sehr faule Socke und darum möchte ich sowas automatisieren. Ich möchte also in der Lage sein, mein Livestream zu starten, ein Knopf zu drücken und die aktuellen Wetterdaten werden geladen und als Overlay umgewandelt. Da Gott die API erfunden hat, ist sowas gar nicht mal so schwer zu realisieren.

Natürlich habe ich das Ganze auch gleich programmiert.

Video

API Anmelden

Es gibt viele Wetterdienste die Gratis sind oder was kosten – gibt eine sehr grosse Auswahl. Ich persönlich habe mich jetzt mal für die Daten von https://openweathermap.org/ entschieden. Bevor man jetzt anfangen kann zu programmieren, muss man sich da ein Konto erstellen und den API Key generieren lassen (Achtung: bis der aktiviert ist kann es so 1-2h dauern).

Komplettes Script oder selbst Coden.

Als nächstes könnt ihr entweder den ganzen Code herunterladen. Ganz am Ende dieses Beitrags findet ihr einen Downloadlink zum Script. Danach müsst ihr nur noch das File mit einem Text Editor öffnen und eure API Daten eintragen und dann noch die Städte-ID eintragen. Und wenn ihr noch die Farben und die Schrift selbst anpassen wollt, könnt ihr das dann ebenfalls tun. Sichert das aktualisierte File ab und ladet es via FTP auf euren Server hoch und dann könnt ihr es in OBS oder Ecamm Live einbinden.

Leeres Text File öffnen

Wenn ihr das ganze aber selbst erstellen wollt, dann öffnet mit eurem Code-Editor oder Text-Editor ein neues File und speichert es als ≪wetter.php≫ ab.

PHP Befehle

Ganz Oben in diesem File packt ihr dann diesen PHP Code hinein. Danach müsst ihr nur noch euren API Key innerhalb der beiden Gänsefüsschen “ eintragen und eure CityID eingeben. Ich habe ein paar IDs als Beispiele unten hinzugefügt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
 
$apikey ="###";
$cityID = "2867714"; //münchen
//$cityID = "2658822"; /* st.gallen */
//$cityID = "5128581"; /* new york */
//$cityID ="2950159"; /* berlin */
//$cityID = "2643743"; /* london */
 
 
$apiURL = "https://api.openweathermap.org/data/2.5/weather?id=" . $cityID . "&lang=de&units=metrics&appid=" . $apikey;
 
date_default_timezone_set('Europe/Berlin');
 
$wetter_data = json_decode(file_get_contents($apiURL), true);
 
$temperatur_f = $wetter_data['main']['temp'];
$temperatur_c = round($temperatur_f - 273.15);
 
$wetter_descr = $wetter_data['weather'][0]['description'];
$wetter_icon = $wetter_data['weather'][0]['icon'];
 
$name = $wetter_data['name'];
 
$symbol = "<img src='http://openweathermap.org/img/wn/$wetter_icon@2x.png' width='100'>";
 
 
?>

HTML & CSS

Direkt nach dem PHP Code kommt dieser HTML und CSS Code hin. Wie ihr wisst passiert hier die ganze Design-Magie. Wenn ihr andere Schriftfarben nehmen wollt, dann könnt ihr die bei color jetzt ersetzen, ihr müsst dafür die entsprechende HEX Farbennummern eingeben. Die HEX-Codes sind die mit dem # – hier findet ihr eine gute Seite wo ihr eure HEX-Codes erzeugen könnt: https://htmlcolorcodes.com/. Ebenfalls könnt ihr die Schriftgrösse und die Abstände nach Oben anpasssen usw. In meinem Video habe ich die einzelnen Punkte detailliert angeschaut und erklärt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet">
    <style>
        body {
            background: rgba(0,0,0,0);
        }
 
.container {
    display:flex;
 
    width: 600px;
    height: 100px;
 
}
 
.stadt, .temperatur {
    margin-left: 20px;
}
 
.stadt {
    font-family: 'Sigmar One', cursive; /* Google Font */
   font-size: 35px; /* schriftgrösse */
    margin-top: 25px; /* abstand zu oben */
    color:#FFD9D9; /* Farbe der Schrift */
}
 
.temperatur {
    font-family: 'Sigmar One', cursive; /* Google Font */
   color:#CEFFE7; /* Farbe der Schrift */
    margin-top: 25px; /* abstand zu oben */
    font-size: 35px; /* schriftgrösse */
}
 
    </style>
</head>
 
<body>
    <div class="container">
    <div class="stadt"><?php echo $name ?></div>
    <div class="temperatur"><?php echo $temperatur_c ?> °C</div>
    <div class="icon"><?php echo $symbol ?></div>
    </div>
</body>
</html>

File auf Server hochladen

Wenn ihr die Einstellungen alle angepasst habt, dann könnt ihr das File abspeichern und dann mit einem FTP Client auf euren Server laden. Danach müsst ihr nur noch den Pfad zum File finden und ihr könnt es am Browser testen. Seid ihr dann zufrieden, dann könnt ihr es als Widget Overlay in Ecamm einbinden und eure Szene damit verschönern.

Download Wetter Overlay

Download

Hier könnt ihr das File direkt herunterladen. Einfach auf den Downloadlink klicken, herunterladen und das Zip File entpacken.





2 Kommentare

  1. Marco

    Hello Eric-Oliver

    Danke für das tolle Script 🙂
    Wie bekomme ich denn die „description“ mit angezeigt?
    Leider funktioniert:

    nicht. Kannst du mir helfen?

    Danke für deine Arbeit und Liebe Grüsse

    Antworten
    • Eric-Oliver Mächler

      was für eine description meinst du?

      Antworten

Antworten auf Marco Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert