GWT: циклическая загрузка изображения

Question

Я пытаюсь реализовать вид видеопотока, который передается на простые файлы JPEG. На моем сервере JPEG создается циклически с помощью внешней камеры. И я просто хочу включить это изображение в свое приложение GWT.

Моя первая идея перезагрузить изображение с помощью таймера была очень простой, но не очень хорошей: клиент открывает соединение для каждого цикла перезагрузки, а изображение мерцает (по крайней мере, в Firefox).

Как я мог решить эти проблемы? Я думал о чем-то вроде «Web-Sockets», но я действительно не знаю, как это сделать. Я хочу избежать единственного подключения для каждой перезагрузки. Моя идея состояла в том, чтобы иметь что-то вроде открытого соединения, которое просто предоставляет новое изображение так часто, как просит клиент.

И как я мог избежать мерцания при замене изображения?

Любые идеи приветствуются!

Привет, VanDahlen

Answer 1

Раствор, чтобы избежать мерцания, чтобы иметь два изображения абсолютно позиционированные в том же месте. Таймер будет загружать один или другой вариант в каждом кадре. Установите для каждого изображения обработчик load, чтобы он изменил z-индекс при загрузке изображения и перезапустил таймер.

Добавляя дополнительный параметр к URL-адресу изображения, браузер обращается к серверу каждый раз, чтобы обойти его кеш.

Если время между кадрами невелико, обычно браузер будет использовать одно и то же соединение, если keep-alive правильно настроен на вашем сервере. Обычно он включается с типичным значением 5-15 секунд, который вы можете увеличить, поэтому, если ваши .jpg изображения обновляются с этой периодичностью, вам не нужно беспокоиться и искать лучшее решение.

Я предлагаю решение на основе этих идей. Но это сработает, если вы используете механизм websocket/comet, дающий вам последний файл .jpg в формате base64 (просто измените url на возвращаемое значение).

код GWT:

public void onModuleLoad() { 

    final Image i1 = new Image(); 
    i1.setWidth("400px"); 

    final Image i2 = new Image(); 
    i2.setWidth("400px"); 

    AbsolutePanel panel = new AbsolutePanel(); 
    panel.add(i1, 0, 0); 
    panel.add(i2, 0, 0); 
    panel.setSize("600px", "400px"); 

    RootPanel.get().add(panel); 

    // You could change this by base64 data if you use comet/websockets 
    String url = "my_image_url.jpg?"; 

    final Timer loadNext = new Timer() { 
    boolean b; 
    int c; 
    public void run() { 
     // the counter parameter forces to load the next frame instead of using cache 
     if (b = !b) { 
     i1.setUrl(url + c++); 
     } else { 
     i2.setUrl(url + c++); 
     } 
    } 
    }; 

    i1.addLoadHandler(new LoadHandler() { 
    public void onLoad(LoadEvent event) { 
     i1.getElement().getStyle().setZIndex(1); 
     i2.getElement().getStyle().setZIndex(0); 
     loadNext.schedule(1000); 
    } 
    }); 

    i2.addLoadHandler(new LoadHandler() { 
    public void onLoad(LoadEvent event) { 
     i1.getElement().getStyle().setZIndex(0); 
     i2.getElement().getStyle().setZIndex(1); 
     loadNext.schedule(1000); 
    } 
    }); 

    loadNext.schedule(1000); 
} 

Если вы хотите использовать gwtquery код явно меньше:

// You could change this by base64 data if you use comet/websockets 
    final String url = "my_image_url.jpg?"; 

    final GQuery images = $("<img/><img/>").appendTo(document); 
    images.css($$("position: fixed, top: 10px, left: 600px, width: 400px")); 

    final Timer timer = new Timer() { 
    int c; 
    public void run() { 
     images.eq(c%2).attr("src", url + c++); 
    } 
    }; 

    images.bind("load", new Function(){ 
    public void f() { 
     $(this).css($$("z-index: 1")).siblings("img").css($$("z-index: 0")); 
     timer.schedule(1000); 
    } 
    }); 

    timer.schedule(1000);