内容表

上一话题

Spectrum Example

下一话题

QML 视频着色器效果范例

QML 视频范例

Transforming video and camera viewfinder content.

QML Video demonstrates the various transformations (move; resize; rotate; change aspect ratio) that can be applied to QML VideoOutput and Camera 类型。

It also shows how native code can be combined with QML to implement more advanced functionality - in this case, C++ code is used to calculate the QML frame rate. This value is rendered in QML in a semi-transparent item overlaid on the video content.

The following image shows the application executing the video-overlay scene, which creates a dummy overlay item (just a semi-transparent Rectangle ), which moves across the VideoOutput 项。

../_images/qmlvideo-overlay.jpg

运行范例

要运行范例从 Qt Creator ,打开 欢迎 模式,然后选择范例从 范例 . For more information, visit Building and Running an Example.

应用程序结构

main.qml file creates a UI which includes the following items:

  • Two Button instances, each of which displays a filename, and can be used to launch a FileBrowser .

  • An exit Button .

  • A SceneSelectionPanel , which is a flickable list displaying the available scenes.

  • At the lower left, an item which displays the QML repainting rate - the upper number is the instantaneous frame rate and the lower number is the average over the past second.

../_images/qmlvideo-menu.jpg

Each scene in the flickable list is implemented in its own QML file - for example the video-basic scene (which just displays a static VideoOutput in the center of the screen) is implemented in the VideoBasic.qml file. As you can see from the code, this makes use of a type of inheritance; a VideoBasic item …

… is of type SceneBasic

...
											
...
											

… which itself is a Scene :

...
											
...
											

SceneBasic describes the structure and behavior of the scene, but is agnostic of the type of content which will be displayed - this is abstracted by 内容 .

This pattern allows us to define a particular use case (in this case, simply display a static piece of content), and then instantiate that use case for both video content ( VideoBasic ) and camera content ({CameraBasic}) . This approach is used to implement many of the other scenes - for example, “repeatedly slide the content from left to right and back again” is implemented by SceneMove , on which VideoMove and CameraMove are based.

Depending on the value of the contentType property in the top-level scene instance, the embedded 内容 item creates either a MediaPlayer Camera 项。

计算和显示 QML 描绘率

The QML painting rate is calculated by the FrequencyMonitor class, which turns a stream of events (received via the notify() slot), into an instantaneous and an averaged frequency:

...
											

The FrequencyMonitor class is exposed to QML like this

and its data is displayed by defining a QML item called FrequencyItem, like this:

...
											

The result looks like this:

../_images/video-qml-paint-rate.png

All that remains is to connect the afterRendering() signal of the QQuickView object to a JavaScript function, which will eventually call frequencyItem.notify() :

...
											
...
											

范例工程 @ code.qt.io