Egyszeru animacio: streameles webrol?

 ( apal | 2014. május 22., csütörtök - 9:18 )

Sziasztok!

Hogyan lehetne egy egyszeru, webes, szerveroldalon generalt valosideju animaciot kulturaltan es kvazi bongeszofuggetlenul streameltetni?

Adott pl egy http://xyz.net/abc.png nevu" ke'p, amit dinamikusan general a szerver (minden egyes http query-re legeneralja a szerver belso allapotatol fuggoen). Amiket probalgattam:

  1. Naivan, elso"re olyasmit neztem hogy a http headerekhez hozzatettem egy Refresh: erteket. Ha csak a kepet maga't nyitja meg az ember a bongeszoben, akkor ez igy tkp jo is lehet. Chrome alatt elegge villog, ff alatt ma'r egy fokkal egeszsegesebb - de meg mindig nem annyira kulturalt.
  2. Viszont ez nem beagyazhato. Pl ha egy html oldalba ha beteszek <img src="..."> modon egy ilyen kepet akkor ott ma'r nem frissiti.
  3. Iframe-t is probaltam, chrome alatt mukodik (de villog), ff alatt ez a megoldas sem jo.

Barmi egyeb otlet? Az animaciok sebessege az kabe 1 fps, szoval nem live webcam jelleg, de azert nem is annyira ritka a mintavetelezes. Az mjpeg-nek me'g utananezek, hatha az lesz a nyero", bar akkor szerveroldalon vminek folyamatosan futnia kell ami generalja.

Koszi, A

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

Megnezem ezt az x-mixed-replace dolgot, hatha...

jol elbeszelgetek itten magammal ;] a konkluzio az az hogy a standard szepen megy ff alatt, de chrome alatt meg se nyekken. sej :/

Nincs 100%-ig kidolgozva, de:

1. Canvasra tudsz normalisan rajzolni binaris adatbol. Ha villog, csinalsz ket canvast amire rajzolsz es valtoztatod a z-indexet.
2. Hazasitsd ossze ezzel: https://github.com/digg/stream

Itt is kell tolni szerver oldalrol adatot, viszont JS-ben tudsz gondoskodni arrol, hogy ne villogjon. IE alatt nem tudom mennyire fog menni.

--
Pásztor János
Üzemeltető Macik

JavaScript-tel meg lehet csinálni, hogy a képet háttérben töltöd be, és akkor teszed láthatóvá, amikor már betöltődött. Ehhez az Image objektumot, és ennek az onload eseménykezelőjét kell használni.

Ezen a találalton a második példakód: http://stackoverflow.com/questions/19396390/load-image-from-javascript

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://whatever';

disclaimer: nem próbáltam most ki, régebben csináltam ilyet, és működött.

A másik problémára, az újratöltés kikényszerítésére a legjobb megoldás IMHO, ha az url-be beleteszel egy időbélyeget, amit a szerver figyelmen kívül hagy:

newImg.src='http://whatever/myimage.png?time=123456789whatever'

Ha az időbélyegben csak az egész másodperceket használod, akkor két kliens esetén még a proxy is jól működhet, feltéve, hogy jól van beállítva az órájuk. Ha a kliensek egymásra-hatását ki akarod zárni, akkor meg kell egy véletlen szám is a query-be.