Записки программиста, обо всем и ни о чем. Но, наверное, больше профессионального.

2014-06-17

Plone + webcam

Озаботился я тут на днях одной проблемой. Суть проблемы в том, что хочется показывать на веб-странице картинки с веб-камеры. Очевидно, проблеме сто лет в обед и решается она двумя сниппетами кода
HTML
<img id="myimg" src="url to webcam.jpg">
и JS
function showImageFromWebcam() {
    var now = new Date();
    var stamp = parseInt(now.getTime() / 2000, 10);
    $('#myimg').attr('src', "http://clubwindsurf.info/ftpfiles/webcam.jpg?" + stamp);
    setTimeout(showImageFromWebcam, 2000);
}
setTimeout(showImageFromWebcam, 2000);

Но не все так просто, жизненные реалии вмешиваются в плавный ход абсолютных абстракций. А если картинка на сервер еще не догрузилась? А если ее там и вовсе нет? А если картинку долго качать?

В жизни получается так, что простое решение выглядит для глаз посетителя веб-сайта неприятно.
Поэтому надо сделать фоновую загрузку картинки и показывать ее только тогда, когда она уже полностью закачана.

Недолгое гугление и игра с jsfiddle привели к следующему решению:
// правильная загрузка картинок с веб-камеры
// http://stackoverflow.com/questions/11632278/use-page-specific-css-in-plone
// http://jsfiddle.net/623rB/13/
// http://jqueryfordesigners.com/image-loading/
// http://docs.plone.org/adapt-and-extend/theming/templates_css/css.html

// HTML
<div id="loader" class="loading"></div>

// CSS
DIV#loader {
    border: 1px solid #ccc;
    width: 640px;
    height: 480px;
}
/**
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
 DIV#loader.loading {
    background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center center;
}

// JS
function showImageFromWebcam() {
    var now = new Date();
    var stamp = parseInt(now.getTime() / 2000, 10);

    var img = new Image();

    // wrap our new image in jQuery, then:
    $(img)
    // once the image has loaded, execute this code
    .load(function () {
        // set the image hidden by default
        $(this).hide();

        // with the holding div #loader, apply:
        $('#loader')
        // remove the loading class (so no background spinner),
        .removeClass('loading')
        // then insert our image
        .empty().append(this);

        // fade our image in to create a nice effect
        //$(this).fadeIn(200);
        $(this).show();
        setTimeout(showImageFromWebcam, 2000);
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
        // notify the user that the image could not be loaded
        setTimeout(showImageFromWebcam, 1333);
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', "http://clubwindsurf.info/ftpfiles/cam_1.jpg?" + stamp);
}

setTimeout(showImageFromWebcam, 2000);

Результат можно наблюдать тут http://clubwindsurf.info/webcam

А по итогам этого небольшого хакинга у меня родилась очередная хотелка-задача в список того, чем мне можно было бы заняться при избытке свободного времени:

Сделать Plone add-on (http://plone.org/products) с названием типа «Живые снимки с веб-камеры» / «Webcam images live».
Этот аддон (viewlet, portlet, document — пока не решил) спрашивает — где брать картинку, размер картинки (можно и автоматом детектировать), периодичность обновления. После чего вставляет на страницу вышеупомянутый код обновления изображения.

Удивительно, но ничего готового на эту тему я не нашел.

Кстати, в сети нашелся вот такой интересный материал:
Plone, HTML 5 Canvas and Face Detection with Webcam

Добрый человек сделал прототип распознавателя лиц (на базе openCV) в виде аддона к Plone. По сути, он игрался с новыми API в HTML5.



original post http://vasnake.blogspot.com/2014/06/plone-webcam.html

Комментариев нет:

Отправить комментарий

Архив блога

Ярлыки

linux (241) python (191) citation (185) web-develop (170) gov.ru (156) video (123) бытовуха (111) sysadm (100) GIS (97) Zope(Plone) (88) Book (81) programming (81) бурчалки (80) грабли (77) development (73) Fun (72) windsurfing (72) Microsoft (64) hiload (62) opensource (58) internet provider (57) security (57) опыт (55) movie (52) Wisdom (51) ML (47) language (45) hardware (44) JS (41) curse (40) money (40) driving (39) DBMS (38) bigdata (38) ArcGIS (34) history (31) PDA (30) howto (30) holyday (29) Google (27) Oracle (27) virtbox (27) health (26) vacation (24) AI (23) Autodesk (23) SQL (23) Java (22) humor (22) knowledge (22) translate (20) CSS (19) cheatsheet (19) hack (19) tourism (18) Apache (16) Manager (15) web-browser (15) Никонов (15) happiness (14) music (14) todo (14) PHP (13) weapon (13) HTTP. Apache (12) SSH (12) course (12) frameworks (12) functional programming (12) hero (12) im (12) settings (12) HTML (11) SciTE (11) crypto (11) game (11) map (11) scala (10) HTTPD (9) ODF (9) купи/продай (9) benchmark (8) documentation (8) 3D (7) CS (7) DNS (7) NoSQL (7) Photo (7) cloud (7) django (7) gun (7) matroska (7) telephony (7) Microsoft Office (6) VCS (6) bluetooth (6) pidgin (6) proxy (6) Donald Knuth (5) ETL (5) NVIDIA (5) REST (5) bash (5) flash (5) keyboard (5) price (5) samba (5) CGI (4) LISP (4) RoR (4) cache (4) display (4) holywar (4) nginx (4) pistol (4) xml (4) Лебедев (4) IDE (3) IE8 (3) J2EE (3) NTFS (3) RDP (3) USA (3) mount (3) spark (3) Гоблин (3) кухня (3) урюк (3) AMQP (2) ERP (2) IE7 (2) NAS (2) Naudoc (2) PDF (2) address (2) air (2) british (2) coffee (2) font (2) ftp (2) holiday (2) messaging (2) notify (2) sharepoint (2) ssl/tls (2) stardict (2) tests (2) tunnel (2) udev (2) APT (1) CRUD (1) Canyonlands (1) Cyprus (1) DVDShrink (1) Jabber (1) K9Copy (1) Matlab (1) Palanga (1) Portugal (1) VBA (1) WD My Book (1) autoit (1) bike (1) cannabis (1) chat (1) concurrent (1) dbf (1) ext4 (1) idioten (1) krusader (1) license (1) mindmap (1) pneumatic weapon (1) quiz (1) regexp (1) robot (1) science (1) serialization (1) tie (1) vim (1) Науру (1) крысы (1) налоги (1) пианино (1)

Google+ Followers