QImage into QML

Question

My application receives a live-stream of JPEGs over network (16 frames per second). The live-stream should be displayed using QML. The receiving part is written in C++, all the UI is written using QML.

How do I get the image data into the QML window? I have looked around how to get a QImage displayed, but I did not find a solution yet.

Implementing QDeclarativeImageProvider and refreshing the source of the image over and over again using a different name seems to be the only solution, see http://qt-project.org/doc/qt-4.8/qdeclarativeimageprovider.html.

Answer 1

Yes, unfortunately the Image element is missing an update() method (to forcibly reset it). Setting the very same source URL will not trigger an update.

You can use something like this as a workaround:

Image {
    source: "image://yourImageProvider/something"
    cache: false
    function reload() {
        var oldSource = source;
        source = "";
        source = oldSource;
    }
}

(Or just switch between two URLS, with the same provider name, but different paths...)

You should also push those JPEGs you receive to the QML layer. Once you receive a new image, you should emit a signal from C++'s side from some object exposed to the QML engine, and connect that signal to that reload() function. The Connections element will help you there.

Connections {
    target: myC++ObjectExposedToTheQMLEngine
    onNewFrameReceived: image.reload(); 
}