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

Using QML to capture images



  • While trying to capture images with my qml, I received the error QML Image: Protocol "c" is unknown
    After reading the documentation, I read that the path emitted by the signal imageSaved is a local path and not a url. I added the method encodeURIComponent(path) and this solves that particular error but returns a new one QML Image: Cannot open: file:///C:/Users/emiol/OneDrive/Documents/Multimedia/C%3A/Users/emiol/OneDrive/Pictures/IMG_00000003.jpg
    I noticed that the path string is formatted wrongly, looks like the joining of two path strings.
    Can someone help me out here. Attached below is my code.
    P.S: The images are stored in my system not just accessible from the program

    import QtQuick 2.5
    import QtMultimedia 5.6
    import "./ch11-multimedia/src/camera"
    Rectangle {
        id: root
    
        width: 1024
        height: 600
    
        color: "black"
    
        // M1>>
        VideoOutput {
            anchors.fill: parent
            source: camera
        }
    
        Camera {
            id: camera
        }
        // <<M1
    
        // M2>>
        ListModel {
            id: imagePaths
        }
    
        ListView {
            id: listView
    
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
    
            height: 100
    
            orientation: ListView.Horizontal
            spacing: 10
    
            model: imagePaths
    
            delegate: Image {
                height: 100
                source: encodeURIComponent(path)
                fillMode: Image.PreserveAspectFit
            }
    
            Rectangle {
                anchors.fill: parent
                anchors.topMargin: -10
    
                color: "black"
                opacity: 0.5
            }
        }
        // <<M2
    
        Image {
            id: image
            anchors.fill: parent
        }
    
        // M3>>
        Connections {
            target: camera.imageCapture
    
            onImageSaved: {
                imagePaths.append({"path":path})
                listView.positionViewAtEnd();
            }
        }
        // <<M3
    
        Column {
            id: buttons
    
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 10
    
            spacing: 10
    
            // M4>>
            Button {
                id: shotButton
    
                text: "Take Photo"
                onClicked: {
                    camera.imageCapture.capture();
                }
            }
            // <<M4
    
            Button {
                id: playButton
    
                text: "Play Sequence"
                onClicked: {
                    startPlayback();
                }
            }
    
            Button {
                id: clearButton
    
                text: "Clear Sequence"
                onClicked: {
                    imagePaths.clear();
                }
            }
        }
    
        // M5>>
        property int _imageIndex: -1
    
        function startPlayback()
        {
            root.state = "playing";
            setImageIndex(0);
            playTimer.start();
        }
    
        function setImageIndex(i)
        {
            _imageIndex = i;
    
            if (_imageIndex >= 0 && _imageIndex < imagePaths.count)
                image.source = imagePaths.get(_imageIndex).path;
            else
                image.source = "";
        }
    
        Timer {
            id: playTimer
    
            interval: 200
            repeat: false
    
            onTriggered: {
                if (_imageIndex + 1 < imagePaths.count)
                {
                    setImageIndex(_imageIndex + 1);
                    playTimer.start();
                }
                else
                {
                    setImageIndex(-1);
                    root.state = "";
                }
            }
        }
        // <<M5
    
        states: [
            State {
                name: "playing"
                PropertyChanges {
                    target: buttons
                    opacity: 0
                }
                PropertyChanges {
                    target: listView
                    opacity: 0
                }
            }
        ]
    
        transitions: [
            Transition { PropertyAnimation { properties: "opacity"; duration: 200; } }
        ]
    }
    
    

Log in to reply