嵌入式Linux基于QML开发QtMultimedia应用

‍

1). 简介

使用QML语言进行QT应用程序开发可以将界面开发和逻辑控制分开，提高应用的开发周期和灵活性；另外对于多媒体应用非常重要的一点是，基于QML/QT Quick 的应用程序可以直接调用GPU进行加速，这大大提高了多媒体应用在嵌入式系统环境下的处理效率和资源占用，因此本文就基于QML和QT Multimedia组件介绍多媒体应用开发。

本文所演示的平台来自于Toradex Apalis iMX6 ARM嵌入式平台，这是一个基于NXP iMX6ARM处理器，支持双核/四核Cortex-A9。

2). 准备

a). ApalisiMX6 ARM核心版配合Ixora载板，连接调试串口UART1到开发主机方便调试。

b). Apalis iMX6系统使用基于OpenEmbedded框架重新编译的集成Qt5.9支持的ToradexLinux image release V2.8b2 版本以及对应的SDK。可以结合这里的说明自行编译，需要修改的local.conf 文件如下，image更新方法请参考这里。

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

IMAGE_INSTALL_append = "gstreamer1.0-plugins-bad-* gstreamer1.0-plugins-ugly-* gstreamer1.0-libav"

PACKAGECONFIG_append_pn-qtmultimedia =" gstreamer"

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

c). 关于开发主机SDK安装和Qt creator开发环境的配置请参考这里。

d). 演示程序使用的LCD为10inch 18bitLVDS屏幕，请参考这里修改配置uboot显示分辨率。

e). 如果需要，可以打开QT debuglogging

./ 打开所有 debug logging

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

$ export QT_LOGGING_RULES=*.debug=true

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

./ 打开 multimedia 相关debuglogging

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

$ export QT_LOGGING_RULES=*.debug=true

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

f). 本文演示应用程序分为两个部分，对应为两个页面；应用启动后默认页面为视频播放（Video Player）页面，通过点击按钮可以切换为摄像头捕获页面（Camera Capture）页面。下面就逐一进行一些说明。

3). QT演示程序开发 – Video Player

a). 源代码和运行效果如下：

./ 代码

main.qml - https://github.com/simonqin09/QtQMLMultimedia/blob/master/main.qml

main.cpp - https://github.com/simonqin09/QtQMLMultimedia/blob/master/main.cpp

b). 具体要点说明如下

./ 由于QT Multimedia组件在底层也是调用GstreamerPlaybin元件进行媒体播放操作，因此在编程之前，首先可以直接使用Gstreamer pipeline在嵌入式系统先验证下，确保媒体可以正常播放，没有解码器缺失的情况。

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

$ gst-launch-1.0 playbin uri=file:///home/root/ready-player-one-trailer-2_h720p.mov

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

./ main.cpp 文件用于识别输入变量并通过下面代码将其传递给QML来指定媒体文件位置。

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

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("mysource",source);

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

./ main.qml 文件用于实现video player界面以及媒体播放。

-         媒体播放主要由 ”Mediaplayer”元素和 ”VideoOutput” 元素来配合实现。然后将其显示在定义好的640x480分辨率的rectangle中。

-         定义了一些控制播放和音量的按键，当点击时候会有颜色的变化指示。

-         使用了 Connections 用于信号触发操作，这里对应为当发现媒体播放停止的时候自动将 Play 按键的颜色变更为初始状态。

-         在页面切换按键处，使用了loader功能来加载 Camera Capture 页面，需要注意的是同时也需要在main.qml 中创建一个 CameraMode.qml 的实例以便于操作。

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

   CameraMode {

              id: cameramode1

              anchors.fill: parent

              z: 1

          }

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

4). QT演示程序开发 – Camera Capture

a). 源代码和运行效果如下：

./ 代码

CameraMode.qml - https://github.com/simonqin09/QtQMLMultimedia/blob/master/CameraMode.qml

b). 具体要点说明如下

./ QML文件首先通过Item和Component组合，并通过定义函数show 来加载Component 也就是Camera Capture主页面。这里为了控制CameraMode.qml不在程序一启动就自动加载，增加了一个从main.qml传递过来的变量 camera_mode_visible。

./ 摄像头的capture功能由 Camera 元素和Videooutput 元素配合实现，同样将camera capture画面显示到预定义好的 640x480 分辨率的 rectangle 中。

./ 使用 ListView 来显示目前系统所连接的所有可用camera id，当点击时候实现camera id的切换以及重点显示。

./ 定义了 start 和 stop 按键，用于开始和停止所选定camera id的图像捕获。

./ 定义截图按键，通过 Camera 元素里面的 imageCapture属性实现将所保存的图片显示在图像捕获窗口的下方区域。

./ 定义了 pagedestroy 函数，用于从当前页面返回video player 页面。

5). 程序部署配置

a). 将编译好的可执行程序 “videotest”和所需要的视频文件“ready-player-one-trailer-2_h720p.mov” 复制到ApalisiMX6模块“/home/root” 目录下。

b). 配置程序开机自启动

./ 修改 /usr/bin/x-window-manager文件为如下

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

RET=1

while [ $RET -ne 0 ]; do

       cd/home/root

      /home/root/videotest -urlfile:///home/root/ready-player-one-trailer-2_h720p.mov

      RET=$?

done

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

6). 程序运行演示

a). 开机后，系统自动启动程序，如下所示

./ video player

‍‍‍‍  

./ camera capture

系统上面一共连接了两个摄像头，第一个目前正在cpature的是MIPI CSI OV5640 摄像头模块，第二个是一个Logitech 720P USB 摄像头。

b). CPU占用率，通过 top 命令查看

./ video player 播放视频状态，约为20% 左右。

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

PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND                                                                          

640 root      20   0  384796  45628  34032 S  19.8  4.4   2:15.30 videotest                                                                        

554 root     19  -1  174652  12404   8684 S   3.3  1.2   0:20.38 Xorg                                                                            

678 root     20   0    4796   2352   1920 R   1.2  0.2  0:00.19 top

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

./ camera capture 开始捕获图像状态，约为21% 左右。

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

 PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND                                                                          

640 root      20   0  435508  45092  34012 S  21.6  4.4   1:46.03 videotest                                                                        

554 root     19  -1  174652  12404   8684 S   3.3  1.2   0:16.26 Xorg                                                                            

676 root     20   0    4796   2368   1936 R   1.5  0.2  0:01.80 top

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

6). 总结

本文基于NXP iMX6嵌入式平台在嵌入式linux系统下测试基于QML和QT Multimedia的多媒体应用，通过代码说明和程序运行结果可见，QML和QT multimedia的结合确实可以快速高效的构建一个界面化的多媒体应用，同时得益于QML的GPU加速以及针对NXP iMX系列的对应加速优化，其执行效率也非常之高。当然，在进行开发过程中也发现了一些问题，比如不够灵活，不能像直接使用Gstreamer框架一样自行定义pipeline元件，另外QML和C++的配合也需要一些学习和经验才能灵活掌握，因此具体采用哪种方式还是要根据实际需要来决定。