2022. december 8., csütörtök

Gyorskeresés

IP camera viewer PHP script

Írta: | Kulcsszavak: PHP . IP . Camera . Viewer . HTML . Javascript . Cam . modal . pictures

[ ÚJ BEJEGYZÉS ]

Készítettem egy PHP alapú alkalmazást, amivel IP kamerák által FTP-n feltöltött képeket lehet kilistázni generált, User/Password védett weboldalon.

Keresgéltem a neten olyan PHP script után, amit feltölthetek webtárhelyre és az IP kamerák statikus JPG formátumban feltöltött képeit egy generált weboldalon kilistáztathatom és Felhasználónév / Jelszó birtokában megnézhetek, akár mobilon is, anélkül, hogy le kelljen azokat FTP-vel töltenem a szerverről.
Nem találtam egy normális scriptet sem, így nekiálltam szerény PHP tudásommal "összeeszkábálni" egyet. Tudom 90-es évekbeli design és spagetti PHP kód, de a funkcionalitását betölti úgy ahogy az nekem megfelelő.
Abban a reményben mutatom be nektek, hátha egy (vagy akár több) hozzáértőbb PHP fejlesztő forkolja és tovább fejleszti. Nekem is vannak még ötleteim a továbbfejlesztésre, de sok időm nincs rá, de azért szép lassan haladok vele. Viszont egy több fejlesztő által reszelt kód gyorsabban fejlődne.

Installálás
A forráskód letölthető a GitHub-ról és a GitLab-ról.
Ez feltölthető tárhelyünkre, szerverünkre.
Hozzunk létre egy Mysql adatbázist szerverünkön és futtassuk le az /sql/install.sql fájhlban lévő parancsokat (Például Phpmyadminban)

INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`, `opt_adm`) VALUES
(1, 'DefaultUser', 'User Orig Name', 'MD5 PASSW', 'your@mail.com', '1');

Ezt a részt cseréljük a saját adatainkra, ezzel fogunk tudni belépni a dashboardra. (Saját név, Saját megjelenített név, MD5 jelszó, Emailcím). Azt opt_adm = 1 esetén admin lesz a felvett user, más esetén sima felhasználó.

INSERT INTO `registered_cameras` (`c_id`, `display_camname`, `cam_path`, `cam_owner`, `cam_secret`) VALUES
(1, 'DefaultCAM', '/DATAS/CMS/', 1, 12345678); -- Change to Your own camera datas, and add a random secret (Max 8 numbers) --

Ennél a résznél felvehetjük az első kameránk képeinek elérési útját, ami a fent felvett user tulajdona lesz. Ne feledkezzünk meg egy szép random titkos 8 jegyű számot is adni a kamera elérési útnak.

A /class/DataSource.php-ben állítsuk be az adatbázisunk elérését! (HOST, DB USERNAME, DB PASSWORD, DB NAME).

Használat

Ha mindent jól csináltunk, beléphetünk az index.php-n keresztül a dashboardba, ahol jelenleg csak két menü elem van, a CAMLIST, adminoknak pedig az USERLIST (de ez a rész még nincs teljesen kész, egy tömböt listáz ki a rendszerben lévő felhasználók adataival)

Itt adhatunk hozzá kamera elérési útvonalat (8 jegyű camera secret is létrejön egy random generálással!), ami beíródik az adatbázisba, illetve törölni elérési útvonalat, ami törlésre kerül az adatbázisból.
Ez a rész majd a későbbiekben szépítve lesz, jelenleg csak egy table elrendezésre futotta.
A view gombra kattintással nyílik meg a reader, ami kilistázza a legfrissebb 200 képet, illetve lapozható, így megjeleníthető az összes kép. Ezt is majd szeretném userhez kötötten megcsinálni. Azaz az user megadhatja mennyi képet szeretne látni , de nem ajánlatos 10000 kép/oldal-t csinálni (megöli a böngészőt).
Lehetőség van a dátum szerinti rendezés megfordítására már a camlist.php-ben is, amit a GET lekövet minden lapon azaz a régebbi képek lesznek az első lapon, a többin az újak. Ezt is adatbázisba írhatóvá akarom tenni, így megmarad a beállítás a felhasználónak. Jelenleg csak addig marad meg, amíg a GET le tudja követni az URL-ben ezt a beállítást.

A camreader.php listázza ki az adott elérési úton található képfájlokat GET-el felparaméterezve. Mutatja a rendezést, a kamera elérési utat. Mutatja hogy összesen hány kép van feltöltve a mappába és hogy hányadik lapon állunk. A képek alatt megjelenik a fájl neve és a képfájl dátuma, így könnyen beazonosítható, hogy mikor készült a kép.

A képre történő kattintás után megnyílik a kép egy úgynevezett modal slider-ben, ami automatikusan pörög jelenleg, azaz átugrik az újabb képekre (Ez majd módosítva lesz a következő verziókban és csak gombnyomásra fog elindulni az automatikus képcsere. De azt sem bánnám ha egy forkban valaki megcsinálná és nekem már csak be kéne húznom a saját verziómba :D )

Nem általam készített, felhasznált beépített projektek
PHPPOT beléptető rendszer. (Működését elemeztem ebben a blogban)
Modal lightbox and slider

Mit szeretnék még belerakni, javítandó dolgok
- Admin általi felhasználó kezelés, hozzáadás és törlés, szerkesztés
- START / STOP gombok a modalhoz (Esetleg plusz billentyűparancs)
- Kamera útvonal törlése előtti biztonsági értesítés (megerősítés)
- Kamera adatok frissíthetősége törlés és újbóli felvétel helyett
- Szebb kamera lista (a táblázat helyett)
- A kameralistánál már a camlist oldalon látható legyen, hogy mennyi képfájlt tartalmaz a mappa.
- MP4 videó lejátszása, videólista kezelése
- Adatbázisban rögzített rendezési beállítás
- Adatbázisban rögzített egyéb felhasználói opciók

Várom az ötleteket és a forkokat
Várom mindenkinek a további fejlesztési ötleteit. A forráskód forkolását és saját ötleteid alapján történő további fejlesztését, vagy akár teljesen új alapokról történő kód újraírást (PHP-ben pro szeméylektől)
A fejlesztés menete a Githubos commitok által követhető nyomon, főleg itt teszem közzé, hogy mit miért változtatok a kódon.
Én ugyan IP kamera képeinek nézegetésre használom ezt a rendszert, de elképzelhető, hogy más képekkel való munkára is fel lehet használni. Erre is várom az ötleteket.

Köszönöm ha elolvastad! :)

Hozzászólások

(#2) cinemazealot


cinemazealot
addikt

Én ezt a Lightbox plugint szoktam használni, mert szerintem kényelmesebb: ugyan nincsenek előnézeti képek, de a nagy kép bezárásához nem kell pontosan a jobb-felső sarokban lévő ×-re kattintatnom, hanem kattinthatok bárhova a kép köré, vagy elég ha leütöm az ESC-et (ez egyébként .

Érdemes lenne megfontolni a Bootstrap (vagy más hasonló reszponzív könyvtár) használatát is (ez HTML+CSS+JS/jQuery tudásra gyúr inkább), így mobil eszközön is képes lehetsz kényelmesen olvasható webes tartalmat generálni.

Hajrá! :)

Én majd feldolgozni szeretném a webkamera képét feldolgozni szerver oldalon (lehetőleg valós időben) az alábbi kérdések megválaszolására:

- Milyen idegen macska zabálja fel a mi macskánk kajáját?
- Mennyivel megy az egyébként 30-as korlátozással ellátott utcánkon átszáguldó autó?
- Le tudom-e olvasni a fenti autó rendszámát?
- Lejárt-e már a pincében zakatoló mosógép?
- Jelez-e valami hülyeséget a UPC szintén a pincében lévő (állandóan újraindítandó) routere?
stb. :)

[ Szerkesztve ]

(#3) btz válasza cinemazealot (#2) üzenetére


btz
addikt

Remek Lightbox, ha lesz időm jobban átnézem. Az általam használt boxot is meg tudnám csinálni, hogy kikapcsoljon ha a kép mellé kattintok vagy az esc-re. Ha megnézed az enyémbe billentyűparancsokat is tettem, ezáltal a nyíl billentyűk segítségével navigálhatok a képek között.

Responsivan építtettem fel a dolgot mert én magam is sokat használom telefonról és tableteről. Az én ízlésemnek egyelőre megfelel, amúgy már rengeteg újítást raktam bele a blogpost megírása óta :)

Responsive kamera lista. A mappákban található képekeó számlálójábal. Gombokkal a kamera törléséhez, nézéséhez, az utolsó uploadolt kép adatai a kék gomb alatt, illetve title mezőben. (Ezt is majd LIGHTBOXOSÍTANI akarom)

A Camreader is teljesen responsive lett. Nagy betűvel van kiemelve a kép sorszáma, vastagan szedve a képfájl neve, alatta pedig a dátum.

Nem tudom pontosan milyen módon szeretnéd feldolgozni szerveroldalon a kamera képeket, illetve milyen feldolgozási funkciókat lehetne létrehozni a macskakaja tolvaj macska lefülelésére :D Az én kameráim mozgást rögzítenek, így könnyen kikereshető egy egy esemény. :)

ⓑⓣⓩ

(#4) btz


btz
addikt

El is végeztem a szükséges módosítást a /view/js/core-modal.js fájlban. Így mostmár ki lehet lépni ESC-el is a modal nézetből. :)

[ Szerkesztve ]

ⓑⓣⓩ

(#5) btz


btz
addikt

Ma végre volt időm hozzáadni a kameralista fájlhoz az editorgombot és modalt és a delete modal körül is rendet raktam.

alt="" title=""

alt="" title=""

Egyelőre még csak ilyen gagyi a szerkesztő popup. :)

Az ehhez kapcsolódó php akciót még nem gyártottam le, így ez még egy nem működő funkció.

[ Szerkesztve ]

ⓑⓣⓩ

További hozzászólások megtekintése...
Copyright © 2000-2022 PROHARDVER Informatikai Kft.