本文原创发布在华为开发者社区,更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。
介绍
本示例演示如何使用Web组件拍照和录音。
- web拉起系统相机拍照,并返回base64数据给web页面。
- web调用麦克风录音,并保持录音文件到指定沙箱目录。
效果预览
使用说明
web调用相机拍照:
- 打开应用后,点击“拍照按钮”
- 在拉起的系统相机中进行拍照
- 拍照完成后web网页会获取到base64数据
web调用麦克风录音:
- 打开应用后,点击“开始录音”
- 一段时间后,点击“结束录音”
- 录音完成后录音文件保存在沙箱目录下,文件名为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;
}
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))
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。