MENU

LivePhotoKit JS 测试

• July 11, 2019 • Read: 233 • 日常,Codes

先说几句

Hello,大家好我是Hran的好朋友C0lacan::quyin:1huaji::

你们可能不认识我;其实我是群里资深潜水小透明哦
这篇文章是在这里首发,特意放到Hran的博客里来透透气

后补几句

花了点时间调教了下JS,发现能修的BUG就那么几个….
苹果的这套Kit从设计和实现原理上就锁死了他的效果必定贼差就对了。

再唠叨下

妹子是我的,你们不要抢

再看效果

Bug警告:可能会出现无法播放的情况,在苹果咖喱里属正常现象,请刷新即可。

LIVE

LONG EXPOSURE

LOOP

简介LivePhotoKit

苹果为了推销自家的LivePhoto,推出了比较 完整的LivePhotoKit和文档给开发者适配。当然,这也包括了在网页端使用的LivePhotoKit JS

实现LivePhotoKit

本来以为苹果会想出什么高端的实现方法,结果在debug手机端的时候,发现苹果的功力也不过如此。两个Canvas互相交换显示,前台的JPG做一个Canvas,后台的MOV切帧做一个Canvas。听起来没啥毛病,但是现在的实现方式就是灾难。

使用LivePhotoKit

Apple的代码和文档写的是真的狗屎啊,错误代码是一点都不给提示的
Live Photo Kit支持JS appendChild和Pre-existing两种方式触发,你也可以通过addEventListener来监听Live Photo事件,并使用Player Instance来操作。
代码呢,随便写写就好了。

'use strict';

let livePhotos = document.getElementsByClassName('live-photo');
for(let i = 0; i < livePhotos.length; ++i){
    let e = livePhotos[i];
    LivePhotosKit.createPlayer(e);
}

需要注意的是,有些博客开启了pjax加载,可能需要在文章刷新后重新执行一遍。

坑比LivePhotoKit

导出Live Photo

Mac下Photos默认导出Live Photo是HEIC图片和MOV视频。
而现在没有浏览器支持HEIC图片的显示,连苹果自家macOS10.15 Safari13都不支持。

Screen Shot 2019-07-03

在文档里连提都没提,用户必须得先倒出无损,再倒出JPG,才能进行下一步。

LivePhotoKit JS限制

不仅限制.mov文件,还限制Content-Type,除了video/quicktime以外,啥都不接受,直接报错。

CORS配置

可能对本地加载的娃们没啥可怕的,但是对使用CDN和分布式部署的小伙伴们可能就比较麻烦了。因为JS要对mov进行解析,所以必须打开CDN的CORS配置并添加相应的配置

20190703-152104@2x.png

非Safari下的codec支持

开发的时候一直是在Safari下做的,测试的时候放到Chrome里看了下竟然报错了。
一直以为Chrome不支持.mov文件,逐放弃。后来去看了Apple官方给的例子,发现竟然能正常使用。
把例子里的.mov和我导出的做了对比,发现自己的codec是HEVC,而例子里的是H.264。

20190703-013059@2x.png

行吧,毕竟HEVC是iOS11推出的功能,iOS10时代还没有这个东西呢。
而且HEVC需要系统解码器。作为非系统应用的Chrome此时哭出了声。

Screen Shot 2019-07-03 at 15.28.57.png

用ffmpeg把视频重新转码为H.264,放到Chrome 里测试,终于能解析了。

性能废物,手机爆炸

费死劲一个个坑都踩了一遍后,电脑上终于能正常的加载并播放了。
开始测试手机上的浏览器。然后,整个Live Photo图没了…

IMG_76EE3EBE6CC5-1.jpeg

插上电脑直接Safari Debug,打开控制台,冒出一句:”wdnmd…”

Screen Shot 2019-07-03 at 17.01.58.png

LivePhotoKit JS直接把iOS Safari上的Canvas内存限制艹爆了,两张图超过了288MB。
而组成Live Photo的两个文件的大小加起来不超过10MB。
苹果是怎么做到的呢….

Screen Shot 2019-07-03 at 17.26.08.png

先来个图片大小的Canvas背景,内存?关我屁事。

Screen Shot 2019-07-03 at 17.29.23.png

再来个图片,内存?随便用。

Screen Shot 2019-07-03 at 17.29.47.png

反正没人用,直接视频切帧,每一帧建个画布就好了。
有时候咖喱味代码就是这么的出人意料呢。
解决起来倒是简单,图片压缩到1008 × 1344,视频拿ffmpeg压缩到720 × 960。
终于,把所有的坑都踩完了。

后续

本文只是记载了简单的开发+熟悉Kit的使用,后期的Typecho插件开发可能要交给Hran来做,毕竟我还是太懒了。

Last Modified: July 17, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

7 Comments
  1. 等一个插件@(阴险)

  2. 是干货呀。。。支持

  3. 咖喱味超重,阿三毁灭世界

  4. 前排支持.
    livephoto的确一直不温不火.
    别说web端了,手机上还很多人不知道呢.

  5. 这个是大神级别的,不过我觉得还不如直接放mp4得了,现在的效果也是一开始就加载,只是没播放而已。

    1. @心灵博客666@(笑尿)