Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt Creator and other tools
  4. Assistance Needed for Implementing Camera Functionality in Qt 6 Using GStreamer Pipeline
Forum Update on Monday, May 27th 2025

Assistance Needed for Implementing Camera Functionality in Qt 6 Using GStreamer Pipeline

Scheduled Pinned Locked Moved Qt Creator and other tools
2 Posts 2 Posters 121 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.
  • N Offline
    N Offline
    NandiniD
    wrote on 20 Feb 2025, 14:01 last edited by NandiniD
    #1

    camera.qml

    import QtQuick
    import QtQuick.Controls
    import QtQuick.Layouts
    import QtMultimedia 6.8
    import QtQuick.Effects
    import GStreamerPipeline 1.0
    
    Item {
        id: camera
        property bool showBothCameras: false
        property bool showFrontCamera: true
        property bool showBackCamera: false
        property int frontCameraFps: 0
        property int backCameraFps: 0
    
        GStreamerPipeline {
            id: frontCameraPipeline
            onFpsUpdated: function(fps) {
                frontCameraFps = fps
            }
        }
    
        GStreamerPipeline {
            id: backCameraPipeline
            onFpsUpdated: function(fps) {
                backCameraFps = fps
            }
        }
    
        MediaPlayer {
            id: frontCameraMediaSingle
            autoPlay: true
            source: "gst-pipeline:udpsrc port=5000 ! application/x-rtp,encoding-name=H264 ! rtph264depay ! queue ! avdec_h264 ! queue ! videoconvert ! autovideosink"
            videoOutput: singleCameraViewFront
            onErrorChanged: console.error("Front Camera Error:", errorString)
            onPlayingChanged: console.log("Front Camera Playing", playing)
        }
    
        MediaPlayer {
            id: backCameraMediaSingle
            autoPlay: true
            source: "gst-pipeline:udpsrc port=5000 ! application/x-rtp,encoding-name=H264 ! rtph264depay ! queue ! avdec_h264 ! queue ! videoconvert ! autovideosink"
            videoOutput: singleCameraViewBack
            onErrorChanged: console.error("Back Camera Error:", errorString)
            onPlayingChanged: console.log("Back Camera Playing", playing)
        }
    
        MediaPlayer {
            id: frontCameraMediaDual
            autoPlay: true
            source: "gst-pipeline:udpsrc port=5000 ! application/x-rtp,encoding-name=H264 ! rtph264depay ! queue ! avdec_h264 ! queue ! videoconvert ! autovideosink"
            videoOutput: frontCameraView
            onErrorChanged: console.error("Front Camera Error:", errorString)
            onPlayingChanged: console.log("Front Camera Playing", playing)
        }
    
        MediaPlayer {
            id: backCameraMediaDual
            autoPlay: true
            source: "gst-pipeline:udpsrc port=5000 ! application/x-rtp,encoding-name=H264 ! rtph264depay ! queue ! avdec_h264 ! queue ! videoconvert ! autovideosink"
            videoOutput: backCameraView
            onErrorChanged: console.error("Back Camera Error:", errorString)
            onPlayingChanged: console.log("Back Camera Playing", playing)
        }
    
        // Background Gradient
        Rectangle {
            id: background
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#ffffff" }
                GradientStop { position: 0.5; color: "#9b9b9b" }
                GradientStop { position: 1.0; color: "#000000" }
            }
        }
    
        // Top Navbar
        TopNavbar {
            id: topNavbar
            anchors.top: parent.top
        }
    
    
        // Bottom Navbar
        BottomNavbar {
            id: bottomNavbar
            anchors.bottom: parent.bottom
        }
    
    
        // Camera Elements
        // Single Camera View
        VideoOutput {
            id: singleCameraViewFront
            visible: showFrontCamera && !showBothCameras
            fillMode: VideoOutput.PreserveAspectFit
            anchors.centerIn: parent
            width: parent.width * 0.8
            height: parent.height * 0.5
    
            Text {
                id: fpsDisplaySingleFront
                text: "Front FPS: " + frontCameraFps
                color: "white"
                font.pixelSize: 20
                font.family: "Manrope"
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.bottomMargin: 20
            }
        }
    
        VideoOutput {
            id: singleCameraViewBack
            visible: showBackCamera && !showBothCameras
            fillMode: VideoOutput.PreserveAspectFit
            anchors.centerIn: parent
            width: parent.width * 0.8
            height: parent.height * 0.5
    
            Text {
                id: fpsDisplaySingleBack
                text: "Back FPS: " + backCameraFps
                color: "white"
                font.pixelSize: 20
                font.family: "Manrope"
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.bottomMargin: 20
            }
        }
    
    
        // Dual Camera Side-by-Side View
        RowLayout {
            id: dualCameraView
            visible: showBothCameras
            spacing: 10
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width * 0.8
            height: parent.height * 0.5
    
    
            VideoOutput {
                id: frontCameraView
                fillMode: VideoOutput.PreserveAspectFit
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Text {
                    id: frontFpsOverlay
                    text: "Front FPS: " + frontCameraFps
                    color: "white"
                    font.pixelSize: 20
                    font.family: "Manrope"
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.topMargin: 60
                }
            }
    
            VideoOutput {
                id: backCameraView
                fillMode: VideoOutput.PreserveAspectFit
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Text {
                    id: backFpsOverlay
                    text: "Back FPS: " + backCameraFps
                    color: "white"
                    font.pixelSize: 20
                    font.family: "Manrope"
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    anchors.bottomMargin: 5
                }
            }
        }
    
    
        // Overlay Buttons
        Column {
            id: cameraControls
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 20
            anchors.rightMargin: 20
    
            // Front Camera Button
            Rectangle {
                width: 60; height: 60; radius: 30
                color: "black"
                Image {
                    source: "qrc:/new/icons/Icons/up_arrow.svg"
                    anchors.centerIn: parent
                    width: 40; height: 40
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        showFrontCamera = true;
                        showBackCamera = false;
                        showBothCameras = false;
                        frontCameraMediaSingle.play();
                        console.log("Switched to Front Camera");
                    }
                }
            }
    
            // Dual Camera View Button
            Rectangle {
                width: 60; height: 60; radius: 30
                color: "black"
                Image {
                    source: "qrc:/new/icons/Icons/scooty.png"
                    anchors.centerIn: parent
                    width: 40; height: 40
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        showBothCameras = true;
                        frontCameraMediaDual.play();
                        backCameraMediaDual.play();
                        console.log("Dual Camera View Enabled");
                    }
                }
            }
    
            // Back Camera Button
            Rectangle {
                width: 60; height: 60; radius: 30
                color: "black"
                Image {
                    source: "qrc:/new/icons/Icons/down_arrow.svg"
                    anchors.centerIn: parent
                    width: 40; height: 40
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        showFrontCamera = false;
                        showBothCameras = false;
                        showBackCamera = true;
                        frontCameraMediaSingle.stop();
                        backCameraMediaSingle.play();
                        console.log("Switched to Back Camera");
                    }
                }
            }
        }
    }
    
    

    Hello Qt Creator Support Team,
    I am working on implementing camera functionality in a Qt application using Qt Creator. I am utilizing a GStreamer pipeline where the video stream is transmitted over UDP to the Qt application, which then receives and displays it on the page.
    However, I am facing significant challenges due to the removal of certain backend plugins in the latest Qt 6.x versions. Key components such as QMediaPlayer and VideoOutput are no longer available, making it difficult to integrate the video stream properly.
    Given these limitations, could you suggest alternative solutions for implementing camera functionality using a GStreamer pipeline in Qt 6? Any guidance on best practices or recommended approaches would be greatly appreciated.
    Thank you for your support!
    Best regards
    Nandini

    1 Reply Last reply
    0
    • N NandiniD marked this topic as a regular topic on 20 Feb 2025, 14:09
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on 21 Feb 2025, 21:05 last edited by
      #2

      Hi and welcome to devnet,

      This is not the Qt Creator support team, this is a user forum.

      As for GStreamer and Qt 6. You might want to take a look at their qml6glsink.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0

      1/2

      20 Feb 2025, 14:01

      • Login

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