标签: qtwebengine

By Toradex 秦海 1). 简介 随着嵌入式设备的发展，网络通信在应用中越来越广泛，而在客户端，就需要可以方便访问网络服务的浏览器配置，本文就基于 NXP iMX8 平台演示如何在嵌入式 Linux BSP 中集成网络浏览器，包括 Chromium 浏览器和基于 Qtwebenine 的示例浏览器 quicknanobrowser 。 本文所演示的平台来自于 Toradex Apalis iMX8 ARM 嵌入式平台，这是一个基于 NXP iMX8QM ARM 处理器，支持 Cortex-A72+A53 和 Coretex-M4 架构的计算机模块平台。 2. 准备 a).Apalis iMX8QM4GB WB IT ARM 核心版配合 Ioxra 载板 ，连接调试串口 UART1 （载板 X22 ）到开发主机方便调试。 b). 载板连接 HDMI 显示器和网络用于显示和联网， USB 鼠标键盘用于操作浏览器。 3). Apalis iMX8 Ycoto Linux 编译部署以及配置 a). Apalis iMX8 Ycoto Linux 通过 Ycoto/Openembedded 框架编译，具体的配置方法请参考 这里 ，参考如下修改后编译 Reference-Multimedia image 镜像 ./ iMX8 Ycoto layer 中默认没有包含浏览器的相关 layer ，因此首先需要通过下面修改添加相关 layer ------------------------------- ### add mata-browser $ git clone https://github.com/OSSystems/meta-browser.git ### add meta-clang $ git clone -b dunfell https://github.com/kraj/meta-clang.git ### add meta-python2 $ git clone -b dunfell https://github.com/YoeDistro/meta-python2.git ### modify build/conf/bblayer.conf to add above extra layers --- a/build/conf/bblayers.conf +++ b/build/conf/bblayers.conf @@ -24,6 +24,9 @@ ${TOPDIR}/../layers/meta-openembedded/meta-python \ ${TOPDIR}/../layers/meta-freescale-distro \ ${TOPDIR}/../layers/meta-toradex-demos \ + ${TOPDIR}/../layers/meta-python2 \ + ${TOPDIR}/../layers/meta-clang \ + ${TOPDIR}/../layers/meta-browser \ ${TOPDIR}/../layers/meta-qt5 \ \ \ ------------------------------- ./ 修改 local.conf ，增加 chromium 和 qtwebengine 支持 ------------------------------- +IMAGE_INSTALL_append = " chromium-ozone-wayland qtwebengine qtwebengine-dev" +ACCEPT_FSL_EULA = "1" ------------------------------- ./ 修改 image 和 Qt5 SDK 文件 ------------------------------- // tdx-reference-multimedia-image.bb 文件，增加 Qt5 SDK 和中文字体支持 --- a/layers/meta-toradex-demos/recipes-images/images/tdx-reference-multimedia-image.bb +++ b/layers/meta-toradex-demos/recipes-images/images/tdx-reference-multimedia-image.bb @@ -3,6 +3,8 @@ SUMMARY = "Toradex Embedded Linux Reference Multimedia Image" DESCRIPTION = "Image for BSP verification with QT and multimedia features" +inherit populate_sdk_qt5 + #Prefix to the resulting deployable tarball name export IMAGE_BASENAME = "Reference-Multimedia-Image" @@ -14,6 +16,9 @@ '', d), d)} \ " +# add chinese fonts +FONT_CHINESE = "ttf-droid-sans ttf-droid-sans-fallback ttf-droid-sans-mono ttf-droid-serif freetype" + APP_LAUNCH_WAYLAND ?= "wayland-qtdemo-launch-cinematicexperience" APP_LAUNCH_X11 ?= "x-window-qtcinematicexperience" @@ -33,6 +38,8 @@ packagegroup-tdx-graphical \ packagegroup-tdx-qt5 \ \ + ${FONT_CHINESE} \ + \ bash \ coreutils \ less \ // tdx-reference-minimal-image.bb 文件，增加中文语言支持 ### modify layers/meta-toradex-demos/recipes-images/images/tdx-reference-minimal-image.bb #IMAGE_LINGUAS = "en-us" # add chinese font support IMAGE_LINGUAS = "en-us zh-cn" // packagegroup-qt5-toolchain-target.bb 文件，增加 Qt5 SDK qtwebengine 支持 --- a/layers/meta-qt5/recipes-qt/packagegroups/packagegroup-qt5-toolchain-target.bb +++ b/layers/meta-qt5/recipes-qt/packagegroups/packagegroup-qt5-toolchain-target.bb @@ -93,6 +93,9 @@ qtwebchannel-dev \ qtwebchannel-mkspecs \ ${@bb.utils.contains('DISTRO_FEATURES', 'opengl', 'qtwebchannel-qmlplugins', '', d)} \ + qtwebengine-dev \ + qtwebengine-mkspecs \ + ${@bb.utils.contains('DISTRO_FEATURES', 'opengl', 'qtwebengine-qmlplugins', '', d)} \ qtxmlpatterns-dev \ qtxmlpatterns-mkspecs \ qttranslations-qtxmlpatterns \ ------------------------------- ./ 编译 image 和 SDK ------------------------------- # compile Reference-Multimedia image $ bitbake bitbake tdx-reference-multimedia-image # compile SDK bitbake tdx-reference-multimedia-image -c populate_sdk ------------------------------- b). Ycoto Linux image 部署 参考 这里 通过 Toradex Easy installer 将上面编译好的 image 更新部署到模块，版本为目前最新的 Ycoto Linux V5.1 c). 显示配置 ./ HDMI 默认即可正常显示，如果有显示器 EDID 读取问题不能成功显示，可以通过下面方法通过软件 firmware 方式手动加载 EDID ，更多关于显示的配置请参考 这里 ------------------------------- # cp EDID binary file to rootfs $ mkdir /lib/firmware/edid $ cp 1920x1080.bin /lib/firmware/edid # set uboot kernel command line # setenv defargs ‘pci=nomsi drm.edid_firmware=HDMI-A-1:edid/1920x1080.bin’ # saveenv && reset ------------------------------- d). Qt5 SDK 安装配置 请参考 这里 的说明安装上面编译好的 SDK ，以及配置 Qtcreator 交叉编译环境 4). Chromium 浏览器应用测试 a). 通过下面命令启动 chromium 应用，添加 ”--in-process-gpu” 参数使应用可以在 wayland 环境下正常运行 ------------------------------- root@apalis-imx8:~# chromium --no-sandbox --in-process-gpu ------------------------------- b). 运行效果如下图，可见中文也可以正常显示 c). 当 chromium 运行时查看了下 CPU 占用率，大概是在 40% - 180% 这个区间动态变化， iMX8 包含 6 个 Cortex-A CPU 核心，因此最多可以到 600% 的使用率。 5). QT Webengine 示例浏览器 quicknanobrowser 测试 Quick Nano Brower 示例程序是 Qt5 自带的 Webengine 示例程序，这是一个基于 Qt Quick 和 Webengine 开发的精简浏览器示例，本文使用版本为和 Qt library 匹配的 5.14.2 版本。 a). 使用上面配置好交叉编译环境进行编译，将编译生成的可执行文件 quicknanobrower 复制到 Apalis iMX8 模块 “/home/root” 目录下 b). 配置简单测试启动脚本 ./ test.sh ，程序启动脚本文件 --------------------------------------------------- !/bin/sh export QT_QPA_PLATFORM=wayland-egl /home/root/quicknanobrowser --no-sandbox & --------------------------------------------------- c). 运行 quicknanobrowser 应用 --------------------------------------------------- $ /home/root/test.sh --------------------------------------------------- d). 运行效果如下图，中文也可以正常显示 c). 当 chromium 运行时查看了下 CPU 占用率，大概是在 50% - 200% 这个区间动态变化。 6). 总结 本文基于 NXP iMX8 嵌入式平台在嵌入式 linux 系统下测试网络浏览器部署。