[SOLVED] Qml hybrid (list)view and video streaming



  • I am developmenting a small QML project and here are two problems I've faced.

    1, Let say I have a list model with two attributes, type and data. If type == "text" I'll want a Text {text: data} Produced in my list view, and if type == "image" I'll want a Image { source: data }

    I've found that in past, there used to be a trick (See http://www.qtcentre.org/threads/35816-Using-an-If-condition-in-a-QML-delegate) using component. But since qt5 it seems like the model variable is invisible inside the inner component scope.

    I've also seen someone achieved this by using states in delegate to change the visibility of different components
    (That is if type == text then set image to be invisible in this case…), but I think it is a bit painful...
    So I wonder if there is a better way to do this?

    2, I want to do some video streaming. Is there a way to custom direct streaming data into QML's mediaplayer (besides using rtp serve... ).
    That is I will get video data by socket using c++, but how can I direct it to QML mediaplayer?

    I would be so thankful if someone has some ideas, thanks!


  • Moderators

    @Meteor Welcome to Qt Devnet.

    For the first you can do it using Loader where you can change sourceComponent as per the condition

    ListModel {
        id: model
        ListElement {
            type: "text"
            listdata: "textdata"
        }
        ListElement {
            type: "image"
            listdata: "file:///root/star.png"
        }
    }
    
    ListView {
        id: view
        anchors.fill: parent
        model: model
        delegate: Loader {
            id: loader
            width: 180
            height: 100
            sourceComponent: type=="text" ? Qt.createQmlObject('import QtQuick 2.4; Component { Text { text: listdata } }', loader)
                                           : Qt.createQmlObject('import QtQuick 2.4; Component { Image { source: listdata } }', loader)
        }
    }
    

    For Second point, AFAIK the MediaPlayer's source property takes only a url so there is no way to pass data to it other than rtsp or http url.



  • @p3c0 Thanks for the solution! It works well.
    Followed your idea I end up using the following solution

    ``

    ListModel {
        id: mod
        ListElement {
            type: 'text'
            listdata: '^_^;;'
        }
        ListElement {
            type: 'image'
            listdata: 'some/path'
        }
    }
    
    ListView {
        id: view
        anchors.fill: parent
        model: mod
        delegate: Loader {
            id: loader
            width: 180
            height: 100
            property var modelData: model
            sourceComponent: type == 'text' ? textView : imageView
        }
    }
    
    Component {
        id: textView
        Text {
            property var datas: parent.modelData
            text: "Text: " + datas.listdata
        }
    }
    Component {
        id: imageView
        Image {
            property var datas: parent.modelData
            source: "Image: " + datas.listdata
        }
    }
    

    ``
    for a better scalability.

    And for problem 2, it seems like https://forum.qt.io/topic/32948/qtquick-qml-display-mjpeg-image-stream-qimages-from-c is the only
    solution right now...

    Thanks for your helping again.


  • Moderators

    @Meteor +1 for parent.modelData



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.