Web多媒体 | 青训营笔记

74 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第15天。

基础知识

编码格式

图像基本概念

图像分辨率: 水平和垂直方向上图像所具有的像素个数

图像深度: 存储每个像素所需要的比特数

视频基本概念

分辨率: 每一帧的图像分辨率

帧率: 视频单位时间内包含的视频帧的数量

码率: 视频单位时间内传输的数据量

为什么要编码

空间冗余、时间冗余、编码冗余、视觉冗余

编码数据处理过程

预测(去除时间、空间冗余) ——> 变换(去除空间冗余) ——> 量化(去除视觉冗余) ——> 熵编码(去除编码冗余)

封装格式

存储音视频、图片或者字幕信息的一种容器。

image.png

多媒体元素和扩展API

<video>元素

<audio>元素

缺陷:

  1. 不支持直接播放hls、flv等视频格式
  2. 视频资源的请求和加载无法通过代码控制

MSE(Media Source Extensions)

即媒体源扩展,可以理解为一种API,其提供了实现无插件且基于 Web 的流媒体的功能。通过 MSE,媒体串流能够通过 JavaScript 创建,并且可以使用 HTML5 的 <audio><video> 标签进行播放。

  1. 无插件在web端播放流媒体
  2. 支持播放hls、flv、mp4等格式视频
  3. 可实现视频分段加载、清晰度无缝切换、自适应编码、精确预加载

播放器播放流程

数据预加载 ——> 解封装(音频裸流、视频裸流) ——> 重封装 ——> appendBuffer ——> 解码渲染 ——> 音视频同步(时间戳)

流媒体协议

image.png

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

应用场景

Web多媒体技术可以应用于点播、直播、图片、云游戏、实时通信、视频剪辑等方向。

新技术标准

Webassembly

WebCodecs

WebGPU

WebVR、WebXR