+++ Daumenkino fürs Web +++


Bilder, die von einer motionEyeOS-Webcam gemacht werden, automatisch oder manuell, werden von dieser via FTP auf einen Webserver geladen. Das vorliegende Script bindet diese automatisch in eine Webseite ein.

Das Daumenkino-Script nutzt Javascript im HTML und PHP, und wurde für Linux-Webserver entwickelt & getestet. Es sollte auch auf einem Webserver mit anderen Betriebssystemen funktionieren, dies wurde aber nicht getestet.

Der HTML-Teil des Scriptes kann beliebig angepasst werden, um optimal in eine Website integriert zu werden. Der "div" mit der CSS-Klasse "pixkino" und der darin enthaltene "canvas" werden aber zwingend benötigt:

<div class="pixkino" data-pixkino-state="" data-pixkino-interval="500">
	<canvas id="pk-canvas" width="640" height="480"></canvas>
</div>

Das Attribut "data-pixkino-interval" steuert, wie schnell die Bilder ablaufen, 1000 entspricht 1 Sekunde. Jedes Bild ist also für 1 Sekunde sichtbar.

Integration in bestehende Websites
Das Script kann einfach in bestehende Websites eingefügt und angepasst werden. Alternative: Das Script kann auch in ein separates (Sub-) Web installiert werden und in die gewünschte Webseite mittels eines Iframe (Inlineframe-Tag) eingebunden werden.

Responsivenes
Der HTML-Teil des Scripts wurde bewusst so einfach wie möglich gehalten, um einfach an das Design einer Website angepasst zu werden. Aus diesem Grund wurde auf CSS weitgehend verzichtet und keine Toolkits verwendet (Bootstrap & Konsorten).

jQuery
Die JavaScript-Erweiterung jQuery wird verwendet. Es sollte mit jeder Version aus der 1.X-Serie funktionieren. Zu finden ist die Einbindung von jQuery im unteren Teil des HTML, und kann einfach angepasst werden:

<script src="jquery/jquery-1.12.4.js"></script>
<script src="jquery/jquery-ui-1.12.1.js"></script>

Der Bildlauf kann auch mit Hilfe des "Fortschrittbalken / Schieberegler" gesteuert werden; hierfür wurde der "Slider" von jquery-ui eingebunden.

Bilder-Upload via FTP
Das Script erwartet die Bilder im von motionEyeOS vorgegebenen Format in einem Unterverzeichnis zu finden. Der Name oder der Pfad zum Unterverzeichnis ist im PHP-Code bei "// picture-folder to scan" konfigurierbar (Default: "pixes"). Falls der Webserver nicht passend konfiguriert werden kann, dürfte ein mittels Cron periodisch ausgeführtes Kopier-Kommando die einfachste Lösung sein.

Platzhalter-Bild
Im Verzeichnis "pixes" kann ein Bild mit dem Dateinamen "empty.jpg" platziert werden. Dieses Bild wird angezeigt, solange keine anderen Bilder zu finden sind. Nützlich als Platzhalter, z.B. bis die Kamera korrekt konfiguriert ist.

Autostart-Feature
Um das Daumenkino automatisch zu starten, die beiden "/"-Zeichen vor "pixkino2.start();" am unteren Ende des Scripts entfernen:

$(function() {
	pixkino2.init();
	
	// autostart
	//pixkino2.start();
});

