BB10 Cascades:如何使用照相机组件

 

在BB10 Cascades Beta2中开发人员已经可以在QML中调用照相机组件，不过在项目配置方面有一些特殊的要求。到了BB10 Cascades Beta3版本，照相机组件的使用就很简单了，下面描述一下具体的步骤。

 

首先我们需要一个基本的应用框架，这个可以通过BB10 Cascades应用创建向导创建，选择模板的时候选择“Standard Empty Project”就可以了，对具体的创建过程有疑问的话请参考我之前的博文。

创建了应用框架后可以测试运行一下，会在机器上显示"Hello World"字样。

 

创建了应用框架以后需要修改一下应用的权限，让应用可以调用照相机组件。同时，应为照相机组件缺省将照片保存在共享文件中，所以需要添加访问共享文件的权限。

步骤如下：

1. 双击项目的bar-descriptor.xml文件。

2.打开Application页面

3.勾选Permissions一栏中的“Camera”和“Shared Files”选项

4.保存bar-descriptor.xml文件。

 

然后打开assets目录下的main.qml文件，我们需要在main.qml中加入照相机的支持。

首先是引入相关的包，代码如下，

import bb.cascades.multimedia 1.0
import bb.multimedia 1.0

然后是添加Camera组件，代码如下，部分不重要的代码已经省略，完整代码在最后有。

 

      Camera {
            id: camera
            objectName: "myCamera"
            onTouch: {
                if (event.isDown()) {
                    capturePhoto();
                }
            }
            onCameraOpened: {
                getSettings(cameraSettings)
                cameraSettings.focusMode = CameraFocusMode.ContinuousAuto
                //cameraSettings.shootingMode = CameraShootingMode.Stabilization
                applySettings(cameraSettings)
                camera.startViewfinder();
            }

            // .....
            onPhotoSaved: {
                console.log("photoSaved successfully, filaName:" + fileName);
            }
            attachedObjects: [
                CameraSettings {
                    id: cameraSettings
                }
            ]
        }//Camera

以上代码为mail.qml加上了照相机组件，使用的是Camera{}元素，其中加载了一个对象叫CameraSettings，是照相机初始化时需要使用的。

在Camera{}的onTouch事件中我们加入了capturePhoto()方法的调用，这样当用户点击照相机显示的屏幕时就会照一张像。

在onCameraOpened事件中我们加入了Camera.startViewfinder方法的调用，在相机打开的时候开始捕获传入照相机的图像。

然后在onPhotoSaved事件中加入了控制台输出消息，显示照片所保存的文件名，注意其中的fileName变量是Camera组件生产的变量，代表照片保存的文件位置，额外需要提醒大家注意变量的大小写。

 

最后是相机的启动，我们希望页面打开后自动启动相机，所以利用了页面（Page）的onCreatedCompleted事件，在该事件中调用了camera.open()方法一启动照相机，代码如下。

  onCreationCompleted: {
        console.log("Photo camera loaded!");
        camera.open();

           }

一切做完了就可以开始打包测试了，如果应用成功启动的话，应用启动后显示照相机的预览画面，点击预览画面就可以拍照。

注意缺省情况下应用的日志是不出现在BB10 Cascades 的控制台的，需要确认是否拍照成功的话直接去机器的图片应用查看是否有新照片就好了。如果需要在控制台看到信息，请参考我之前有关BB10 Cascades Beta3控制台信息显示的博文。

下面是main.qml的完整代码，供参考。

 

// Default empty project template
import bb.cascades 1.0
import bb.cascades.multimedia 1.0
import bb.multimedia 1.0

// creates one page with a label

Page {
    Container {
        layout: DockLayout {
        }
        Label {
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Camera {
            id: camera
            objectName: "myCamera"
            onTouch: {
                if (event.isDown()) {
                    capturePhoto();
                }
            }
            onCameraOpened: {
                getSettings(cameraSettings)
                cameraSettings.focusMode = CameraFocusMode.ContinuousAuto
                //cameraSettings.shootingMode = CameraShootingMode.Stabilization
                applySettings(cameraSettings)
                camera.startViewfinder();
            }

            // There are loads of messages we could listen to here
            //onPhotoSaved and onShutterFired are taken care of in the C code
            onCameraOpenFailed: {
                console.log("onCameraOpenFailed signal received with error " + error);
            }
            onViewfinderStartFailed: {
                console.log("viewfinderStartFailed signal received with error " + error);
            }
            onViewfinderStopFailed: {
                console.log("viewfinderStopFailed signal received with error " + error);
            }
            onPhotoCaptureFailed: {
                console.log("photoCaptureFailed signal received with error " + error);
            }
            onPhotoSaveFailed: {
                console.log("photoSaveFailed signal received with error " + error);
            }
            onPhotoSaved: {
                console.log("photoSaved successfully, filaName:" + fileName);
            }
            attachedObjects: [
                CameraSettings {
                    id: cameraSettings
                }
            ]
        }
    }
    onCreationCompleted: {
        console.log("Photo camera loaded!");
        camera.open();

           }
}