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.
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 aFileBrowser
.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.
![]()
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:
All that remains is to connect the afterRendering() signal of the QQuickView
object to a JavaScript function, which will eventually call frequencyItem.notify()
:
...
...