1. 前言

CEF 官方提供了Ubuntu的编译认证,对于CentOS没有特别说明。
基于最新的二进制编译结果进行编译集成,测试没啥问题,特此记录

1.事先准备

发行版镜像YUM源

CEF最新版本

nss最新版本

===
*有童鞋和我反馈最新的nss不能按这样取巧了,有其他的报错,所以上传了配套验证过的版本
(其中CEF升级到了73.1.1373.0.3683.75,即Chrome 73版本)
下载地址

本次实验对应的版本:

cef_binary_3.3497.1834.g0a87d5f_linux64.tar(本次实验对应的Chrome 69版本)
nss-3.39-with-nspr-4.20.tar.gz

2.准备补齐依赖

照例是缺什么补什么
除了X11标准的运行和DEVEL库要安装
这两个比较冷门的(当然开发环境下对应的devel也需要)也需要安装

libXScrnSaver-1.2.2-6.1.el7.x86_64.rpm
atk-2.14.0-1.el7.x86_64.rpm

如果有没列举到而且导致到时候编译不过的,可以用repoquery查找依赖库

#安装repoquery
yum install yum-utils
#举个例子
repoquery --whatprovides libXss.so.1

3.编译nss和nspr

理论上你拿NSS3.22就可以编译通过,但实际上有很多JS效果,需要NSS3.26以上才能支撑;版本不足会崩溃。因此推荐下载最新版本编译安装

按照官方的说法,你编译NSS需要准备gyp和ninja,甚为麻烦。这里给个投机取巧的办法

先编译NSPR

cd nspr
./configure --enable-64bit --prefix=/usr
make && make install
#要覆盖原有的lib64下的文件
cd dist/lib
cp * /usr/lib64/
cd ..

然后修改 nss/coreconf/Linux.mk,找到这行

OS_CFLAGS               = $(DSO_CFLAGS) $(OS_REL_CFLAGS) $(ARCHFLAG) -pipe -ffunction-sections -fdata-sections -DHAVE_STRERROR 

改成

OS_CFLAGS               = $(DSO_CFLAGS) $(OS_REL_CFLAGS) $(ARCHFLAG) -pipe -ffunction-sections -fdata-sections -DHAVE_STRERROR -I/usr/include/nspr

然后就可以愉快的编译了

cd nss
make USE_64=1
make USE_64=1 install
# 复制相关编译结果到系统目录下,方便部署
cd ..
cd dist/Linux3.10_x86_64_cc_glibc_PTH_64_DBG.OBJ
cd lib
\cp -f * /lib64
cd ..
cd bin
\cp -f * /usr/bin/
cd ..

#由于这里面搭载的sqlite版本较低,因此要复原sqlite
yum reinstall sqlite

运行环境中,如果不想动系统库,可以把NSPR和NSS编译结果中的SO放到运行目录下。

4.编译CEF

CEF的完整DEMO工程中,cefclient还需要GTK。
这不是必须的,后续我们会讲到SDL2配合CEF做透明效果,因此我们就只需要cefsimple能够正常运行,就算OK了。

cmake -f CMakeLists.txt
make cefsimple

编译结果在 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. 常用参数

    1. 关闭GPU使用

      --disable-gpu  --disable-gpu-compositing
      
    2. 单进程

      --single-process
      
    3. 关闭沙盒

      --no-sandbox
      

      如果单进程模式,强烈建议开启,否则Render层日志无法输出

    4. 开启离屏渲染(OSR)

      --transparent-painting-enabled --off-screen-rendering-enabled
      

      同时,初始化的时候,按照推荐需要进行如下配置

        CefSettings settings;
        settings.windowless_rendering_enabled = true;
        ……
        CefInitialize(main_args, settings, app.get(), NULL);
      

      创建窗口(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);
      
    5. 远程调试

      --remote-debugging-port=50000
      

      如上则表示开启的是 http://127.0.0.1:50000的远程调试,网页中打开即可
      默认监听本地回环,需要远程可以自己起一个端口转发,按需打开
      新版本(69)发现多了可以远程直接键盘界面控制的功能(需要鼠标悬停在界面窗口),很方便

    6. 日志

      --log-severity=info --log-file=cef.log
      

      可以使用如下的方法达到日志分文件的目的

      \cp cef.log cef_$(date +%Y%m%d%H%M%S).log
      cat /dev/null > cef.log 
      
  2. 常见问题

    1. 流媒体支持
      H5中很重要的特性。因为授权问题,所以默认是不支持H264文件播放的,除非自己重新编译整个CEF。简单的解决办法就是使用VP8,有很多H264转webm的工具,比方说这个Miro Video Convertor

    2. 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后父进程未重新拉取的问题,因此建议慎用。

*我的这些结论都是基于性能较差的CPU(Intel® Celeron® CPU J3160 @ 1.60GHz)得出的。
如果你是桌面CPU,估计多半没事;在Win上,CEF OSR + SDL2 效果非常好;而且由于视频层的渲染效率SDL2 over D3D 远远高于PPAPI over OpenGLES2,可以最大程度的使用GPU而非CPU。

Logo

更多推荐