CEF3的使用說明及CMake使用
原創evil_119 最后發布於2017-12-08 16:48:16 閱讀數 6245 收藏
展開
一.CEF簡介
Chromium Embedded Framework (CEF)是個基於Google Chromium項目的開源Web browser控件，支持Windows, Linux, Mac平台。
簡單說就是Chrome的開源版，目前很多所謂的雙核瀏覽器，實質就是chrome+IE的雙核。基於HTML5的支持，以及v8引擎的效率，在軟
件中嵌入chromium是個不錯的選擇，而且目前市面上應用及其廣泛，如：tx系軟件。spy++一抓就知道了，如下圖
二.cef下載
http://opensource.spotify.com/cefbuilds/index.html下載速度是不快，但總算下載下來了，由於本人是vs2013，遇到的坑就是3.3以上的版本至少要vs2015以上才
能編譯，總之搞了很久最后下了一個3.27版本才成功，提示：如果不打算放棄32位就建議下載32位版本吧，不然64位軟件在32位系統是跑不起來的。
由於新下載的標准開發包解壓就是如下圖了，
文件目錄結構在此做下說明，很是重要。筆者在此花費了很多時間。
1.首先建議先閱讀Readme.txt，該文件對項目結構做了簡要說明。當然看一遍肯定不可能完全理解。但隨着對項目的熟悉了解，
發現該文件說的還是挺清晰的。
2.licence.txt沒啥說的，就是關於版權的說明。
幾個gyp/gypi文件是不能手動修改的，是GYP（Generate Your Projects）工具自動生成的相當於工程配置文件。插入一段GYP說明：
GYP結構
GYP的輸入是.gyp和.gypi文件，.gypi文件是用於.gyp文件include使用的。.gyp文件就是符合特定格式的json文件。
gyp文件中包含target，Visual C++下，gyp生成sln，target生成vcproj或vxcproj。
chromium中GYP結構是，通過命令行統一使用build/common.gypi的公共文件，工程的配置，選項的處理，編譯選項的使用，都是在這個文件中配置。
生成一個總工程all.gyp，這個工程依賴於其他所有的工程，這個工程生成，所有工程都生成完成。而且有一個總工程也方便開發。
如果要使用GYP，建議依照chromium的結構，common.gypi也用chromium的進行裁剪，畢竟各種選項的選擇也是需要經驗的。
使用GYP
chromium工程中的方法是使用build/gyp_chromium這個Python腳本來調用，這個腳本實現添加公共配置，偵測附加配置，添加需要的編譯選項。
3.然后就是介紹CMakeList.txt文件了，該文件非常重要。這里要引入CMake的一些知識，下載地址：
CMake下載地址
CMake是一個跨平台的安裝（編譯）工具，可以用簡單的語句來描述所有平台的安裝(目前很多開源跨平台庫都使用此方式如：ProtoBuf，cef)。
CMake腳本本文不做介紹，由於當前用的win平台所以直接下載免安裝版解壓運行cmake-gui.exe,（說句廢話，這是一個qt程序，
跨平台還是選擇了qt，呵呵）。
需要注意的就是源代碼目錄和生成工程文件的目錄了，configue沒錯誤就Generate生成相應vs版本工程文件，然后OpenProject，
正常情況就是所有的項目（包括庫和測試程序）都包含在這個工程中。
libcef_dll_wrapper會生成一個庫，cefclient和cefsimple則會生成測試程序，對應下面兩張圖。
4.文件夾介紹
（1）cmake，該文件夾包含Cmake的一些宏定義，配置信息。
（2）include，使用該庫的所有頭文件
（3）libcef_dll，庫的源代碼
（4）tests，測試程序demo源代碼
（5）Resource,資源文件
該資源文件是程序運行需要依賴的資源文件，含語言包，unicode支持等
（6）Debug/Release，程序依賴的動態庫/靜態庫。但不包括C++庫：libcef_dll_wrapper.lib。
1、必須文件，缺少任意一個CEF將無法運行：
libcef.dll
這個不用多說，CEF的核心庫文件，js引擎、網頁加載渲染邏輯等都在其中，也是size最大的一個文件（Release版將近50M，Debug版超過500M）。
icudtl.dat
用來支持unicode，缺少這些文件雖然編譯能通過，但是執行CefInitialize();的時候就會崩潰，在這個坑趴了很久還以為是代碼問題。
natives_blob.bin
snapshot_blob.bin
V8引擎快照數據。
2、可選文件：
locales/
該目錄包含CEF，Chromium和Blink使用的本地化資源。 CefSettings.locale指定需要加載的.pak文件。 只需要發布配置的區域對應的.pak文件。
如果沒有區域設置將配置默認語言環境“en-US”。如果沒有這些文件任意Web組件可能顯示不正確。
cef.pak
cef_100_percent.pak
cef_200_percent.pak
這些文件包含了供CEF使用的區域無關資源，缺少這些文件任意Web組件可能顯示不正確。（筆者當時缺少cef_100_percent.pak，
cef_200_percent.pak兩文件，導致視頻控件不顯示音量和最大化按鈕）。
cef_extensions.pak
此文件包含擴展加載所需的非本地化資源傳遞`--disable-extensions`命令行標志來禁止使用文件。沒有這個文件，依賴於擴展系統的組件將不起作用，
如PDF查看器。
devtools_resources.pak
此文件包含Chrome開發者工具所需的非本地化資源，缺少這個文件，Chrome開發者工具將無法運行。
d3dcompiler_43.dll (Windows XP需要該文件)
d3dcompiler_47.dll (Windows Vista和更高版本的系統需要該文件)
libEGL.dll
libGLESv2.dll
Direct3D支持文件，如果缺少這些文件，HTML5在渲染2D畫布，3D CSS，WebGL時將不起作用。
wow_helper.exe
用來支持Windows Vista 64位沙箱。如果沒有這個文件，32位的CEF將無法在開啟了沙箱的64位的Vista機器上運行。
英文原文
附MFC使用CEF3簡單Demo代碼
BOOL CMFCDlgCefTestDlg::OnInitDialog()
{
CDialogEx::OnInitDialog();
// TODO: 在此添加額外的初始化代碼
CefRefPtr<CSimpleClient> client(new CSimpleClient());
m_simpleClient = client;
CefSettings settings;
CefSettingsTraits::init(&settings);
settings.multi_threaded_message_loop = true;
CefMainArgs mainArgs;
CefRefPtr<CefApp> cefApp;
CefInitialize(mainArgs, settings, cefApp, NULL);
RECT rect;
GetClientRect(&rect);
RECT rectnew = rect;
CefWindowInfo winInfo;
winInfo.SetAsChild(GetSafeHwnd(), rectnew);
CefBrowserSettings browserSettings;
CefBrowserHost::CreateBrowser(winInfo, client, _T("http://www.lofter.com"), browserSettings, NULL);
return TRUE; // 除非將焦點設置到控件，否則返回 TRUE
}
void CMFCDlgCefTestDlg::OnClose()
{
// TODO: 在此添加消息處理程序代碼和/或調用默認值
m_simpleClient->Release();
CefShutdown();//其實這行代碼如果沒有設置cefApp的話，是會崩潰的，測試完全可以注釋。但切記，該函數只能在主線程中調用。后續深入學習后，還需解一下惑
CDialogEx::OnClose();
}
推薦一個不錯的文檔地址：
github文檔
csdn下載
————————————————
版權聲明：本文為CSDN博主「evil_119」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/evil_119/article/details/78751310
CEF的完整DEMO工程中，cefclient還需要GTK。
這不是必須的，后續我們會講到SDL2配合CEF做透明效果，因此我們就只需要cefsimple能夠正常運行，就算OK了。
cmake -f CMakeLists.txt
make cefsimple
1
2
編譯結果在 tests/cefsimple/Release 目錄下。
將前面提到的NSPR和NSS一起放到該目錄下，即可正常運行。
#!/bin/bash
export LD_LIBRARY_PATH=.
export DISPLAY=0:0
./cefsimple --no-sandbox --url="file:/etc/elink.d/splash/splash.html"
1
2
3
4
備注：
常用參數
關閉GPU使用
--disable-gpu --disable-gpu-compositing
1
單進程
--single-process
1
關閉沙盒
--no-sandbox
1
如果單進程模式，強烈建議開啟，否則Render層日志無法輸出
開啟離屏渲染(OSR)
--transparent-painting-enabled --off-screen-rendering-enabled
1
同時，初始化的時候，按照推薦需要進行如下配置
CefSettings settings;
settings.windowless_rendering_enabled = true;
……
CefInitialize(main_args, settings, app.get(), NULL);
1
2
3
4
創建窗口（CreateBrowser）時，需要指定說明是OSR模式
CefWindowInfo window_info;
window_info.width = 1920;
window_info.height = 1080;
window_info.SetAsWindowless(0);
// Create the first browser window.
CefBrowserHost::CreateBrowser(window_info, handler, url, browser_settings,
NULL);
1
2
3
4
5
6
7
8
遠程調試
--remote-debugging-port=50000
1
如上則表示開啟的是 http://127.0.0.1:50000的遠程調試，網頁中打開即可
默認監聽本地回環，需要遠程可以自己起一個端口轉發，按需打開
新版本（69）發現多了可以遠程直接鍵盤界面控制的功能（需要鼠標懸停在界面窗口），很方便
日志
--log-severity=info --log-file=cef.log
1
可以使用如下的方法達到日志分文件的目的
\cp cef.log cef_$(date +%Y%m%d%H%M%S).log
cat /dev/null > cef.log
1
2
常見問題
流媒體支持
H5中很重要的特性。因為授權問題，所以默認是不支持H264文件播放的，除非自己重新編譯整個CEF。簡單的解決辦法就是使用VP8，有很多H264轉webm的工具，比方說這個Miro Video Convertor
OSR性能問題
很遺憾的測試發現，使用硬件加速時，OSR顯示效果相對較差，明顯的感覺不流暢、閃屏，特別是跑馬燈marquee標簽的展現效果，反而是使用軟繪制效果還差強人意；懷疑是因為GPU->CPU的搬運引起的。
此外，必須要根據onPaint返回的dirtyRect進行區域繪制，否則繪制效率非常低下。
SDL2如果使用硬件加速繪制1080P的顯示區域，那么周期一般在20ms以內，如果使用軟繪制，那么平均在30+ms；也就是建議幀率在30幀（系統默認值），不建議設置成60幀。如果分辨率到達4K，那么硬軟繪制的差距將肉眼可見。
當然，效果最好的還是不使用OSR，直接硬加速繪制，但是我們需要部分透明/半透明效果顯示下層的視頻層，目前來看也就OSR這一條路了。
使用QT的QWebEngineView可以到達全程硬加速+透明，效果較好。但是我們的部分機型由於其他圖形計算，GPU已經使用吃緊，需要純軟繪制，沒有找到完全關閉GPU使用繪制的開關，因此沒法使用。（disable-gpu-compositing參數有效，disable-gpu 無效）
注：我們使用Qt5.7配套的QWebEngineView，發現長時間運行存在內存泄露問題，以及子進程被OOM后父進程未重新拉取的問題，因此建議慎用。
————————————————
版權聲明：本文為CSDN博主「無邊風月-風之羽翼」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/gogoytgo/article/details/82997376