js实现封装MP4格式文件并下载

最新推荐文章于 2024-07-30 20:29:43 发布

weixin_33832340

最新推荐文章于 2024-07-30 20:29:43 发布

阅读量7.1k

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5b016ca36fb9a07aad17cd13

版权

本文介绍了如何使用javascript实现MP4文件的封装，讲解了MP4的box结构，包括FTYP、MDAT、MOOV等box，并提供了实例分析，特别讨论了在文件中存储和定位媒体数据的方法，以及在编码过程中遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

注：基于bilibili的FLV.js实现

flv.js的github地址：github.com/Bilibili/fl…

MP4文件格式

综述

在MP4文件格式中，整个视频容器都是由多个box和子box组成，根据box类型主要分为3大类：视频类型（ftyp）、视频数据（mdat）、视频信息（moov）。视频信息（moov）用来描述视频数据（mdat）。（注：还有一个主要box为moof box，因这里仅解释普通MP4格式数据，moof box仅在流式MP4中使用。在流式MP4格式中，box排序、相同box的box body内容格式与普通MP4不一样，详情参见扩展）

视频参数（moov）中主要的子box 为track，每个track都是一个随时间变化的媒体序列，时间单位为一个sample，可以是一帧数据，或者音频（注意，一帧音频可以分解成多个音频sample，所以音频一般用sample作为单位，而不用帧）。Sample按照事件顺序排列。track里面的每个sample通过引用关联到一个sample description。这个sample descriptios定义了怎样解码这个sample，例如使用的压缩算法。（注：在目前的使用中，该值为1）

注：该文主要介绍普通mp4文件类型

MP4.box

在Javascript中，Mp4 的所有box全部由通过new Uint8Array() 实现。

box前8位为预留位，这8位中前4位为数据size，当size值为0时，表示该box为文件的最后一个box（仅存在于mdat box中），当size值为1时，表示该box的size为large size（8位），真正的box size要在largesize中得到（同样仅存在于mdat box中）。后4位为前面box type的Unicode编码。当type是uuid时，代表Box中的数据是用户自定义扩展类型。

Box由header和body组成，以32位的4字节整数存储方式存储到内存，开头4个字节（32位）为box size，后面紧跟的4位为box的类型。Box body可以由数据组成，也可以由子box组成。

一个box的结构如下：

视频与音频的参数不一样，一般情况下一个MP4文件区分为2个trak，一个为video trak，另一个是audio trak。每个track都有trakId，视频的trakId为1，音频的trakId为2。

整个MP4文件格式如下图

FTYP box

Ftypbox 是一个由四个字符组成的码字，用来表示编码类型、兼容协议或者媒体文件的用途。

在普通MP4文件中，ftyp box有且仅有一个，在文件的开始位置。

通过MP4reader工具，可以看出ftyp box的结构

Box size（4字节）：0x00000024：box的长度是36字节；

Boxt type（4字节）：0x66747970：“ftyp”的ASCII码，box的类型；

major_brand（4字节）：0x69736f6d：“isom“的ASCII码；

minor_version（4字节）：0x00000200：isom的版本号；

compatible_brands（12字节）：说明该文件兼容isom, iso2, avc1, mp41 四种协议。

Ftyp更多兼容协议： www.ftyps.com/

Mdat box

Mdat box 中包含了MP4文件的媒体数据，在文件中的位置可以在moov的前面，也可以在moov的后面，因我们这里用到MP4文件格式用来写mp4文件，需要计算每一帧媒体数据在文件中的偏移量，为了方便计算，mdat放置moov前面。

Mdat box数据格式单一，无子box。主要分为box header 和box body，box header中存放box size 和box type（mdat），box body中存放所有媒体数据，媒体数据以sample为数据单元。

这里使用时，视频数据中，每一个sample是一个视频帧，存放sample时，需要根据帧数据类型进行拼帧处理后存放。

H.264视频帧数据类型如下：

注：1、在目前实现中，I帧数据中暂不包含序列参数集（sps）和图像参数集（pps）。

2、以上帧数据仅针对视频帧数据。

在普通mp4中，在获取数据之前，需要解析每个帧数据所在位置，每个帧数据都存放在mdat中，而这些帧的信息全部存放在stbl box 中，所以，若要mp4文件能够正常播放，需要在写mp4文件时，将所有的帧数据信息写入 stbl box中。

Mdat box中，可能会使用到box的large size，当数据足够大，无法用4个字节来描述时，便会使用到large size。在读取MP4文件时，当mdat box的size位为1时，真正的box size在large size中，同样在写mp4文件时，若需要large size，需要将box size位配置为1。

Moov box

Moov box中存放着媒体信息，上面提到的stbl里存放帧信息，属于媒体信息，也在moov box里。Moov box 用来描述媒体数据。

Moov box 主要包含 mvhd、trak、mvex三种子box。

Mvhd box

Mvhd box定义了整个文件的特性

字段	长度(字节)	描述
尺寸	4	这个movie header atom的字节数
类型	4	Mvhd
版本	1	这个movie header atom的版本
标志	3	扩展的movie header标志，这里为0
生成时间	4	Movie atom的起始时间。基准时间是1904-1-1 0:00 AM
修订时间	4	Movie atom的修订时间。基准时间是1904-1-1 0:00 AM
Time scale	4	本文件的所有时间描述所采用的单位
Duration	4	媒体可播放时长
播放速度	4	播放此movie的速度。1.0为正常播放速度
播放音量	2