Web多媒体初识篇 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第14天。
多媒体发展
-
Flash：音视频依赖于flash插件
- iOS不支持flash, falsh开始走下坡路
-
Html5：
<video>,<audio>标签原生支持音视频，但功能也有限（视频格式有限制，状态检测不到） -
Media Source Extensions：扩展API实现Html5的不足之处
什么是Web多媒体技术
随着近几年抖音，快手，B站等音视频APP走进千家万户，丰富我们的娱乐生活，音视频技术的发展和学习也掀起来一波新的热潮，在业务需求的推动下，Web产品的音视频技术也是得到了很大的发展和突破。
Web前端
交互体验、前端工程化、跨端能力...
数字对媒体
音视频原理、封装容器、编解码算法...
Web多媒体技术主要分为以下几个方向：
- 点播
主要分为短视频，中视频，长视频。
- 直播
在现场通过设备采集现场的音视频数据，把这些数据推送到服务端，服务端进行处理，然后用他的客户端拉取直播流去观看直播。
- 图片
我们需要对图片的下发，下载的网络链路进行监控，诊断，不同的图片的格式在不同浏览器下是不一样的，比如webp文件在safari浏览器不显示的，然后web多媒体工程师需要对webp文件进行解码，最终显示在safari浏览器中。
- 实时通信
提供高质量低延迟的音视频数据通信能力，主要是应用在视频会议，在线教育还有一些互动娱乐的场景里面。
- 云游戏
游戏运行在服务端，降低了客户端硬件要求。
- 视频剪辑
在web端进行音视频的编辑，不需要在自己的编辑软件里操作。
以上内容来自：链接：juejin.cn/post/700072…，作者：Jser阿武
基础概念
编码格式
图像基本概念
- 图像分辨率：同于确定组成一幅图像的像素数据，指水平和垂直方向上图像所具有的像素个数
- 图像深度：存储每个像素所需要的比特数
视频基本概念
- 分辨率：每一帧的图像分辨率
- 帧率：视频单位时间内包含的视频帧数的数量
- 码率：视频单位时间内传输的数据量，一般用kbps（千位每秒）来表示
为什么要编码？
为了节省空间！！！
- 空间冗余
- 时间冗余
- 编码冗余
- 视觉冗余
处理数据流程
封装格式
封装格式：存储音视频/图片/字幕信息的一种容器
我们将这个视频通过编码器编码后得到的是裸流，比如使用264编码器，得到的就是264裸流，如果直接播放264裸流的话，就必须从头到尾播放，我们是无法进行操作的，所以我们需要把这个音视频的裸流包装一下，放在固定格式的文件里面，这种固定文件就叫做音视频的容器。
多媒体元素和扩展API
<video>标签
<audio>标签
<audio>和<video>元素缺陷
-
不支持直接播放his/flv等视频格式
-
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API (Media Source Extensions)
- 无插件在web端播放流媒体
- 支持播放his、flv、MP4等格式视频
- 可实现视频分段加载。清晰度无缝切换、自适应码率、精确预加载等
使用步骤：
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 乡sourceBuffer中加入数据
- 监听updataend事件
播放器播放流程
流媒体协议
HLS全称是TTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议,用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
RTMP是Flash时期使用的协议。
总结
多媒体从flash发展到H5再到MSE，与之对应的编码格式、封装格式、多媒体元素也发生技术提升，现行技术标准包括Webassembly、WebCodes、WebGPU、WebVR、WebXR都在不断涌现出来。
W3C音视频技术新标准
- WebCodecs 更高效的能够调用浏览器音视频编解码能力的API
- WebGPU 在Web端调用这个底层GPU图形计算的能力
- WebVR、WebXR 给虚拟现实，增强现实这些设备提供渲染的能力
参考博客：
- 链接：juejin.cn/post/713099…，作者：Arielzz
- 链接：juejin.cn/post/713232…，作者：用户2593920510941
- 链接：juejin.cn/post/700072…，作者：Jser阿武
