VSnake notes: Plone + webcam

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 — пока не решил) спрашивает — где брать картинку, размер картинки (можно и автоматом детектировать), периодичность обновления. После чего вставляет на страницу вышеупомянутый код обновления изображения.

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

Кстати, в сети нашелся вот такой интересный материал:

http://blog.keul.it/2014/02/plone-html-5-canvas-and-face-detection.html

Plone, HTML 5 Canvas and Face Detection with Webcam

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

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

Tools

VSnake notes

2014-06-17

Plone + webcam

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

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

Архив блога

Ярлыки

Обо мне

Links