在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