探索纯前端实现实时的视频帧预览

这篇文章主要记录了我探索纯前端实现实时的视频帧预览的过程，并且总结我是如何利用 WebAssembly，将 FFmpeg 的视频处理能力带到 Web 平台中的。 文章中至少给出了以下问题的答案：

• 如何使用 FFmepg 生成视频缩略拼图？包含 FFmpeg 是什么？
• 如何使用 WebAssembly 移植 C 程序到浏览器中？
• 如何在浏览器中解析 mp4 文件以获取其中某一帧的字节数据？
• 如何发送 HTTP 范围请求？

文章的大纲：

• 什么是视频帧预览？
• 常见的实现方式
• 进阶的实现
• 最终的实现
• 总结

探索意味着前方都是未知的事物，希望这篇文章能够带着读者，一起回顾我探索的过程，同时学习遇到的种种未知的事物。现在开始吧。

什么是视频帧预览？

在一些视频点播网站的视频播放界面，用户将鼠标移动到进度条上时，会弹出一个浮窗并展示了一张图片，意在告诉用户这张图片是鼠标所在位置的时间点对应的视频画面。而且目前的实现，用户体验是足够好的，预览图出现的速度非常快，而且不同时间范围展示的也是不同的画面，达到模拟实时预览的效果，如图：

这样的视频画面预览功能，我把它称为视频帧预览。而我要探索的，就是如何通过前端技术来实现视频帧预览中的每一个环节，并且实现真正的实时预览。在探索之前，先来了解一下目前常见的实现方式。

常见的实现方式

通过翻看各大视频网站，发现弹窗中的画面一般是一张背景图片，打开背景图片的链接看到的是一张视频缩略拼图。打开 Chrome 浏览器 DevTools 的 Elements 面板，可以看到：

将链接打开是这样一幅图：

可以看出这张图是由视频中不同画面的缩略图拼接而成的，我将它称为视频缩略拼图。那么，这样的拼图又是如何生成的？其中一个方法是使用 FFmpeg。

FFmpeg 是一个非常强大的音视频处理工具，它的官网是这么介绍的：

注：一个用于录制，转换，流式传输音视频的完整的跨平台解决方案。

我写了一个 C 应用程序，实现了如何使用 FFmpeg 生成视频缩略拼图。它接收一个视频文件路径作为参数，获取到参数后，使用 FFmpeg 的方法读取视频文件并经过一系列步骤（解复用 -> 帧解码 -> 帧转码… ）处理之后，会在当前目录生成一张拼图。 总结了一下程序逻辑执行的步骤：

1. 初始化输入：这一步主要做了一些初始化的工作，比如获取入参、读取视频文件、初始化必要的对象并分配内存等；
2. 初始化解码器：获取适合视频文件的解码器并打开它；
3. 按指定的间隔时间读取视频帧数据：根据入参指定的间隔时间，从视频文件中读取帧数据；
4. 按指定的列数排列数据：根据入参指定的拼图每行包含的图片数，排列解码后的帧数据；
5. 生成拼图文件：将排列好的拼图的字节序列写入图片文件中。

以上是生成视频缩略拼图程序逻辑执行的步骤。因为这部分与这篇文章的主题无关，所以就不贴代码了。感兴趣的同学可以前往 GitHub - VVangChen/video-thumbnail-sprite 查看完整源码，也可以下载可执行文件在本地运行。

进阶的实现方式

上面讲到了如何使用 FFmpeg 生成视频缩略拼图，接下来向探索的目标再进一步。在常见的实现方式中，最重要的一环就是生成视频缩略拼图，那么能不能将这最重要的一环在浏览器中实现呢？答案是肯定的，并且应该能联想到最近比较火热的 WebAssembly，因为它就是为此而生。

WebAssembly，是一门被设计成可以运行在浏览器中的编译目标语言，意在通过移植将原生应用的能力带到浏览器中。如果想要了解更多，可以浏览它的官网WebAssembly 或者前往