QML Video Example

Transforming video and camera viewfinder content

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 multimedia/video/qmlvideo/qml/qmlvideo/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.

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-a SceneBasic


… which is-a Scene :


SceneBasic describes the structure and behaviour 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():


qmlvideo.svg Example File

trace.h Example File

Button.qml Example File

CameraBasic.qml Example File

CameraDrag.qml Example File

CameraDummy.qml Example File

CameraFullScreen.qml Example File

CameraFullScreenInverted.qml Example File

CameraItem.qml Example File

CameraMove.qml Example File

CameraOverlay.qml Example File

CameraResize.qml Example File

CameraRotate.qml Example File

CameraSpin.qml Example File

Content.qml Example File

ErrorDialog.qml Example File

FileBrowser.qml Example File

Scene.qml Example File

SceneBasic.qml Example File

SceneDrag.qml Example File

SceneFullScreen.qml Example File

SceneFullScreenInverted.qml Example File

SceneMove.qml Example File

SceneMulti.qml Example File

SceneOverlay.qml Example File

SceneResize.qml Example File

SceneRotate.qml Example File

SceneSelectionPanel.qml Example File

SceneSpin.qml Example File

SeekControl.qml Example File

VideoBasic.qml Example File

VideoDrag.qml Example File

VideoDummy.qml Example File

VideoFillMode.qml Example File

VideoFullScreen.qml Example File

VideoFullScreenInverted.qml Example File

VideoItem.qml Example File

VideoMetadata.qml Example File

VideoMove.qml Example File

VideoOverlay.qml Example File

VideoPlaybackRate.qml Example File

VideoResize.qml Example File

VideoRotate.qml Example File

VideoSeek.qml Example File

VideoSpin.qml Example File

main.qml Example File

main.cpp Example File

qmlvideo.pro Example File

qmlvideo.qrc Example File

qmlvideo.png Image File

folder.png Image File

leaves.jpg Image File

up.png Image File