【第二届字节青训营 - 寒假前端场】「Web 多媒体入门」の学习笔记

Web 多媒体入门

编码格式

图像基本概念:

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

视频的基本概念

视频基本概念

  • 分辨率:每一帧的图像分辨率,单位英寸所包含的像素点
  • 帧率:视频单位时间内包含的视频帧的数量
  • 码率(bps):就是指视频单位时间内传输的数据量,一般我们用kbps来表示,即千位

I帧:帧内编码帧(intra picture),I帧通常是每个GOP的第一帧,经过适度地压缩,作为随机访问的参考点可以当成静态图像。I帧可以看做一个图像经过压缩后的产物,I帧压缩可以得6:1的压缩比而不会产生任何可觉察的模糊现象。

P帧:前向预测编码在帧(predictive-frame),通过将图像序列中前面已编码帧的时间冗余信息去充分去除压缩传输数据量的编码图像,也成为预测帧。

B帧:双向预测内插编码帧(bi-directionalinterpolated prediction frame),既考虑源图像序列前面的已编码帧,又估计源图像序列后面的已编码帧之间的时间冗余信息,来压缩传输数据量的编码图像,也成为双向预测帧。

png

解码时间戳:时间戳的主要目的在于通过一定的技术手段,对数据产生的时间进行认证,从而验证这段数据在产生后是否经过篡改。解码时间戳( DTS )表明访问单元立即拆除,从接收机缓冲区并解码的时间.

PPS ,全称是 Packet Per Second(包 / 秒),表示以网络包为单位的传输速率,一般用来评估系统对于网络的转发能力。

png
GOP(group of picture)策略影响编码质量,所谓GOP,意思是画面组,一个GOP就是一组连续的画面。 GOP是序列中的一个图片集,用来辅助随机存取。 GOP的第一个图像必须为I帧,这样就能保证GOP不需要参考其他图像,可以独立解码。
两个帧之间的间隔,一般为2-4秒。
一个GO解码不依赖其他帧。

被压缩的内容是什么?

空间冗余:同色区域像素重复。同一景物表面上采样点的颜色之间通常存在着空间相关性,相邻各点的取值往往相近或者相同,这就是空间冗余。

时间重复:在视频、动画图像中,相邻帧之间往往存在着时间和空间的相关性。其中的相邻帧在对应位置的像素之间,亮度和色度信息存在着极强的相关性。

编码冗余:颜色存储时候,颜色不太多。人们用于表达某一信息所需要的比特数总比理论上表示该信息所需要的最少比特数要大,它们之间的差距就是信息熵冗余,或称编码冗余。

视觉冗余:人类眼睛对颜色不太敏感,将看不到的颜色屏蔽。人眼不能感知或不敏感的那部分图像信息。

编码数据处理流程:
png

I帧压缩可去掉视频的空间冗余信息,P帧和B帧是可以去掉时间冗余信息。

编码格式:
png

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

<audio><video>方法属性
png

<audio><video>元素属性
png

<audio><video>事件
png

<audio><video>缺点

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

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

媒体源扩展API(Media Source Extensions)创建过程:

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

MSE播放流程:
png

播放器播放流程:
png

常见流媒体协议:
png

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

应用场景:

点播,
直播,
图片,
云游戏,
实时通讯,
视频编辑。

新技术标准

·Webassembly
·WebCodecs
·WebGPU
·WebVR、WebXR

posted @   进击の小白们  阅读(80)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
xxx2743天18小时36分50秒
点击右上角即可分享
微信分享提示