You need to enable JavaScript to run this app.
导航
LivePhoto 上传加载全链路
最近更新时间:2023.09.20 16:23:44首次发布时间:2023.09.20 16:23:44

您可跟随以下内容在 veImageX 完成 LivePhoto 图像的上传加载的全流程操作,并了解该方案优势以及整体使用流程。

背景信息

Live Photo(实况图片)是 Apple 自 2015 年发布的 iphone 6s 及以上机型原生支持拍摄的一种照片形式,Live Photo 会在按下快门的前后 1.5 秒内对画面和声音进行记录,得到一个时长为 3 秒的小视频,Live Photo 本质为 heic 静图 (部分老机型是 jpeg 静图)+ mov 视频的结合。

相较于原始图像格式具有以下优点:

  • 对比短视频体积更小

  • 对比 gif 动图画质更高

  • 更佳的浏览体验,音画结合可以提供更多信息

  • 用户基于 LivePhoto 可创造出多种花样玩法(如表情包)

方案优势

  • 上传简单:支持 LivePhoto 打包上传,可帮助开发者减少开发量,让开发者专注在核心业务的打造;

  • 支持静图、视频转码:在支持 Live Photo 加载的同时可降低文件体积,节省 livephoto 下行流量成本;

  • 丰富的图像处理能力:支持结合缩放、水印等功能,可提升 Live Photo 观看体验;

  • 灵活满足多种下发场景需求:支持下发原图、原视频、处理后静图和处理后视频;

  • 双端适配:支持 Android 和 iOS 双端展示 Live Photo 效果,解决跨平台无法观看的问题。

整体流程

LivePhoto 上传

由于在 iOS 和 Andriod 下动态图的实现不尽相同,因此 veImageX 定义了 LivePhoto 文件进行统一处理。针对动态图的上传,您需要根据我们提供的工具函数,先将动态图打包成 veImageX 能够识别的 LivePhoto 文件,然后再使用上传 SDK 进行上传,上传完成后通过回调将打包文件删除。

由于安卓下没有动态图的一个标准,各厂商实现方式不尽相同,当前暂未支持安卓下的 LivePhoto 上传。仅 iOS 上传 SDK 支持上传 LivePhoto 文件。

文件打包

iOS 提供了 PHLivePhoto 组件来表示一个动态图,本质上就是一个目录,里面包含各分辨率的图片和视频,您可以基于此对象来提取图片视频来打包成我们所需的 LivePhoto 文件。如图所示,我们提供了以下两种打包方式:

  • 方式一:打包 PHLivePhoto:您可以直接传入 PHLivePhoto 对象,由 veImageX 去获取图片以及视频后打包成所需文件并返回其路径。当其中有多个分辨率文件时,veImageX 会选择分辨率最大的原始资源。

  • 方式二:打包图片和视频:您可以自行解析动态图组件以获取图片和视频所在路径,并给上传 SDK 传入图片和视频路径后打包成所需文件后返回其路径。

文件上传

根据实际需求选取打包方式进行文件打包,获得打包后的文件路径后根据打包文件路径初始化上传 Client,设置回调(完成后删除对应文件),开始上传文件。

LivePhoto 分发

说明

使用 iOS 上传 SDK 上传后的 LivePhoto 文件包含一个 HEIC 格式的图片和一个 MOV 格式的视频。

  • 对于能解码的设备,可以直接下发原始图片和视频进行渲染;
  • 对于不能解码的设备,可以下发转码到 JPEG 的静图以及转码到 MP4 的视频以保证加载正常,或者直接当作一张静图来加载。

由于使用 iOS 上传 SDK 上传后的打包文件是 veImageX 定义的 LivePhoto 文件,并不能够被直接下发加载使用。 所以 veImageX 也提供了提取并转码的能力,您可以使用图片模板进行图片提取转码,以及使用视频模板进行视频提取并转码。您可以根据自身的需要使用不同的模板能力按需下发 URL 进行加载渲染,可满足以下四种需求:

操作步骤

Step 1: 接入 iOS 上传 SDK

  1. 参考集成准备完成 iOS 上传 SDK 的集成。

  2. 参考快速开始完成 SDK 的初始化以及回调等配置。

  3. 参考进阶功能 选择合适的方式打包并上传 LivePhoto 图片。

Step 2:接入图片加载 SDK

您可通过以下版本的客户端加载 SDK 加载 LivePhoto,具体适用版本及接入文档如下所示:

平台版本号接入文档
Android_BDFresco2.3.1-tob 及以上BDFresco 加载 SDK 接入文档
iOS1.38.3.7 及以上iOS 加载 SDK 接入文档

Step 3:配置处理模板

配置模板时,如需对静图/视频进行缩放、裁剪等处理,请确保图片模板与视频模板配置一致,否则可能出现用户观看 Live Photo 时封面图与视频有差异的问题,导致体验下降。

  • 下发原图:请配置原图输出模板,即输出格式选择 image。

  • 下发转码/处理后的结果图:请参考图片处理配置按需配置图像处理模板。