Pasting png image data into Image tag from CEF

Do not post support requests, bug reports or feature requests. Discuss CEF here. Non-CEF related discussion goes in General Discussion!

Pasting png image data into Image tag from CEF

Postby videoaudio » Fri Feb 26, 2016 1:32 am

Hi,

I am trying out bellow possibility with my test app (cef3, linux platform, 64 bit)

1. I have html page with an image tag.
2. Browser or app process generates the RGB pixels (PNG image) dynamically (say 1 image worth of pixels generated for every 33 milliseconds)
3. I want to change the image tag content dynamically by pasting these RGB pixels into image tag.

I read in some posts that, It is possible to update image tag with pasting base64 encoded RGB data into image tag dom, using "CefFrame::ExecuteJavaScript()" method. -- I guess this involves additional base64 encode + memcopy overhead. (example : overhead can be high for high resolution images. Data can be as big as :1280(width) x 720(height) x 4(r,g,b,alpha 1byte data per pixels) per frame)

Is it possible to directly access the dom element (without using javascript) of image tag from C++ and paste/write the image pixel data there?
Or should I be using direct webkit apis to do this? Is there any example where I can have a look.

Thanks a lot in advance.
videoaudio
Techie
 
Posts: 36
Joined: Tue Feb 17, 2015 10:08 am

Re: Pasting png image data into Image tag from CEF

Postby amaitland » Fri Feb 26, 2016 1:50 am

Have you considered writing a very simple PPAPI plugin?

https://code.google.com/p/ppapi/wiki/2DPaintingModel
Maintainer of the CefSharp project.
amaitland
Virtuoso
 
Posts: 1290
Joined: Wed Jan 14, 2015 2:35 am

Re: Pasting png image data into Image tag from CEF

Postby videoaudio » Fri Feb 26, 2016 5:32 am

Thanks.
But, I am not planning to use additional plugin process for achieving it.
Also my test platform(headless ubuntu 12.04) does not have any graphics or 3D acceleration.
videoaudio
Techie
 
Posts: 36
Joined: Tue Feb 17, 2015 10:08 am

Re: Pasting png image data into Image tag from CEF

Postby magreenblatt » Fri Feb 26, 2016 12:44 pm

Why not use JavaScript? You can then update the image tag quite easily or use a canvas.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Pasting png image data into Image tag from CEF

Postby videoaudio » Mon Feb 29, 2016 4:30 am

@magreenblatt,

I don't prefer to use updating image source using Javascript because,
1. My Image sizes are pretty huge: 1280x720x4 bytes(argb)/pixel == ~3.7MB per image.
2. Frequency of updating image is also very high. Like every 33 milli seconds. (To get 30fps video experience)

I tried with CEF3 with using 2D canvas and auto updating image. It works perfectly, but CPU usage shoots up. (As I dont have graphics support on my system, cpu usage shootsup)
Tried with updating image tag source as well using Javascript. This also cannot be achieved in realtime. i.e. update image every 33 ms seems not realtime.

So I am wondering using webkit apis to access image tag's source address & update image data is the only left out option.
Is there any example where I can have a look for this?

Please give your suggestions here. It will be helpful.

Thanks.
videoaudio
Techie
 
Posts: 36
Joined: Tue Feb 17, 2015 10:08 am

Re: Pasting png image data into Image tag from CEF

Postby magreenblatt » Mon Feb 29, 2016 2:58 pm

I don't think you'll be able to do this in a CPU efficient manner even by hacking Blink. Effectively you're trying to play HD video without GPU support.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Pasting png image data into Image tag from CEF

Postby videoaudio » Wed Mar 02, 2016 12:11 am

Yes, CPU will be bottleneck in this approach.
Thanks for all the inputs.
videoaudio
Techie
 
Posts: 36
Joined: Tue Feb 17, 2015 10:08 am


Return to CEF Discussion

Who is online

Users browsing this forum: No registered users and 17 guests