Linux平台CEF离屏渲染

一、简介

Chromium 嵌入式框架 (CEF)。是一个简单的框架，用于将基于 Chromium 的浏览器嵌入到其他应用程序中。

CEF 支持广泛的编程语言和操作系统，并且可以轻松集成到新的和现有的应用程序中。它的设计从一开始就兼顾了性能和易用性。基本框架包括通过本机库公开的 C 和 C++ 编程接口，这些库将主机应用程序与 Chromium 和 Blink 实现细节隔离开来。它提供了浏览器和主机应用程序之间的紧密集成，包括对自定义插件、协议、JavaScript 对象和 JavaScript 扩展的支持。主机应用程序可以选择控制资源加载、导航、上下文菜单、打印等，同时利用与 Google Chrome Web 浏览器相同的性能和 HTML5 技术。

离屏渲染(Off-Screen Rendering)。在离屏渲染模式下，CEF不会创建原生浏览器窗口。CEF为宿主程序提供无效的区域和像素缓存区，而宿主程序负责通知鼠标键盘以及焦点事件给CEF。离屏渲染目前不支持混合加速，所以性能上可能无法和非离屏渲染相比。

官网：Bitbucket

二、CEF Demo编译及运行

1、构建一个docker ubuntu:20.04基础镜像。也可以直接用ubuntu:20.04实体机，或者ubuntu:20.04虚拟机，也可以用windows子系统(wsl)中的ubuntu:20.04，不过需要额外的启动参数"no-zygote"。

docker run -it ubuntu:20.04
apt update

2、安装linux图形界面。如果系统为ubuntu-desktop，则此步骤跳过。

apt install xorg

3、安装linux虚拟屏幕。如果系统为ubuntu-desktop，则此步骤跳过。

apt-get install xvfb

4、安装cef编译依赖

apt-get install build-essential libgtk-3-dev libx11-dev

5、安装cmake最新版本。由于cef编译要求的cmake最低版本是3.19，而通过系统包管理器apt下载的cmake版本不能满足要求，所以得从cmake官网中下载。

cmake官网下载：Download | CMake

./cmake-3.22.1-linux-x86_64.sh --prefix=/usr/ --skip-license

6、cef demo下载及编译

下载地址：CEF Automated Builds

tar -xjf cef_binary_96.0.18+gfe551e4+chromium-96.0.4664.110_linux64.tar.bz2

cd cef_binary_96.0.18+gfe551e4+chromium-96.0.4664.110_linux64

mkdir build

cd build

cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE=Debug ..

make -j4 cefsimple

7、cef demo运行

cd /root/cef_binary_96.0.18+gfe551e4+chromium-96.0.4664.110_linux64/build/tests/cefsimple/Debug

#系统为ubuntu-server时，在虚拟屏幕中运行
xvfb-run ./cefsimple

#系统为ubuntu-desktop时，直接运行
 ./cefsimple

三、CEF离屏渲染开发

CEF离屏渲染可以基于官方提供的cefsimple源码进行开发，主要修改的地方有：

1、应用初始化时设置windowless模式

1 2	CefSettings settings; settings.windowless_rendering_enabled = true;

2、SimpleApp初始化时设置离屏渲染最大帧率，实际回调输出的帧率会根据网页内容的不同而不同，静态网页帧率低，动态网页帧率高

1 2	CefBrowserSettings browser_settings; browser_settings.windowless_frame_rate = 30;

3、SimpleHandler类需要增加一个继承的父类CefRenderHandler，并重写两个接口：

GetViewRect：获取浏览器的展示区域；

OnPaint：获取一帧图片的ARGB数据存放在buffer指针指向内存中，width和height是这张图片的宽和高；

1 2 3 4 5 6 7 8 9

// CefRenderHandler methods virtual void GetViewRect(CefRefPtr<CefBrowser> browser, CefRect& rect) override; virtual void OnPaint(CefRefPtr<CefBrowser> browser, CefRenderHandler::PaintElementType type, const CefRenderHandler::RectList& dirtyRects, const void* buffer, int width, int height) override;

四、参考资料

1、linux CEF 离屏渲染详解

2、Qt+Cef3离屏渲染

3、Chromium内核 CEF3

4、通过VNC搭建Ubuntu 18.04和20.04图形界面