Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] Qml hybrid (list)view and video streaming
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved QML and Qt Quick
listviewmediaplayerrealtime stream
4 Posts 2 Posters 2.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Meteor
    wrote on last edited by Meteor
    #1

    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!

    p3c0P 1 Reply Last reply
    0
    • M Meteor

      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!

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      @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.

      157

      M 1 Reply Last reply
      1
      • p3c0P p3c0

        @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.

        M Offline
        M Offline
        Meteor
        wrote on last edited by
        #3

        @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.

        p3c0P 1 Reply Last reply
        1
        • M Meteor

          @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.

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

          @Meteor +1 for parent.modelData

          157

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved