QML Video Example

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 types.

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 item.

../_images/qmlvideo-overlay.jpg

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples . For more information, visit Building and Running an Example.

Application Structure

The 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 Content .

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 Content item creates either a MediaPlayer or a Camera item.

Calculating and Displaying QML Painting Rate

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() :

...
...

Example project @ code.qt.io