Implementing Multimedia with Qt Quick

Today's applications increasingly use multimedia to enhance their appeal to users. Sound effects are a key part of most user interfaces, and many applications include video tutorials or other video content. Some applications even use the camera provided on many devices; this is especially true of mobile applications, where most mobile devices have at least one, if not two or more cameras.

In this chapter, we will take a look at Qt Quick's support for multimedia. We'll begin with an overview of what's possible so that you understand what you can and can't build using the platform-agnostic support for multimedia that Qt provides. Next, we will look at the Qt Quick components that provide access for audio and video playback in detail, as well as how to use the camera, if it is supported.

In this chapter, we will cover...

Technical requirements

The technical requirements for this chapter include Qt 5.13.1 MinGW 64-bit, Qt Creator 4.10.0, and Windows 10.

The GitHub link for the chapter can be found here:

https://github.com/PacktPublishing/Application-Development-with-Qt-Creator-Third-Edition/tree/master/Chapter08.

Implementing multimedia in Qt

Qt has long provided some support for multimedia on the platforms it supports in C++ through the inclusion of its Phonon library. In Qt 5.0 and beyond, Qt Quick provides several objects to interact with the native support provided by Qt and the underlying platform that Qt provides. Using these QML components, you can do the following:

• Play sound clips and short sound effects in the background
• Play video content
• Display the camera viewfinder
• Capture camera content from the camera

What's actually supported by Qt depends on the target platform; for example, if the hardware doesn't have a camera, you can't display a camera viewfinder or take pictures. In practice, the level of support varies further; for example, as I write this, multimedia support on Windows is very poor. Moreover, the actual format of the audio and video that Qt can...

Playing audio clips and sound effects

Qt Quick provides the SoundEffect type to play short sound effects with minimum latency. This is especially good for things such as button click sounds, virtual keyboard sounds, and alert tones as part of a rich and engaging multimedia experience. Using it is straightforward; you provide the type with a source field and call its play method to start the playback, as follows:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtMultimedia 5.12

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("Play Sound")

    Text {
        text: "Click Me!";
        font.pointSize: 24;
        width: 150; height: 50;

        SoundEffect {
            id: playSound
            source: "soundeffect.wav"
        }
        MouseArea {
            id: playArea
            anchors.fill: parent
            onPressed: { playSound...

Playing video clips

Playing video is as easy as playing audio; there's a Video type that supports playing the video and displaying the video on the display. Here's a video player that plays video when you click on it, and pauses and restarts the playback when you press the spacebar:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtMultimedia 5.12

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Play Video")

    Video {
        id: video
        width : 800
        height : 600
        source: "video.avi"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                video.play()
            }
        }

        focus: true
        Keys.onSpacePressed:
            video.playbackState == MediaPlayer.PlayingState ?
                video.pause() :
                video.play()
    }
}

The preceding code produces the...

Accessing the camera

To access the camera when it is supported by the hardware and Qt Multimedia, use the Camera type and its associated types to control the camera's capture behavior, exposure, flash, focus, and image processing settings. A simple use of the camera to show a viewfinder is done with the following code:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtMultimedia 5.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Webcam")

    Item {
        width: 640
        height: 480

        Camera {
            id: camera
        }

        VideoOutput {
            source: camera
            anchors.fill: parent
        }
    }
}

The preceding code produces the following result:

In short, the Camera type acts like a source for the video just as a MediaPlayer instance does.

The Camera type provides a few properties to control its behavior. They...

Summary

In this chapter, you saw the types that Qt Quick provides for managing audio and video media, as well as how to control the camera (if one exists). Using these types, you can add sound effects and ambient audio to your applications, which will make your videos more pleasing and help viewers to understand better what is being put across. You can also play videos from resources, the filesystem, or the web. In addition, as well as controlling the camera, if one exists, you can also capture still and moving images with it.

In the next chapter, we will look at the support that Qt has for accessing hardware sensors, such as those pertaining to the device location, orientation, and power state.