鸿蒙二维码和多媒体使用

前言

最近又搞了挺久鸿蒙，上篇文章简单讲了下鸿蒙里面Web里面JSBridge和Message的使用，这篇文章也是非常简单的内容，简单说下二维码、相册图片视频选取、系统API录像与拍照。

二维码识别

鸿蒙系统API里面集成了二维码识别，有一说一，这点还是不错的，毕竟大部分需求就是识别个二维码，下面看下如何使用:

  /**
   * 启动二维码扫描，并返回数据
   *
   * @param callback H5侧回调函数
   */
  scanner(): Promise<string> {
    return new Promise((resolve, reject) => {
      // 定义扫码参数options
      let options: scanBarcode.ScanOptions = {
        // 扫码类型
        scanTypes: [scanCore.ScanType.ALL],
        // 是否开启多码识别
        enableMultiMode: false,
        // 是否开启相册
        enableAlbum: true
      };

      // 调用默认扫描界面扫描
      scanBarcode.startScanForResult(this.context, options)
        .then((result: scanBarcode.ScanResult) => {
          LogUtil.d('startScanForResult: ' + result.originalValue);
          resolve(result.originalValue);

        }).catch((error: BusinessError) => {
          let result = `error ${error.code}: ${error.message}`
          LogUtil.e(result);
          reject(result)
        })
    });
  }

比较简单，没什么好说的。

相册选取图片和视频

刚搞鸿蒙，我们APP都是用的最简单的API，相册选取也是用的系统的，下面看下选一张图片的用法:

  openGallery(): Promise<string> {
    return new Promise((resolve, reject) => {
      // 图片控制参数
      let options = new filePicker.PhotoSelectOptions()
      options.MIMEType = filePicker.PhotoViewMIMETypes.IMAGE_TYPE
      options.maxSelectNumber = 1
      
      let photoPicker = new filePicker.PhotoViewPicker()
      photoPicker.select(options)
        .then((PhotoSelectResult: filePicker.PhotoSelectResult) => {
          // file://media/Photo/2/IMG_1713776063_001/screenshot_20240422_165243.jpg
          if (PhotoSelectResult.photoUris.length > 0) {
            resolve(PhotoSelectResult.photoUris[0])
          }
        }).catch((err: BusinessError) => {
          reject(err.message)
        })
    });
  }

如果想要选选视频，或者视频混合图片，改MIMEType就行了:

options.MIMEType = filePicker.PhotoViewMIMETypes.IMAGE_TYPE
options.MIMEType = filePicker.PhotoViewMIMETypes.VIDEO_TYPE
options.MIMEType = filePicker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE

有个要注意的地方就是选到的图片是一个数组类型，好像配合JSON.stringify的时候，一张图片会去掉数组括号。

ps.代码更新，用photoAccessHelper去选取图片

/**
 * 打开相册选取图片、视频
 *
 * @param options 控制参数
 * @param onSuccess 成功回调
 * @param onFailed 失败回调
 */
async openGallery(
  options: photoAccessHelper.PhotoSelectOptions,
  onSuccess: (uris: Array<string>)=> void,
  onFailed: (error: string)=>void
) {
  try {
    // let options = new filePicker.PhotoSelectOptions()
    // options.MIMEType = filePicker.PhotoViewMIMETypes.IMAGE_TYPE
    // options.maxSelectNumber = 1
    let photoPicker = new photoAccessHelper.PhotoViewPicker()
    photoPicker.select(options)
      .then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        //file://media/Photo/2/IMG_1713776063_001/screenshot_20240422_165243.jpg
        if (PhotoSelectResult.photoUris.length > 0) {
          onSuccess(PhotoSelectResult.photoUris)
        }
      }).catch((err: BusinessError) => {
        onFailed(err.message)
      })
  } catch (error) {
    let err: BusinessError = error as BusinessError
    onFailed(err.message)
  }
}

拍照与录像

拍照和录像功能和上面类似，通过设置types来配置，代码如下:

  async openCamerad(context: Context): Promise<string> {
    return new Promise(async (resolve, reject) => {
      try {
        let profile: cameraPicker.PickerProfile = {
          // 摄像头方向
          cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
          // 时长
          videoDuration: 300
        }

        let types = [
          cameraPicker.PickerMediaType.PHOTO,
          cameraPicker.PickerMediaType.VIDEO
        ]

        // 相机拍照
        let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(context, types, profile);
        if (pickerResult) {
          resolve(pickerResult.resultUri);
        }
      } catch (error) {
        let err = error as BusinessError
        reject(err.message);
      }
    });
  }

这里的async用来标记异步方法，await是同步加载一个方法，如果返回的是Promise可以直接拿到结果，说实话用起来还不错。

小结

简单记录了下鸿蒙里面二维码和多媒体的使用，比较简单，基本就是在官方文档上加了层封装。