Page 1 of 1

Display memory buffer as Image in html canvas

PostPosted: Mon Jun 06, 2016 7:01 am
by DerickThePoney
Dear all,

So far I have been unable to get the answer I need from my searches in the forums and/or the documentation. Here is my problem:

I am trying to use CEF as an HTML/Javascript UI display for another application. Our application is writtent in C++, uses cameras, and processes the images from the camera. I would like to display the images onto an HTML canvas, while (if possible) keeping the image in memory. I have an unssigned char* memory buffer containing the image in c++, and I know the size of the buffer. Javascript to HTML is easy, I can get the buffer data and write directly on it, but so far I haven't been able to use that in C++.

I have read somewhere that maybe I can use HTTP request to stream the images to the renderer? But I don't know how to implement that both in C++ and in javascript. Is there a simpler way, like asking javascript to display a memory buffer ?

As a disclaimer, I am definitely not new at C++, new at CEF, and incompetent (or almost) in html javascript.

I hope my question is clear enough, don't hesitate to ask me for details. Thank you in advance, and best regards!

Re: Display memory buffer as Image in html canvas

PostPosted: Wed Jan 04, 2017 5:48 am
by TheSHEEEP
Has this ever been resolved?

I've been looking for a solution to this (passing images/raw images from C++ to the HTML page instead of having HTML just load a file) as well, but all topics opened on this seem to go nowhere.

There is the response filter, of course, but its sample merely shows how to replace text. I really wouldn't know if an image could be manipulated at runtime the same way...

Edit:
From further research, it seems custom schemes as in the scheme_test.cc might be one of the easier methods to get this done.
Of course, that would put the performance weight of updating the image regularly on the JS side.

A method to simply update some kind of render texture within C++ would be preferable. One copy would have to be done either way, but doing this on the JS side would require two copies if I'm not mistaken:
C++ -> JS -> texture

While just "C++ -> texture" would be much better.

Re: Display memory buffer as Image in html canvas

PostPosted: Mon Jan 09, 2017 2:31 pm
by magreenblatt
You can load an image in a canvas or img element. So it's just a question of how to create the image that will be loaded. What format is your image in originally? If it's already something that the browser can handle (JPG, PNG, etc) then just return the image via a custom scheme handler, and point your canvas or img element to that scheme URL.