lev

Rendering Live Photos in Vue

2 min#Vue
On this page
  1. Introduction
  2. Exploring LivePhoto
  3. Using LivePhoto in Vue
  4. Conclusion

Introduction

I recently took some Live Photos with an iPhone and discovered a very interesting feature, LivePhoto, which can turn a photo into a short video. Wouldn’t it be interesting to bring this feature into the LifePalette-Web project?

Exploring LivePhoto

There are very few articles online about implementing LivePhoto with Vue. While researching the topic, I found that Apple provides an official js library for LivePhoto, LivePhotoKit. It can help us render LivePhoto, so I tried using this library to implement the rendering.

The official demo shows that a Live Photo actually consists of two parts: an image and a video. The image and video are paired one-to-one. We can specify their URLs with data-photo-src and data-video-src to render the Live Photo.

Using LivePhoto in Vue

Apple provides the livephotoskit.js library, which we can install with npm:


pnpm install livephotoskit

Implementation:


<script setup>
import * as LivePhotosKit from 'livephotoskit'

const livePhotoRef = ref()
const fileInfo = {
    src: 'https://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965193523.JPEG',
    videoSrc: 'https://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965199299.MOV',
}

async function initLivePhoto() {
    await nextTick()
    const player = LivePhotosKit.Player(livePhotoRef.value)
    player.photoSrc = fileInfo.src
    player.videoSrc = fileInfo.videoSrc
}

onMounted(() => {
    initLivePhoto()
})
</script>

<template>
    <div ref="livePhotoRef" class="w-100 h-100" />
</template>
<style lang="less" scoped></style>

Conclusion

Through this exploration, we successfully implemented LivePhoto rendering. This feature can make our project more engaging. If you are also interested in it, give it a try.

Project: LifePalette-Web

Preview: LifePalette-Web