Using CEF with OF


#21

OK … You are on fire! Watch out for the rabbit hole :wink:

To add to one of your previous post. ofxCEFClient run this page quite nicely on Windows using OSR. So yes it should be, to some extend, possible to have good perf with CEF using OSR.


#22

But, am I correct to think that CEF is the tool to implement a frontend UI in html/css/js? I mean Lua and AngelScript are totally different beats.

Right in Simon’s case, the application UI was all CEF (before moving to node-webkit) and the actual functionality of the application was to live-code Cinder.


#23

some improvements on my repo:

using the most recent CEF binary build (“CEF 3.2217.1939” via http://cefbuilds.com/) there’s some big improvements to rendering speed for the offscreen renderer. I took the off screen rendering code out of the client example and brought it into this. I also experimented a bit with how to deal with retina, which is kind of odd between the off screen renderer and how OF does retina.

there are some bugs – keyboard events don’t seem to propagate through correctly for example and exit crashes – but it feels pretty usable. to alternate between retina and non retina look for this plist settings

I’m drawing the browser window as a texture

and I’m drawing the OF stuff on top.

mr doob’s examples are useful for comparing frame rate to a normal browser

there’s also a mode that hijacks the whole OF window (non offscreen renderer) that is very fast. I will take a look at how to expose this.


#24

and because it had to be done, OF in a browser in OF, it’s totally not as bad as it sounds :slight_smile:


#25

All this is really great!

I’m back in Montreal, after the holidays festivities. I just tried to compile cefWork, and here are some of the problems I am encountering:

1-
A .pch file is missing for the cefHelper application:

clang: error: no such file or directory: '/Users/hugues/Development/openFrameworks/apps/myApps/cefWork/cefHelper/cefHelper-Prefix.pch'

After removing the reference to that file in the building settings of the app, this error goes away, but I want to make sure it’s correct to remove it.

2-
The file ‘process_helper_mac.cpp’ includes ‘client_app.h’ is not found. Is the file ‘process_helper_mac.cpp’ even used?

3-
All the identifier in the method GetMacKeyCodeFromChar are undeclared. As the method does not seem to be used I commented it out to go further.

4-
I get this error:

ld: warning: directory not found for option '-L/Users/hugues/Development/openFrameworks/apps/myApps/cefWork/src/CEF/Release'
ld: warning: directory not found for option '-F/Users/hugues/Development/openFrameworks/apps/myApps/cefWork/src/CEF/Release'
ld: library not found for -lcef_dll_wrapper
clang: error: linker command failed with exit code 1 (use -v to see invocation)

This path is defined in the ‘Build Settings > Framewroks Search Parths’ and in ‘Build Settings > Library Search Parths’.

5-
Last one… I have a missing library:

ld: library not found for -lcef_dll_wrapper. 

I can see a broken reference, to the lib ‘libcef_dll_wrapper.a’, in the build phases of both the applications (defWork and cefHelper). I guess this is linked.

Thanks!


#26

can you post these on the github repo?


#27

of course.


#28

thanks! I find it easier to attack them / track them there. most of these are small things that the gitignore must have left out, let me fix…


#29

Wrapped up Admsyn’s tip in a quick to ofxWebView

I couldn’t believe it was so simple so I had to test it.


#30

I am hoping to get CEF running on windows with OF.
Looking at ofxCEF it appears to have support for Windows, but is missing the readme information for the setup of the project.
Anyone have a windows project working that is using this? Willing to share?


#31

Well… I have gotten a little further, but I seem to have linking errors.
Unfortunately… due to time constraints… I need to look for a simpler solution.
Hopefully one more experienced OF dev can get this to a point where I can jump back in sometime in the near future.


#32

My project has to be compiled in 64bit (because of other dependencies) and we now needed to display some web stuff.
So I managed to get ofxCef working with 32 and 64bit.

You can look at the modified example and an expanded readme in my fork of ofxCef:

I’m using openframeworks 0.9.3, Visual Studio 2015 Update 3 and CEF version 11/19/2016 - CEF 3.2840.1518.gffd843c / Chromium 54.0.2840.99 (downloaded from http://opensource.spotify.com/cefbuilds/index.html)
Getting it to build was a little convoluted, so here is an outline of the necessary steps:

If you want to compile for both 32 and 64 bit you have to download both CEF Windows builds

Move the contents of the 32bit version of CEF to ofxCef\libs\CEF\win32 and the content of the 64bit version to ofxCef\libs\CEF\win64
Build the CEF Visual Studio Projects AFTER copying CEF to the addon (some generated paths are absolute and not relative to the project location)
Note if you are using CMake to perform a Windows build of CEF and are following the instructions in CEF's CMakeLists.txt you have to exclude the sandbox if you are using Visual Studio 2015 Update 3 with the argument -DUSE_SANDBOX=Off like so (else you will get build errors, though this might be fixed in newer versions of CEF):
cmake -DUSE_SANDBOX=Off -G "Visual Studio 14" ..
cmake -DUSE_SANDBOX=Off -G "Visual Studio 14 Win64" ..

Add libcef_dll_wrapper.vcxproj and the ZERO_CHECK.vcxproj to your existing Visaul Studio solution.
If you want to setup both 32bit and 64bit support for your project, you have to add both versions to your solution. This can be a bit tricky, because Visual Studio only accepts one project of the same name. You can however add the projects to different solution folders. It might be easier to add the projects by editing the sln file in a text editor. If in doubt check the example_ofxCef solution in my fork.

For all of the following paths for 64bit configuration replace win32 with win64

Add additional include directories
Go to your project's Configuration Properties/C/C++/General/Additional Include Directories, add:
../../../addons\ofxCef\libs\CEF\win32\include
../../../addons\ofxCef\libs\CEF\win32
../../../addons\ofxCef\src

Add library directories
Go to your project's Configuration Properties/Linker/General/Additional Library Directories, add:
../../../addons\ofxCef\libs\CEF\win32\$(Configuration)

Link against libcef.lib and libcef_dll_wrapper.lib
Go to your project's Configuration Properties/Linker/Input/Additional Dependencies, add:
../../../addons\ofxCef\libs\CEF\win32\build\libcef_dll_wrapper\$(Configuration)\libcef_dll_wrapper.lib
../../../addons\ofxCef\libs\CEF\win32\$(Configuration)\libcef.lib

Add a post build event to copy the relevant dll, bin and pak files to the executable
Go to your project's Configuration Properties/Build Events/Post-Build Event/Command Line, replace the openframeworks stuff with:
echo on
        dir
        robocopy "$(ProjectDir)../../../addons/ofxCef/libs/CEF/win32/$(Configuration)/" "$(ProjectDir)bin/" "*.dll" "*.bin" /njs /njh /np /fp /bytes
        robocopy "$(ProjectDir)../../../addons/ofxCef/libs/CEF/win32/Resources/" "$(ProjectDir)bin/" "*.pak" /njs /njh /np /fp /bytes
        robocopy "$(OF_ROOT)/export/vs/$(Platform_Actual)/" "$(ProjectDir)bin/" "*.dll" /njs /njh /np /fp /bytes
if errorlevel 1 exit 0 else exit %errorlevel%

If you want to skip this step you can also just copy the relevant files yourself to the executable. Your project should build independently of this step, you might just get an error when the application starts running (because of missing files).

Ensure libcef_dll_wrapper is a dependency of your own project (Project Name > Project Dependencies).
Ensure libcef_dll_wrapper is referenced by your project (Project Name > References > Add New Reference).
You may have to change the Runtime Library of the libcef_dll_wrapper.vcxproj to Multi-threaded DLL (Configuration Properties/C/C++/Code Generation/Runtime Library).

Hope this helps somebody else! :slight_smile:


Web based UI, Electron CEF
#33

I got the example project working on Windows 10 64bit without crashing when exiting the application. I created a pull request to ofZach/ofxCef


#34

Thank you very much for this. I will give it a try!

Any Pros and Cons about this? are you using UI + 3D graphics or video? Performance issues?


#35

It’s working but I’m not too happy with it.
In my project almost everything (UI, Video, etc) is running with the openframeworks components. I only had to integrade CEF to display a web-app I got “as is” from another developer. So I didn’t really test video playback or more complex HTML with CEF.

CEF does not slow down the framerate of the application window, though it seems to me that the texture CEF is rendering to does not update at the same framerate (it seems slower).

Also sometimes CEF does not render at all while the rest of the application runs fine. This so far only happened on the machine I’m developing on and I haven’t been able to exactly find out the reason.

Other than those issues CEF is useful to me for things where the framerate is not critical. Once I got it running it was very easy to load HTML and display it within the rest of my application. So far I didn’t run into any limitations with it, though as I said I didn’t really test a lot of features.


#36

Dear Echolaitoc,

thank you very much for your work!
It seems very important to me to get a stable and well-working ebbeded browser in OF. So I am thankful for every effort .

To everybody who is still interested:

I failed to compile the example with actual versions of cef binary (obviously some functions changed slightly, proably since 3.3). But I was able to compile and run it with both cef_binary_3.2840.1518.gffd843c and cef_binary_3.2987.1601.gf035232 on windows in 64bit.

When using text (e.g. in HTML Editor Web page example) I get errors like this in console:

ERROR:textbreakiteratoricu.cpp(80) icu: BreakIterator construction failed with status 2

On many occasions I get a crash and the following outputs:

textbreakiteratoricu.cpp check fails: U_SUCCES (openStatus). ICU could not open a break iterator: U_MISSING_RESOURCE_ERROR (2)

This happens

  • in mrdoob-example: when using text in HTML editor site example and going on to another site example
  • in mrdoob-example: when clickling into a google-site-example
  • when clicking in text field in threejs.org example
  • on start of haiku example

Calling google.com directly, text entering works well, Only arrow keys in text fields give symbols instead of doing what tey should. Entering text on a wikipedia-page crashes again.
Will I have to set up icu in any way? Or might be a JS -Problem?

Also mouse wheel will not work although it seems to be implemented in example?

Thanks to all & have a good day!
oe


New Awesomium integration addon - ofxAwesomiumPlus
Embedded browser in openframeworks Windows VS
#37

hey @dasoe, i tested your ofxCEF fork to handle a gui with boostrap/jquery buttons, sliders…etc but I felt it slow on reaction too. Sometimes the buttons don’t get the click for example, or the dropdown list doesn’t opens correctly.
do you have any progress on the addon or any screenshot of what you made with this?


#38

Hi moebiussurfing,

sorry it took me so long to answer.
I did not really progress with ofxCef (btw: it’s Echolaitocs fork - fame to him!). I was looking into compiling webKit on Windows in the meantime but get crashes whenever using Javascript, so probably skip this again.
I am thinking about trying to start from scratch, include an actual version of CEF in openFrameworks and test the performance and stability. And maybe eventually make a new addon from this if it turns out to be promising. But to be honest it’s not top priority and I don’t know when I will be able to try. Until then it really seems ofxAwesomiumPlus is the only well-working solution (and with problems, as awesomium is sort of dead).

But tell me: did you have the errors/crashes I mentioned?

have good day!
oe