Live Photos Get Support Now

既然微信都支持 Live Photo 了，为什么我不可以支持？

Apple, 你的 SDK 真的很糟糕 💢

Apple 官方的 Live Photo 的 JS SDK，真的很难用。要不是我先前自己写了一版本 Bugs 一堆，打死我也不用这个破玩意儿！

由于是 Canvas 绘制，为了保证可以根据窗口大小调整尺寸，写了非常多的脏代码

请欣赏：

useEffect(() => {
  const fn = async () => {
    if (!livePhotosKit) {
      livePhotosKit = await import('livephotoskit')
    }
    const container = document.getElementById(id)
    const img = document.getElementById(id + 'img')

    if (!container || !img) {
      return
    }

    const waitImgLoad = new Promise((r) => {
      img.addEventListener('load', r)
    })

    const videoArrayBuff = await fetch(videoSrc).then((res) =>
      res.arrayBuffer(),
    )

    // measure the size of the img
    let { width, height } = img.getBoundingClientRect()
    if (width === 0 || height === 0) {
      await waitImgLoad
      ;({ width, height } = img.getBoundingClientRect())
    }
    ratio.current = width / height
    // hide img
    // img.style.opacity = '0'
    // set the width and height of the container
    container.style.width = `${width}px`
    container.style.height = `${height}px`

    player.current = livePhotosKit.augmentElementAsPlayer(
      document.getElementById(id),
      {
        photoSrc: imgSrc,
        videoMimeType: 'video/mp4',
        videoSrc: videoArrayBuff,
      },
    )

    // measure the width of measure elem when it's size changes, set the size of player
    const observer = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        const { width } = entry.contentRect
        player.current.updateSize(width, width / ratio.current)
      })
    })
    observer.observe(img)

    return () => {
      observer.disconnect()
    }
  }
  fn()
}, [id, imgSrc, videoSrc])

不管怎么样，看看效果吧 😍

看起来还行，就是不知道这玩意儿对我的 OSS 消耗大不大

前两天已经收到欠费警告了！