HarmonyOS 鸿蒙Next 通过photoAccessHelper.PhotoViewPicker()拿到的视频，如何获取缩略图，如何预览

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 通过photoAccessHelper.PhotoViewPicker()拿到的视频，如何获取缩略图，如何预览

需要一个demo，拿到可展示的缩略图和可以播放的视频。
下面是我自己的测试代码，异步方法的then和catch都拿不到回调

async getVideoInfoWithUri(){
if (!this.videoUri.length) {
return
}
let context = getContext(this);
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
let fetchOptions: photoAccessHelper.FetchOptions = {
fetchColumns: [this.videoUri],
predicates: predicates
};

phAccessHelper.getAssets(fetchOptions).then(res=>{
res.getFirstObject().then(res=>{
res.getThumbnail().then(res=>{
this.localVideoModel.thumbnail = res
}).catch((reason:BusinessError)=>{
console.log(‘phAccessHelper====getThumbnail====’+JSON.stringify(reason))
})
}).catch((reason:BusinessError)=>{
console.log(‘phAccessHelper====getFirstObject====’+JSON.stringify(reason))
})
}).catch((reason:BusinessError)=>{
console.log(‘phAccessHelper====getAssets====’+JSON.stringify(reason))
})
}

Harmonyos Next教程
2 回复

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/avimagegenerator-V5

import media from '[@ohos](/user/ohos).multimedia.media';
import image from '[@ohos](/user/ohos).multimedia.image';
import { BusinessError } from '[@ohos](/user/ohos).base';
import picker from '[@ohos](/user/ohos).file.picker';
import fs from '[@ohos](/user/ohos).file.fs';
import photoAccessHelper from '[@ohos](/user/ohos).file.photoAccessHelper';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index9 {
 // pixelMap对象声明，用于图片显示
 [@State](/user/State) pixelMap: image.PixelMap | string | undefined = undefined;

 build() {
   Column() {
     Button('select')
     .margin({ top: 20 })
     .width(100)
     .height(40)
     .onClick(() => this.showPicker())

     Image(this.pixelMap)
       .width(300)
       .height(300)
       .margin({ top: 20 })
   }
   .height('100%')
   .width('100%')
 }

 showPicker() {
   // 创建图库选择器对象实例
   const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
   // 图库选项配置，类型与数量
   let selectOptions = new photoAccessHelper.PhotoSelectOptions();
   selectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
   selectOptions.maxSelectNumber = 1;
   //调用select()接口拉起图库界面进行文件选择,文件选择成功后，返回PhotoSelectResult结果集
   photoViewPicker.select(selectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
     //用一个全局变量存储返回的uri
     if (photoSelectResult.photoUris?.[0]) {
       this.testFetchFrameByTime(photoSelectResult.photoUris[0])
     }
   }).catch((err: BusinessError) => {
     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
   })
 }

 async testFetchFrameByTime(filePath:string) {
   // 获取缩略图 async testFetchFrameByTime(filePath: string) {
   // 创建AVImageGenerator对象
   let avImageGenerator: media.AVImageGenerator = await media.createAVImageGenerator()
   let file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
   let avFileDescriptor: media.AVFileDescriptor = {
     fd: file.fd
   };
   avImageGenerator.fdSrc = avFileDescriptor;
   // 初始化入参
   let timeUs = 0
   let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC
   let param: media.PixelMapParams = { width: 300, height: 400, }
   // 获取缩略图（promise模式）
   this.pixelMap = await avImageGenerator.fetchFrameByTime(timeUs, queryOption, param)
   // 释放资源（promise模式）
   avImageGenerator.release()
   console.info(`release success.`)
   fs.closeSync(file);
 }
}

在HarmonyOS鸿蒙Next系统中，通过photoAccessHelper.PhotoViewPicker()获取视频后，要生成缩略图并进行预览，可以按以下步骤操作：

  1. 获取缩略图：

    • 使用BitmapFactory.decodeFile加载视频的第一帧，但这通常需要先从视频中提取帧图像。更简便的方法是使用MediaMetadataRetriever类，它可以用来从视频文件中提取帧图像。
    • 示例代码：
      MediaMetadataRetriever retriever = new MediaMetadataRetriever();
retriever.setDataSource(videoPath);
Bitmap bitmap = retriever.getFrameAtTime(0, MediaMetadataRetriever.OPTION_CLOSEST_SYNC);

  2. 预览视频或缩略图：

    • 使用Image组件显示缩略图，将生成的Bitmap设置给Image组件的source属性。
    • 使用Video组件预览视频，将视频路径设置给Video组件的src属性。

  3. 注意事项：

    • 确保视频路径正确，且视频文件可访问。
    • 处理视频帧提取时，注意性能开销，尤其是在UI线程中。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部