目录
1. 背景
2. 实现方案
2.1 TikTok:
2.2 YouTube ：
2.3 Facebook ：
3. 其它问题
3.1 TikTok短链无法获取embed信息
3.2 TikTok缩略图过期
3.3 Facebook视频过期
4. 参考资料
1. 背景
最近在做即时通信IM相关的内容，有一个需求是分享链接的结构化展示，就是当用户发一条URL链接的时候，解析出URL的大概信息并展示出来。如下图，我在slack平台上发一条链接:
https://www.facebook.com/watch/live?ref=watch_permalink&v=556810805847482
发出去之后会展示下面这样，相当于链接所指页面的预览。如果不解析的话，消息就是一条普通文本，如图2：
图1. 结构化消息
图2. 普通文本消息
显然，结构化消息展示的信息更全面、更丰富，用户无需点击链接跳转就能够知道链接的内容。
我们业务的需求是解析TikTok、Facebook、YouTube 三家的链接，经过一番调研之后，找到了两种实现方案：
方案1：调用平台的开发者接口获取embed信息展示。
方案2： 爬取链接页面的OG标签对应信息来展示。
2. 实现方案
在介绍方案具体实现之前，可以先看下效果：
TikTok效果图：
图3. Tik Tok链接
Facebook效果图：
图4. Facebook 链接
YouTube效果图
图5. YouTube 链接
下面详细介绍下这三个平台的具体实现方案：
2.1 TikTok
TikTok 链接结构化信息是通过请求TikTok开发者平台API接口获取，接口比较简单，将TikTok链接当做参数传入，可以拿到链接类型、标题、作者名，embed html、缩略图、缩略图宽高等。
图5. TikTok 开发者平台
使用Postman请求接口:
图6. Postman请求Tiktok api
2.2 YouTube
YouTube 的结构化信息获取和TikTok类似，都是调用开发者api获取的。这里我实现的方案是先获取链接里的视频ID，然后再调用YouTubeAPI获取视频信息，如图7所示，通过video api可以拿到视频的title、description、channel title、缩略图以及宽高、embed html。另外为了拿到发布者的头像，还额外调用了channel 的api 获取channel信息。另外YouTube api调用需要申请开发者账号，使用账号新建应用，然后将应用的key当做api传参传入。
图7. YouTube api
// youtube api
https://developers.google.com/youtube/v3/docs/videos/list
2.3 Facebook
和YouTube一样，Facebook也有自己的开发者平台，也提供了api获取embed信息，只不过这个api需要审核，考虑到审核的时间成本以及复杂度，我使用了另外一种方案来获取URL链接结构化信息，即OG标签，og标签指的是html head头域里面的og标签，实际上还有个OG协议，这个协议是由facebook于2010年提出的，专门用于分享链接的结构化展示，关于og协议说明，可以参考这个链接，下图8是我使用Postman 发送http Get请求返回的html文档，可以看到http头域中有og:title, og:description, og:url、og:image、og:video等，在代码里使用了开源的golang colly爬虫爬取页面信息。
图8. Facebook 请求
图9. Golang Colly 爬取页面
3. 其它问题
3.1 TikTok短链无法获取embed信息
TikTok链接分为两种，一种是短链另一种长链
短链：
https://vt.tiktok.com/ZSRdf9w6k/
长链：
https://www.tiktok.com/@lolies_haven/video/7117150232458038530?enter_from=video_detail%26is_copy_url=1%26is_from_webapp=v1
使用短链请求emebed信息会提示错误 ：
图10. TikTok短链请求报错
我这里的处理方案是先通过http请求短链，在http响应头域中拿到Location地址，然后根据这个重定向地址去请求emebed信息。
3.2 TikTok缩略图过期
通过TikTok api 获取的缩略图是带有过期时间的，过期后就无法打开，如下图11，针对这种情况，我的处理方案是转存图片，通过TikTok API拿到缩略图信息后，下载下来转存到我们业务自己的存储上，然后提供自己的访问URL来避免图片过期问题。
图11. TikTok缩略图过期
3.3 Facebook视频过期
和TikTok缩略图过期类似，Facebook og:video也有过期时间，针对这种场景就没办法转存了，这里我们业务的处理方案是当用户点击播放按钮的时候，前端会调后台接口获取最新的播放链接从而规避这个问题。
4. 参考资料：
1. 前端应该知道的：开放图谱协议（The Open Graph protocol）
2. TikTok embed api
3. YouTube video api
