hoch

AMC-Player - flat skin

Am Wochenende habe ich v0.33 meines Html 5 Audioplayers freigegeben.
Funktional soll es das erst einmal sein, was ich mir für Version 1 vorstelle. Nun erledige ich ein wenig Code Cleanup.

Und vielleicht noch eine kleine Skin Datei. Eine in einer Art flat Design habe ich da schon mal in Vorbereitung:

2018-11-19-flat-skin.png

… und auch ein Dark Theme

2018-11-22-flat-skin-dark.png

Beide sind noch nicht im Repo verfügbar … seht es als Preview :-)

Updates:

  1. 22.11.2018 - ein dunkles Theme hinzugefügt

weiterführende Links:

  1. Axels Webseite
  2. Dokumentation (en)
  3. Git-Repository (en)
Artikel weiterempfehlen: Google + Facebook

AMC Player - viel fehlt nicht mehr zur Version 1

Der auf meiner Webseite eingebundene Surround Audioplayer kommt der Version 1 immer näher.
In den letzten Tagen kam ein Feature zur Integration und Anzeige von Songinfos+Coverbild hinzu. Get-Funktionen in der API entsprechend auch.
Und so einige kleine Unschönheiten wuden ausgebügelt.

2018-11-10-amcplayer.jpg

Natürlich kann der Player auch für stereo Medien verwendet werden.

Aktuell schreibe ich an Erweiterungen, die es erlauben, Radiostreams einzubinden - analog mit denselben Metadaten und einem Coverbild. Streams oder Audiodateien sollen automatisch erkannt werden - man könnte so Mediadateien und Streams mischen. Entsprechend Medientyp sollen sich die Steuerelemente und dieFortschrittsanzeige anpassen.

weiterführende Links:

  1. Axels Webseite
  2. Dokumentation (en)
  3. Git-Repository (en)
Artikel weiterempfehlen: Google + Facebook

Erstes Tutorial mit OBS: Installation Pimped Apache Status unter Lubuntu

Ich hatte, mal irgendwann OBS auf meinem Rechner installiert … seinerzeit für einen recht banalen Zweck (Vollbild-Streaming zu Youtube) … und jenes geriet fast in Vergessenheit, weil nie wieder gebraucht.
Bis - ja bis eines wunderschönen Tages jemand in unserem Institut meinte, “… mit OBS kann ich für eine Demo sehr einfach Bild-Kompositionen auf andere Bildschirme streamen…”. Es sei einfach und verbirgt viele komplexe Einstellungen, zu denen man aber auch kommt.

Dies war der Wink mit dem Zaunpfahl, das Werkzeug gleichen Abends nochmals hervorzukramen: Man kann mehrere Bildschirmszenen ertsellen und dazwischen umschalten? Diese auch speichern? Und statt streamen vielleicht auch ein Video aufzeichnen?

Ich habe mich zu Beginn wohl zu initial wenig auf das Werkzeug eingelassen. Die Einstiegsoberfläche ist halbwegs einfach. Sobald man aber irgendeine Einstellung bearbeitet, wird man mit zahlreichen Optionen regelrecht eingedeckt. Das Speichern der erstellten Szene habe ich gar nicht gefunden, weil ich es als “Pojekt” links oben im ersten Menüpunkt erwartet hätte. Man muss sich wirklich erst etwas genauer umsehen.

Weil ich schon immer mal ein Tutorial mit Aufzeichnung des Bildschirminhaltes machen wollte, habe ich mich nochmals hingesetzt und probiert.
Als Erstlingswerk entstand ein Installationsvideo für mein Monitoring Werkzeug Pimped Apache Status.

2018-10-27-obs.png

Das Haupfenster ist spartanisch … aber hat es in sich

  1. links unten: “Szenen” - eine Liste mit verschiedenen Settings: Start-Bildschirmseite mit Text, dann eine oder mehrere mehrere mit Interaktionen, eine Outro-Szene.
  2. links unten 2: “Quellen” - pro Szene kann man ein Setup von Quellen platzieren. Ein Bild oder Programmfenster, Webcam oder Videoquelle, Text - alle Elemente kann man skalieren und verschieben und so beliebig anordnen. Die Quellen kann man in mehreren Szenen verwenden (verlinken) - damit werden Änderungen eines Textes oder einer Farbe in allen Szenen übernommen.

OBS zeichnet die Szenen-Umschaltung, die ich manuell gesteuert habe (Anm.: man kann dies auch automatisieren) und die in einer Szene eingebetten Bildschirmaktionen als eine Video-Datei auf.
Nach der Aufnahme war das per Webcam aufgezeichnete Audio zu leise - das musste noch normalisiert werden. Und das Video nochmals encodet.
Weil ich noch zusätzlich einige Annotationen einbringen wollte, z.B. weitere Texte und Hervorhebungen in der Ausgabe auf der Konsole, wurde noch ein 2. Video-Bearbeitungswerkzeug herangezogen.

2018-10-27-vsdc-video-editor.png

Und dann die Videodatei ein drittes Mal encodet. Davon wird die Videoqualität nicht besser. Hier habe ich noch Potential für Optimierungen.
Aber dann ging es “sogleich” auf Youtube.

Voila:

weiterführende Links:

  1. obsproject.com OBS Studio (Free and open source software for video recording and live streaming)
  2. videosoftdev.com VSDC Free Video Editor
  3. Axels Webseite - Docs Pimped Apache Status Get started - hier ist das Youtube Video eingebunden
Artikel weiterempfehlen: Google + Facebook

Matomo-Updater

Ich habe bei meinem Hoster ein shared Hosting. Dort läuft seit (gefühlt) “ewig” eine Piwik-Instanz. Heute Matomo.
Das aktuellste Matomo Zipfile enthält das Unterverzeichnis “matomo”. Aber meine Instanz liegt noch in einem andersnamigen Verzeichnis.

Damit ich auch künftig weiter automatisiert auf die aktuelle Matomo Version aktualisieren kann, habe ich ein Shellskript geschrieben, was das entpackte Achiv ins eigentliche Installverzeichnis schiebt.

Falls dies noch wer gebrauchen kann … bitteschön :-) Anzupassen ist der Bereich Config…

2018-10-19-matomo-update.png

[Read More…]

Artikel weiterempfehlen: Google + Facebook

Javascript Snippet: Query Parameter holen

Ab und an brauche ich es mal … und daher ergänze ich hier ein weiteres Snippet.

/**
 * get query parameters from url as object
 * @returns {object}
 */
function getQueryParams() {
    qs = document.location.search.split('+').join(' ');

    var params = {},
            tokens,
            re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

Beispiel:

// to get values from current request
// https://example.com/path/index.html?parameter1=foo&parameter2=bar
var oQuery=getQueryParams();
console.log(oQuery.parameter1); // foo
console.log(oQuery.parameter2); // bar
Artikel weiterempfehlen: Google + Facebook