kvision icon indicating copy to clipboard operation
kvision copied to clipboard

Replace image contents at a regular interval

Open tyrel opened this issue 4 years ago • 1 comments

I'm developing a KVision app where we need to display a webcam image (JPEG) and update it every 60 seconds. The JPEG file can be served from a controller on the server, or perhaps we can come up with some other way, but I'm not sure the best approach for KVision to display the image.

An Image object can be bound to an ObservableValue which could update when I fetch new image data, but how do I display it? Would I store a ByteArray in the ObservableValue containing the contents of the image file, and then somehow send that to the Image? The only useful attribute I can change is src and I'm not sure what I'd put there in this case.

Any help is much appreciated. Thanks in advance!

tyrel avatar Feb 07 '21 22:02 tyrel

I would serve the image from the controller with correct image/jpg content type. And just changed the URL used as src value with some random additional parameter (e.g. ?refresh=somerandomdata). It should be enough for the browser to refresh the image every time. You can bind the Image to an ObservableValue containing the URL, but you can also set the property value directly with: image.src = url.

rjaros avatar Feb 08 '21 08:02 rjaros

Closing now

rjaros avatar Dec 03 '22 15:12 rjaros