NXP iMX8基于嵌入式Linux部署網(wǎng)絡(luò)瀏覽器

By Toradex秦海

1). 簡介

隨著嵌入式設(shè)備的發(fā)展，網(wǎng)絡(luò)通信在應(yīng)用中越來越廣泛，而在客戶端，就需要可以方便訪問網(wǎng)絡(luò)服務(wù)的瀏覽器配置，本文就基于NXP iMX8平臺演示如何在嵌入式Linux BSP中集成網(wǎng)絡(luò)瀏覽器，包括Chromium瀏覽器和基于Qtwebenine的示例瀏覽器quicknanobrowser。

本文所演示的平臺來自于Toradex Apalis iMX8 ARM嵌入式平臺，這是一個基于NXP iMX8QM ARM處理器，支持Cortex-A72+A53和Coretex-M4架構(gòu)的計算機模塊平臺。

2. 準備

a). Apalis iMX8QM 4GB WB IT ARM核心版配合Ioxra 載板，連接調(diào)試串口UART1（載板X22）到開發(fā)主機方便調(diào)試。

b). 載板連接HDMI顯示器和網(wǎng)絡(luò)用于顯示和聯(lián)網(wǎng)，USB鼠標鍵盤用于操作瀏覽器。

3). Apalis iMX8 Ycoto Linux 編譯部署以及配置

a). Apalis iMX8 Ycoto Linux 通過Ycoto/Openembedded 框架編譯，具體的配置方法請參考這里，參考如下修改后編譯Reference-Multimedia image鏡像

./ iMX8 Ycoto layer 中默認沒有包含瀏覽器的相關(guān)layer，因此首先需要通過下面修改添加相關(guān)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，更多關(guān)于顯示的配置請參考這里

-------------------------------

# 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交叉編譯環(huán)境

4). Chromium 瀏覽器應(yīng)用測試

a). 通過下面命令啟動chromium 應(yīng)用，添加 ”--in-process-gpu” 參數(shù)使應(yīng)用可以在wayland環(huán)境下正常運行

-------------------------------

root@apalis-imx8:~# chromium --no-sandbox --in-process-gpu

-------------------------------

b). 運行效果如下圖，可見中文也可以正常顯示

c). 當chromium運行時查看了下CPU占用率，大概是在40% - 180% 這個區(qū)間動態(tài)變化，iMX8包含6個Cortex-A CPU核心，因此最多可以到600%的使用率。

5). QT Webengine 示例瀏覽器quicknanobrowser測試

Quick Nano Brower 示例程序是Qt5自帶的 Webengine示例程序，這是一個基于Qt Quick和 Webengine開發(fā)的精簡瀏覽器示例，本文使用版本為和Qt library匹配的5.14.2版本。

a). 使用上面配置好交叉編譯環(huán)境進行編譯，將編譯生成的可執(zhí)行文件 quicknanobrower 復制到Apalis iMX8模塊 “/home/root” 目錄下

b). 配置簡單測試啟動腳本

./ test.sh，程序啟動腳本文件

---------------------------------------------------

!/bin/sh

export QT_QPA_PLATFORM=wayland-egl

/home/root/quicknanobrowser --no-sandbox &

---------------------------------------------------

c). 運行quicknanobrowser應(yīng)用

---------------------------------------------------

$ /home/root/test.sh

---------------------------------------------------

d). 運行效果如下圖，中文也可以正常顯示

c). 當chromium運行時查看了下CPU占用率，大概是在50% - 200% 這個區(qū)間動態(tài)變化。

6). 總結(jié)

本文基于NXP iMX8嵌入式平臺在嵌入式linux系統(tǒng)下測試網(wǎng)絡(luò)瀏覽器部署。