在Ubuntu手机平台中使用Camera API来录像

在前面的文章“如何在QML中使用camera API来拍照”中，我们介绍了如何使用Camera API来进行拍照。今天我们在这篇文章中来介绍如何使用Camera API来进行录像。

首先，还是和以前一样，我直接把自己的代码贴出来：

main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtMultimedia 5.0

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "videoapp.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    property var resolution

    // This function is used to get the writable private directory of this app
    function getPriateDirectory() {
        var sharepath = "/home/phablet/.local/share/";
        var path = sharepath + applicationName;
        console.log("path: " + path);
        return path;
    }

    Page {
        id: page
        title: i18n.tr("videoapp")

        Camera {
            id: camera

            imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash

            exposure {
                exposureCompensation: -1.0
                exposureMode: Camera.ExposurePortrait
            }

            flash.mode: Camera.FlashRedEyeReduction

            videoRecorder {
                onRecorderStateChanged: {
                    console.log("onRecorderStateChanged: " + videoRecorder.recorderState);
                    if (videoRecorder.recorderState === CameraRecorder.StoppedState) {
                        console.log("actualLocation: " + videoRecorder.actualLocation);
                        myvideo.source =  videoRecorder.actualLocation;
                    }
                }
            }

            videoRecorder.audioEncodingMode: videoRecorder.ConstantBitrateEncoding;
            videoRecorder.audioBitRate: 128000
            videoRecorder.mediaContainer: "mp4"
            videoRecorder.outputLocation: getPriateDirectory()

            captureMode: Camera.CaptureVideo

            Component.onCompleted: {
                resolution = camera.viewfinder.resolution;
                console.log("resolution: " + resolution.width + " " + resolution.height);
                console.log("deviceId: " + camera.deviceId)
            }
        }

        Row {
            id: container

            Item {
                width: page.width
                height: page.height

                VideoOutput {
                    id: video
                    anchors.fill: parent
                    source: camera
                    focus : visible // to receive focus and capture key events when visible
                    orientation: -90
                }

                SwipeArea {
                    anchors.fill: parent
                    onSwipe: {
                        console.log("swipe happened!： " + direction)
                        switch (direction) {
                        case "left":
                            page.state = "image";
                            break
                        }
                    }
                }
            }

            Item {
                id: view
                width: page.width
                height: page.height

                Video {
                    id: myvideo
                    anchors.fill: parent
                    autoPlay: true
                    focus: true

                    Component.onCompleted: {
                        myvideo.play();
                    }
                }

                Text {
                    text: myvideo.source
                    color:"red"
                    font.pixelSize: units.gu(2.5)
                    width: page.width
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                }

                SwipeArea {
                    anchors.fill: parent
                    onSwipe: {
                        console.log("swipe happened!： " + direction)
                        switch (direction) {
                        case "right":
                            page.state = "";
                            break
                        }
                    }
                }
            }
        }

        states: [
            State {
                name: "playvideo"
                PropertyChanges {
                    target: container
                    x:-page.width
                }
                PropertyChanges {
                    target: capture
                    opacity:0
                }
                PropertyChanges {
                    target: stop
                    opacity:0
                }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { target: container; property: "x"; duration: 500
                    easing.type:Easing.OutSine}
                //                NumberAnimation { target: inputcontainer; property: "opacity"; duration: 200}
                NumberAnimation { target: capture; property: "opacity"; duration: 200}
                NumberAnimation { target: stop; property: "opacity"; duration: 200}
            }
        ]

        Row {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: units.gu(1)
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: units.gu(1)

            Button {
                id: capture
                text: "Record"

                onClicked: {
                    console.log("capture path: " + getPriateDirectory());
                    camera.videoRecorder.record();
                }
            }

            Button {
                id: stop
                text: "Stop"

                onClicked: {
                    console.log("stop is clicked!");
                    camera.videoRecorder.stop();
                    page.state = "playvideo"
                }
            }

            Button {
                id: play
                text: "Play video"

                onClicked: {
                    console.log("filepath: " + myvideo.source);
                    console.log( "actual: " +  camera.videoRecorder.actualLocation);
                    myvideo.play();
                }
            }
        }

    }
}

在这里，QML Camera是被如下的方式使用的：

        Camera {
            id: camera

            imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash

            exposure {
                exposureCompensation: -1.0
                exposureMode: Camera.ExposurePortrait
            }

            flash.mode: Camera.FlashRedEyeReduction

            videoRecorder {
                onRecorderStateChanged: {
                    console.log("onRecorderStateChanged: " + videoRecorder.recorderState);
                    if (videoRecorder.recorderState === CameraRecorder.StoppedState) {
                        console.log("actualLocation: " + videoRecorder.actualLocation);
                        myvideo.source =  videoRecorder.actualLocation;
                    }
                }
            }

            videoRecorder.audioEncodingMode: videoRecorder.ConstantBitrateEncoding;
            videoRecorder.audioBitRate: 128000
            videoRecorder.mediaContainer: "mp4"
            videoRecorder.outputLocation: getPriateDirectory()

            captureMode: Camera.CaptureVideo

            Component.onCompleted: {
                resolution = camera.viewfinder.resolution;
                console.log("resolution: " + resolution.width + " " + resolution.height);
                console.log("deviceId: " + camera.deviceId)
            }
        }

我们定义了capureMode为Camera.CaptureVideo。同时我们也指定了录像文件的路径：

videoRecorder.outputLocation: getPriateDirectory()

当我们使用CameraRecorder来进行如下的方式录像时：

 camera.videoRecorder.record();

我们可以通过：

            videoRecorder {
                onRecorderStateChanged: {
                    console.log("onRecorderStateChanged: " + videoRecorder.recorderState);
                    if (videoRecorder.recorderState === CameraRecorder.StoppedState) {
                        console.log("actualLocation: " + videoRecorder.actualLocation);
                        myvideo.source =  videoRecorder.actualLocation;
                    }
                }
            }

来获取所录像的文件的实际路径。

我们可以通过：

               Video {
                    id: myvideo
                    anchors.fill: parent
                    autoPlay: true
                    focus: true

                    Component.onCompleted: {
                        myvideo.play();
                    }
                }

来播放已经录下的文件。

运行为我们的应用：

 

整个项目的源码在： https://github.com/liu-xiao-guo/videoapp