HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（八）使用系统相机录制视频

HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（八）使用系统相机录制视频

上一节我们使用Refresh组件实现了下拉刷新功能。除了浏览别人发布的短视频，用户也能在抖音App上发布自己的作品，当然首先得有一段录制好的视频，那么在鸿蒙系统录像用到了系统相机。使用相机录像的具体步骤说明如下：

1、申请录像需要的相机权限和麦克风权限

录像过程需要操作手机的摄像头和麦克风，因为摄像头（相机）与麦克风属于敏感权限，所以安全起见要事先给鸿蒙App申请这两个权限。首先在module.json5中添加如下所示的CAMERA权限和MICROPHONE权限，表示App希望访问相机和麦克风。

"requestPermissions":[
  {
    "name" : "ohos.permission.CAMERA",
    "reason": "$string:Camera_reason",
    "usedScene": {
      "when":"inuse"
    }
  },
  {
    "name" : "ohos.permission.MICROPHONE",
    "reason": "$string:Microphone_reason",
    "usedScene": {
      "when":"inuse"
    }
  }
]

接着在ETS代码中补充对这两个权限的动态检查与动态授权操作，具体参见之前的文章《申请网络动态授权》，这里不再赘述。

2、导入系统提供的相机库

鸿蒙系统为相机提供了两个工具库，分别是camera和cameraPicker，其中camera用来访问相机信息，而cameraPicker用来执行拍照与录像动作。为此得在ETS代码开头添加下面的导包语句，声明引入camera和cameraPicker两个相机库。

import { cameraPicker, camera } from '@kit.CameraKit'

3、拉起系统相机执行录像操作

ETS代码调用cameraPicker的pick方法，即可拉起系统相机。该方法的第二个参数规定了待拾取的媒体类型，取值cameraPicker.PickerMediaType.PHOTO表示拍照，取值cameraPicker.PickerMediaType.VIDEO表示录像。方法的第三个参数规定了PickerProfile类型的拾取规格，常用的规格字段说明如下：

• cameraPosition：待拍摄的相机。取值camera.CameraPosition.CAMERA_POSITION_BACK表示后置摄像头，取值camera.CameraPosition.CAMERA_POSITION_FRONT表示前置摄像头。
• saveUri：结果文件的保存路径。
• videoDuration：视频的最大录制时长，单位秒。如果不填该字段，就表示持续录制，直到用户手动停止。

以录制15秒视频为例，采用后置摄像头的话，拉起系统相机的录像代码示例如下：

startCameraPicker(context: common.Context) {
  try {
    let pickerProfile: cameraPicker.PickerProfile = {
      cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK, // 后置摄像头
      videoDuration: 15 // 录制的最大时长，单位秒
    };
    // 只处理录像
    cameraPicker.pick(context, [cameraPicker.PickerMediaType.VIDEO], pickerProfile).then((pickerResult) => {
      this.videoPath = pickerResult.resultUri // 录制完成的结果文件路径
    })
  } catch (error) {
    let err = error as BusinessError;
    console.error(`the pick call failed. error code: ${err.code}, error msg: ${err.message}`);
  }
}

4、使用Video组件播放录好的视频

上个步骤把录制完成的结果路径存入this.videoPath，接下来利用Video组件加载该路径的视频文件，即可在App界面上播放视频。简单的Video组件播放代码示例如下：

Video({
  src: this.videoPath
})
.width('100%').layoutWeight(1).objectFit(ImageFit.Contain)
.autoPlay(false) // 是否自动播放
.controls(true) // 是否显示控制条

有关Video组件的详细用法可参考之前的文章《使用Video播放视频》，这里不再赘述。

综合上述的权限申请和录像操作，编译运行App拉起相机界面如下图所示。

完成录像后，返回视频播放界面如下图所示，可见成功实现了通过系统相机录制短视频的功能。

下一篇文章会介绍如何从视频文件中截取某帧图像作为该视频的缩略图。