OpenHarmony实战开发-如何调用设备摄像头进行拍照、预览并将拍摄结果保存在媒体库中

最新推荐文章于 2025-05-08 15:12:01 发布

码牛程序猿

最新推荐文章于 2025-05-08 15:12:01 发布

阅读量1.8k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：鸿蒙 HarmonyOS 鸿蒙工程师文章标签： OpenHarmony harmonyos 鸿蒙应用开发鸿蒙开发鸿蒙系统鸿蒙鸿蒙工程师

本文链接：https://blog.csdn.net/2401_82546228/article/details/139221343

场景说明

调用设备摄像头进行拍照、预览是许多应用开发过程中都需要的功能。在拍照完成时显示照片预览图可以确认拍摄的照片是否达到预期，本例将为大家介绍如何实现上述功能。

效果呈现

本例效果如下：

拍照预览
contactlist contactlist

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发。

IDE：DevEco Studio 4.0.0.201 Beta1
SDK：Ohos_sdk_public 4.0.7.5 (APIVersion 10 Beta1)

实现思路

本例使用@ohos.multimedia.camera接口实现相机示例的主要功能：拍照、预览；

拍照：XComponent组件负责绘制摄像头画面呈现的窗口，其onload事件调用cameraModel.ts的initCamera方法初始化相机功能输出画面信息。拍照动作使用Image组件实现，其onclick事件调用cameraModel.ts的takepicture方法开始拍照。
预览：返回相机界面点击底部左侧预览图可进入相册应用，可以在其中查看照片和录制的视频。

开发步骤

1.申请所需权限

在model.json5中添加以下配置：

"requestPermissions": [
      {
   
   
        "name": "ohos.permission.CAMERA"//允许应用使用相机拍摄照片和录制视频
      },
      {
   
   
        "name": "ohos.permission.MICROPHONE"//允许应用使用麦克风
      },
      {
   
   
        "name": "ohos.permission.MEDIA_LOCATION"//允许应用访问用户媒体文件中的地理位置信息
      },
      {
   
   
        "name": "ohos.permission.WRITE_MEDIA"//允许应用读写用户外部存储中的媒体文件信息
      },
      {
   
   
        "name": "ohos.permission.READ_MEDIA"//允许应用读取用户外部存储中的媒体文件信息
      }
    ]

2.创建绘制组件XComponent以输出摄像头获取的画面，其绑定的onload方法中设定了画幅的大小。

build() {
   
   
    Column() {
   
   
      Title()
        .visibility(this.isTitleShow ? Visibility.Visible : Visibility.None) 
      Stack({
   
    alignContent: Alignment.Bottom }) {
   
   
        Stack({
   
    alignContent: Alignment.TopStart }) {
   
   
          XComponent({
   
   
            id: 'componentId',
            type: 'surface',
            controller: this.mXComponentController  //将控制器绑定至XComponent组件
          })
            .onLoad(() => {
   
   
              this.mXComponentController.setXComponentSurfaceSize({
   
    surfaceWidth: 640, surfaceHeight: 480 });//设置surface大小
              this.surfaceId = this.mXComponentController.getXComponentSurfaceId();
              this.currentModel = CameraMode.modePhoto; 
              this.cameraModel.initCamera(this.surfaceId); //调用model/cameraModel.ts初始化相机功能
            })
            .width('100%')
            .height('100%')
            .margin({
   
    bottom: 152 }