前言
随着直播和视频业务的快速发展，前端播放器的需求越来越多。而在视频播放的过程中，往往需要将 FLV 格式的视频流转换为 MP4 格式的视频流。在这种情况下，我们可以使用 chimee-flv2fmp4 这个 npm 包来实现。
chimee-flv2fmp4 是一款基于浏览器端的 flv 转换 fmp4 的工具库，是由 Chimee 团队开发维护的一个 npm 包。它采用了一些非常新颖的浏览器端技术，可以实现极佳的 flv 转码效果。
chimee-flv2fmp4 安装
我们可以通过 npm 安装 chimee-flv2fmp4：
npm install chimee-flv2fmp4
chimee-flv2fmp4 使用
在使用 chimee-flv2fmp4 之前，我们需要先了解一些相关的概念。
FLV 格式
FLV 格式是一种由 Adobe 公司推出的流式视频文件格式，适用于在互联网上进行流式视频传输的场景下。FLV 文件通常包含包含音频和视频数据，以及一些嵌入式事件标记。
MP4 格式
MP4 格式是一种由国际标准化组织 ISO（International Organisation for Standarization）所制定的音视频编码标准，适用于高清视频、蓝光电影等高质量视频播放场景。MP4 通常是视频文件的最终输出格式。
chimee-flv2fmp4 实现
chimee-flv2fmp4 实现了一个完整的 FLV 格式的视频流解析器，以及一个完整的 MP4 格式的视频流生成器。在转换 FLV 到 MP4 的过程中， chimee-flv2fmp4 会将 FLV 视频流解析成音频和视频流，并通过浏览器的 MSE（Media Source Extensions）技术将 FLV 视频流转换为 MP4 视频流。
接下来我们来详细了解 chimee-flv2fmp4 的使用。
引入 chimee-flv2fmp4
首先，我们需要在代码中引入 chimee-flv2fmp4：
import { transmux } from 'chimee-flv2fmp4';解析 FLV 格式的视频流
接着，我们需要为 FLV 格式的视频流添加一个 data 事件监听器，并在回调函数中进行视频流解析。
我们可以使用以下代码来实现：
const flvDecoder = new transmux.FlvDecoder();
flvDecoder.on('data', (data) => {
// 解析 FLV 格式的视频流
});在上面的代码中，我们首先创建了一个 FlvDecoder 实例，然后为实例添加 data 事件的监听器。在回调函数中，我们可以获取到解析后的音频和视频流。
转换 FLV 格式的视频流为 MP4 格式
接着，我们可以使用 Transmuxer 类将 FLV 格式的视频流转换为 MP4 格式的视频流。在转换过程中，我们同样需要为转换器添加一个 data 事件监听器，并在回调函数中获取转换后的视频流。
我们可以使用如下代码实现：
const transmuxer = new transmux.Transmuxer();
transmuxer.on('data', (data) => {
// 解析 MP4 格式的视频流
});
transmuxer.push(data);在上述代码中，我们首先创建了一个 Transmuxer 实例，并为其添加了 data 事件监听器。在监听器回调函数中，我们可以获取到转换后的 MP4 格式的视频流。
最后，我们通过调用 Transmuxer 实例的 push 方法传递 FLV 格式的视频流即可将其转换为 MP4 格式的视频流。
示例代码
下面是一个完整的示例代码，其中包含了 chimee-flv2fmp4 的使用示例：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
----- --------- - --- ---------------------------------------------
----- ---------- - --- ----------------------
----- ---------- - --- ----------------------
------------------- - ------- -- -
-- ------------ -
------------------------------------
-
--
--------------------- ------ -- -
----------------------
---
--------------------- ------ -- -
-- ------ --- ----------
---
------------------------------- ------在上述代码中，我们首先创建了一个 EventSource 实例，用于向服务器请求 FLV 格式的视频流。
然后，我们创建了一个 FlvDecoder 实例和一个 Transmuxer 实例。在接收到视频流后，我们在 FlvDecoder 实例中解析 FLV 格式的视频流，并将解析后的音频和视频流传递给 Transmuxer 实例进行转换。在转换完成后，我们可以使用转换后的 MP4 格式的视频流进行播放。
通过以上代码，我们可以快速上手 chimee-flv2fmp4，对于我们实现前端视频播放业务中的 FLV 格式转换 MP4 格式有很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef73bcc403f2923b035b90c