实现拍照、录音功能鸿蒙示例代码

鸿蒙场景化示例代码技术工程师

发布于 2025-3-18 16:12

浏览

0收藏

本文原创发布在华为开发者社区。

介绍

本示例演示如何使用Web组件拍照和录音。

web拉起系统相机拍照，并返回base64数据给web页面。
web调用麦克风录音，并保持录音文件到指定沙箱目录。

实现拍照、录音功能源码链接

效果预览

实现拍照、录音功能鸿蒙示例代码-鸿蒙开发者社区

使用说明

web调用相机拍照：
1. 打开应用后，点击“拍照按钮”
2. 在拉起的系统相机中进行拍照
3. 拍照完成后web网页会获取到base64数据
web调用麦克风录音：
1. 打开应用后，点击“开始录音”
2. 一段时间后，点击“结束录音”
3. 录音完成后录音文件保存在沙箱目录下，文件名为Audio_录音时间.mp4

实现思路

web调用相机拍照

点击拍照按钮后，应用通过@ohos.app.ability.Want接口拉起系统相机进行拍照，并获取图片uri值。通过图片uri值转为ArrayBuff，使用@ohos.file.fs接口读取文件数据，通过Base64Helper接口将文件转化为base64数据返回给web网页。核心代码如下，源码参考

WebPage.ets

async getCamera():Promise<string> {
    let want: Want = {
      action: 'ohos.want.action.imageCapture',
      parameters: {
        // 拍照完成后返回的应用BundleName
        callBundleName: 'com.example.webdemos',
        supportMultiMode: false
      }
    };
    try {
      let result:common.AbilityResult = await this.context.startAbilityForResult(want)

      this.uri = result?.want?.parameters?.resourceUri as string;
    } catch (err) {
      let error = err as BusinessError;
      LoggerUtil.error(`startAbilityForResult failed, err is ${JSON.stringify(error)}`);
    }
    
    if(this.uri !== ''){
      //转为base64
      let base64 = await this.loadImage(this.uri)
      return base64
    }
    return ''
  }
  
async loadImage(uri: string):Promise<string>{
    let f = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);

    let photoSize = fileIo.statSync(f.fd).size;
    LoggerUtil.info('Photo Size: ' + photoSize);
    let buffer = new ArrayBuffer(photoSize);
    fileIo.readSync(f.fd, buffer);
    fileIo.closeSync(f);

    let base64 = new util.Base64Helper(); // 实例化Base64Helper
    let unit8data = base64.encodeSync(new Uint8Array(buffer.slice(0, buffer.byteLength))) // 转换成Uint8Array
    LoggerUtil.info(`data长度:${unit8data.length}`)
    let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM : true })
    let retStr = textDecoder.decodeToString( unit8data , {stream: false}); // 可以把Uint8Array转码成base64
    return retStr;
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

web调用麦克风录音

使用@ohos.multimedia.media接口的AVRecorder方法进行音频录制，调用该方法前，需要先通过createAVRecorder()构建一个AVRecorder实例。使用AVRecorderConfig方法进行音频录制的参数设置，此处为纯音频录制，因此仅需要设置audioSourceType。核心代码如下，源码参考

AudioRecorder.ets

private avConfig: media.AVRecorderConfig = {
    audioSourceType: media.AudioSourceType.AUDIO_SOURCE_TYPE_MIC, // 音频输入源，这里设置为麦克风
    profile: this.avProfile,
    url: '', // 参考应用文件访问与管理开发示例新建并读写一个文件
  };
  textTimerController: TextTimerController = new TextTimerController()
  async startRecordingProcess(firDir:string) {
    this.savDir = firDir
    try {
      if (this.avRecorder == undefined) {
        // 1.创建录制实例
        this.avRecorder = await media.createAVRecorder();
      }
      this.setAudioRecorderCallback();
      // 2.获取录制文件fd赋予avConfig里的url；参考FilePicker文档
      this.curFile = fileIo.openSync(firDir, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
      this.avConfig.url = 'fd://' + this.curFile.fd;
      // 3.配置录制参数完成准备工作
      await this.avRecorder.prepare(this.avConfig);
      // 4.开始录制
      this.textTimerController.start()
      await this.avRecorder.start();
    } catch (err) {
      Logger.info('startRecordingProcess' + JSON.stringify(err))
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.