LivePhoto 上传加载全链路

您可跟随以下内容在 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 上传后的打包文件是 veImageX 定义的 LivePhoto 文件，并不能够被直接下发加载使用。 所以 veImageX 也提供了提取并转码的能力，您可以使用图片模板进行图片提取转码，以及使用视频模板进行视频提取并转码。您可以根据自身的需要使用不同的模板能力按需下发 URL 进行加载渲染，可满足以下四种需求：

• 下发原始图片

  可以使用原图的图片模板来直接下发原图，服务端仅从 LivePhoto 中提取图片并返回原图访问 URL。使用原图图片模板并拼接 image 输出格式：http://test.com/test3.jpg~tplv-example-image.image

• 下发原始视频

  可以使用原视频的视频模板来下发原视频，服务仅从 LivePhoto 中提取视频并返回原视频访问 URL。使用原视频的视频模板并拼接 video 输出格式：http://test.com/test3.mov~tplv-example-video.video

• 原始图片转码

  可以使用图片模板来进行图片转码，按需配置图片模板进行处理并转码图片格式。图片模板配置缩放并拼接 webp 输出格式：http://test.com/test3.jpg~tplv-example-resize:1080:0.webp

• 原始视频转码

  说明

  请联系提交工单联系技术支持配置视频模板。

  可以使用视频模板来进行视频转码，当前视频转码是实时转码并流式返回，但是随着原视频的分辨率的增大，首次访问播放的等待时间就会越久。视频模板配置缩放并拼接 mp4 输出格式：http://test.com/test3.mov~tplv-example-vresize:1080:0.mp4

操作步骤

Step 1： 接入 iOS 上传 SDK

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

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

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

Step 2：接入图片加载 SDK

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

Step 3：配置处理模板

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