web application – display image from url – refreshing

web application – display image from url – refreshing

BY 06 Apr 2018 Web Application Development

Hi,

I am writing an application for Gear S2 watch (Tizen 2.3.2.1) 

It will display Jpg image from a live camera. I use the following code for displayig the image and then refresh every 10 seconds.

urls[2]="http://192.168.0.5/snapshot.cgi?user=user&pwd=pass";
if (urls[2].length!==0){ imgs[2].src = urls[2];}
if (imgs[2]) { context.drawImage(imgs[2],134,134,92,76);
 
However, the image does not change at every refresh.
Then I thought that the image might be cached as described here:
https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url
 
So I changed my code to :
 
var t1=new Date().getTime().toString();
var t2=t1.substr(8,5);
urls[2]="http://192.168.0.5/snapshot.cgi?user=user&pwd=pass&c="+t2;
if (urls[2].length!==0){ imgs[2].src = urls[2];}
if (imgs[2]) { context.drawImage(imgs[2],134,134,92,76);
 
This makes the URL change everytime. But the image is not shown at all now.
Any idea why ?
 
Then I decided to try another method:
var t1=new Date().getTime().toString();
var t2=t1.substr(8,5);
urls[2]="http://192.168.0.5/snapshot.cgi?user=user&pwd=pass&c="+t2;
document.getElementById("cam2").innerHTML = '<img src="'+urls[2]+'" width=92 height=76>';

 

Now it works and changes every period. However, now the image is replaced loading. so it first turns black and then loads slowly.

How can I preload the image and then display ?

 

Is there a better method ?

 
Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More