NXP iMX8基于嵌入式Linux部署网络浏览器

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系统下测试网络浏览器部署。