【青训营】Web多媒体入门

友艺
340 阅读6分钟

这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战

授课老师：刘立国

目录：

  1. Web多媒体历史
  2. 基础知识
  3. 应用场景
  4. 总结与展望

01. Web多媒体历史

  1. Flash
  2. HTML5
  3. Media Source Extensions

这里推荐一篇很nice的文章：Flash的兴衰史&HTML5的崛起

个人小结：

  • 07年的flash辉煌，只因移动端苹果的一道政策，便彻底终结了...
    1. flash 性能问题
    2. 代码混乱，积重难返。
  • 15年HTML5崛起：浏览器无需安装插件即可播放视频。
  • 媒体源扩展（MSE）：下个时代的主流。（但是好像没那么便捷。）

02. 基础知识

01. 编码格式

图像基本概念

  • 图像分辨率: 用于确定组成一副图像的像素数据， 就是指在水平和垂直方向.上图像所具有的像素个数。
  • 图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个 ;一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

视频基本概念

  • 分辨率:每一帧的图像分辨率（视频每帧的分辨率相同。）
  • 帧率:视频单位时间内包含的视频帧的数量（25-30）
  • 码率:就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。（码率也决定视频的大小。）

编码格式

帧的分类：I帧,P帧,B帧

image.png

  • I帧：不依赖于其他的帧。
  • P帧：前向依赖解码帧。依赖于前向的帧。
  • B帧：全向依赖解码帧，不止是依赖前面的，还依赖后面的。

image.png

GOP （group of picture）

两个I帧之间的间隔

image.png

为什么要编码？

I帧只需考虑本帧；P帧记录的是与前一帧的差别；B帧记录的是前一帧及后一帧的差别,能节约更多的空间,视频文件小了,但相对来说解码的时候就比较麻烦。因为在解码时,不仅要用之前缓存的画面,而且要知道下一个I或者P的画面,对于不支持B帧解码的播放器容易卡顿。

视频监控系统中预览的视频画面是实时的，对画面的流畅性要求较高。采用I帧、P帧进行视频传输可以提高网络的适应能力，且能降低解码成本所以现阶段的视频解码都只采用I帧和P帧进行传输。

以一个分辨率: 1920 X 1080 的照片为例： 大小: 1920 X 1080 X 24 / 8 = 6220800Byte = 5.9M 如果换算成视频： 帧率: 30FPS 时长: 90分钟 大小: 933G

  • 空间冗余：一片蓝天的照片，许多个像素点都是蓝色。
  • 时间冗余：第N帧和第N+1帧99%的内容一样。
  • 编码冗余：图片只有两种颜色，一蓝一白。如果用RGB需要64位，如果用1表示蓝色，0表示白色只需要2位。
  • 视觉冗余：人的眼睛对高频内容不敏感。1万个像素和10万个像素效果相似。

编码数据处理流程：

image.png

image.png

谷歌自己弄了VP9 VP10，后面联合AOM和微软推出AV1，国内AVS。

02. 封装格式

封装格式:存储音视频、图片或者字幕信息的一种容器

便于存储，传输。

image.png

03. 多媒体元素 和扩展API

H5多媒体的元素

  • video

image.png 利用source

  • audio

image.png

<audio>和<video>的元素方法 image.png

image.png

image.png

image.png

还有一些元素事件，可以通过增加事件监听来触发回调。

image.png

比如通过检测canplay状态，从而获取视频的时长。

myVideo.addEventListener('canplay',function(){
    console.log(myVideo.duration);
})

<audio>和<video>元素缺陷

  • 不支持直接播放hls、flv等
  • 视频格式视频资源的请求和加载无法通过代码控制。
    • 分段加载(节约流量)
    • 清晰度无缝切换
    • 精确预加载

MSE

媒体源扩展API (Media Source Extensions)无插件在web端播放流媒体支持播放hls、flv、 mp4等格式视频可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等。

我们可以把通常的单个媒体文件的 src 值替换成用 MediaSource 对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个 SourceBuffer 对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。

（除了Safari,其余主流浏览器都开始支持该特性。)

创建过程

  1. 创建mediaSource实例
  2. 创建指向mediaSource的URL
  3. 监听sourceopen事件
  4. 创建sourceBuffer
  5. 向sourceBuffer中加入数据
  6. 监听updateend事件

image.png

MSE播放流程：

image.png

播放器的播放流程：加载不同格式的数据后重新封装，最后根据时间戳同步音频和视频的流并渲染。

image.png

mp4 和 fmp4的文件 moov：封装信息。fmp4有多个moof。 moov，moof，mdat是3大主要Box。

image.png

moov定义了一个MP4文件中的数据信息（主要），类型是moov，是一个容器Atom，其至少必须包含三种Atom中的一种：mvhd标签、cmov标签、rmra标签。

可能你会很疑惑，不过没关系（我也疑惑），现在只需要这么理解：moov是一个box，它不NB，NB的是它里面存储的内容。它只是说：“xdm注意了，我后面跟着的都是你们要看的视频内容~”

04. 流媒体协议

Web端常见的协议为前三个，最后一个是flash时代的。

image.png

HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。

03. 应用场景

image.png

云游戏：不是将场景封装在客户端安装包里面的，是服务器端渲染的场景后将数据传输给客户端。

直播/点播的文件区别：MP4文件并不是流式文件，它的诞生有很强的时代背景，在如今流式文件满天飞的时代，MP4是不能作为直播的封装格式存在的。

04. 总结与展望

新技术标准：

  • Webassembly：实现265解码
  • WebCodecs：W3C提出的标准，修改对音视频解码
  • WebGPU：第二代的WebGL。底层的GPU操作能力。
  • WebVR、WebXR

一项技术总会被淘汰，如果不能跟上时代的步伐，只会淘汰得更快。不断更新迭代，才能常青。

Q： 为什么网上说APNG能取代GIF，但是现在GIF还是很流行？

A： APNG和GIF的兼容性，如果要使用APNG，需要先判断浏览器能用的格式且需要前后端配合。如果用户浏览器只能使用GIF，那么后端就返回GIF的资源。

avatar
文章
阅读
粉丝