Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML camera , create overlay and record the video with overlay



  • Hello

    I am planning to use qt mulitmedia and camera to create a video with a overlay , and save the video to a file . So far i am succesul in displaying the live video from the camera and overlaying the output with live data . Is there a way to save the video including the overlay ?

    import QtQuick 2.8
    import QtGraphicalEffects 1.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtMultimedia 5.8
    
    
    Item {
        id : cameraUI
        width: parent.width
        height: parent.height
    
    
        Camera
        {
           id:camera
           captureMode: Camera.CaptureVideo
           videoRecorder.audioSampleRate: 48000
           videoRecorder.audioBitRate: 96
           videoRecorder.audioChannels: 1
           videoRecorder.audioCodec: "audio/mpeg, mpegversion=(int)4"
           videoRecorder.outputLocation:""
           videoRecorder.frameRate: 30
           videoRecorder.videoCodec: "video/x-h264"
           videoRecorder.mediaContainer: "video/x-matroska"
    
           videoRecorder.onRecorderStateChanged: {
              if (camera.videoRecorder.recorderState == CameraRecorder.StartingStatus) {
                  console.log("saved to: " + camera.videoRecorder.outputLocation)
    
              }
    
           }
    
    
    
        }
    
        Button {
            id: recordButton
            text: "Record"
            //visible: camera.videoRecorder.recorderStatus == CameraRecorder.LoadedStatus
            onClicked: camera.videoRecorder.record(),console.log (camera.videoRecorder.recorderStatus);
            anchors.right: parent.right
            anchors.top : parent.top
        }
        Button {
            id: stopButton
            text: "Stop"
           // visible: camera.videoRecorder.recorderStatus == CameraRecorder.RecordingStatus
            onClicked: camera.videoRecorder.stop()
            anchors.right: parent.right
            anchors.top : recordButton.bottom
        }
    
        VideoOutput {
            id: videoscreen
            source: camera
            focus : visible
            //anchors.fill: parent
            anchors.fill: parent;
            fillMode: VideoOutput.PreserveAspectFit
             autoOrientation:true;
    //Overlay Video with various gauges that display live data from the Car
             Rectangle {
                id: gauges
                color: "transparent";
                //opacity: 0.3
                width: videoscreen.width;
                height: videoscreen.height / 3;
                anchors.bottom: videoscreen.bottom;
    
                Image {
                    id: backround
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.horizontalCenter
                    anchors.rightMargin: parent.width /20
                    width: height
                    height: gauges.height
                    fillMode: Image.PreserveAspectFit
                    source: "/graphics/Tacho_Mitte.png"
                    CircularGauge {
                        id: speedometer
                        value: Dashboard.speed
                        //anchors.verticalCenter: parent.verticalCenter
                        //anchors.right: parent.horizontalCenter
                        width: height
                        height: parent.height /1.13
                        anchors.centerIn: backround
                        maximumValue: 300
    
                        style: DashboardGaugeStyle {
                            labelStepSize: 30
                            minimumValueAngle: -120
                            maximumValueAngle: 120
                            needleLength: toPixels(0.85)
                            needleBaseWidth: toPixels(0.08)
                            needleTipWidth: toPixels(0.03)
                        }
                    }
            }
                Gauge {
                    id: forcebargauge
                    width: height /3
                    height: gauges.height / 2
                    anchors.right: parent.horizontalCenter
                    anchors.rightMargin: parent.width /80
                    anchors.verticalCenter: parent.verticalCenter
                    minimumValue: -2
                    maximumValue: 2
                    tickmarkStepSize: 0
    
    
                    value: 0
    
    
                    style: GaugeStyle {
                        valueBar: Rectangle {
                            implicitWidth: forcebargauge.width /1.5
                            color: "green"
                        }
                    }
                    Text {
                        id: name1
                        text: qsTr("G")
                        anchors.top: forcebargauge.bottom
                        anchors.right:  forcebargauge.right
                    }
                }
    
                Gauge {
                    id: throttlebargauge
                    width: height /3
                    height: gauges.height / 2
                    anchors.left: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                   // anchors.leftMargin: parent.width /80
                    minimumValue: 0
                    maximumValue: 100
                    tickmarkStepSize: 0
    
    
                    value: 50
    
                    style: GaugeStyle {
                        valueBar: Rectangle {
                            implicitWidth: throttlebargauge.width /1.5
                            color: "green"
                        }
                    }
                    Text {
                        id: name
                        text: qsTr("THR")
                        anchors.top: throttlebargauge.bottom
                        anchors.right: throttlebargauge.right
                    }
                }
                Image {
                    id: backroundrev
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.horizontalCenter
                    anchors.leftMargin: parent.width /20
                    width: height
                    height: gauges.height
                    fillMode: Image.PreserveAspectFit
                    source: "/graphics/Tacho_Mitte.png"
                    CircularGauge {
                        id: revcounter
                        value: Dashboard.revs /1000
                        anchors.centerIn: backroundrev
                        width: height
                        height: parent.height /1.13
                        maximumValue: 9
                        style: TachometerStyle {
                            minimumValueAngle: -120
                            maximumValueAngle: 120
                            needleLength: toPixels(0.85)
                            needleBaseWidth: toPixels(0.08)
                            needleTipWidth: toPixels(0.03)
                        }
                    }
    
            }
    
    
    //Gauge End
    
            }
        }
    }
    

Log in to reply