一、什么是Web多媒体技术
随着近几年抖音，快手，B站等音视频APP走进千家万户，丰富我们的娱乐生活，音视频技术的发展和学习也掀起来一波新的热潮，在业务需求的推动下，Web产品的音视频技术也是得到了很大的发展和突破。
Web前端
交互体验、前端工程化、跨端能力...
数字对媒体
音视频原理、封装容器、编解码算法...
Web多媒体技术主要分为以下几个方向：
- 点播
主要分为短视频，中视频，长视频。
- 直播
在现场通过设备采集现场的音视频数据，把这些数据推送到服务端，服务端进行处理，然后用他的客户端拉取直播流去观看直播。
- 图片
我们需要对图片的下发，下载的网络链路进行监控，诊断，不同的图片的格式在不同浏览器下是不一样的，比如webp文件在safari浏览器不显示的，然后web多媒体工程师需要对webp文件进行解码，最终显示在safari浏览器中。
- 实时通信
提供高质量低延迟的音视频数据通信能力，主要是应用在视频会议，在线教育还有一些互动娱乐的场景里面。
- 云游戏
游戏运行在服务端，降低了客户端硬件要求。
- 视频剪辑
在web端进行音视频的编辑，不需要在自己的编辑软件里操作。
二、音视频基础知识
假设8bit表示一个子像素，清晰度1280720，帧率25fpx,时长60s,未压缩视频大小 = 8bit3128025*60 = 3.9GB
经过H264压缩后视频大小 = 11MB,压缩比为360：1
空间/帧内压缩
我们看上面这张图片，蓝天这块每个小块的相似度很高，表明它们之间有很大的冗余性的，可以用一个小块近似代替其他三个小块，只用保存一个小块的信息，可以节省很多流量，通过算法消除每个小块之间的信息冗余性，就可以大大压缩视频文件。
时间/帧间压缩
上面两张图片中，只有球员，裁判，球迷是有差异的，变的地方都一样，因此也存在冗余性，这种情况也可以压缩。
编码格式发展
容器封装格式
我们将这个视频通过编码器编码后得到的是裸流，比如使用264编码器，得到的就是264裸流，如果直接播放264裸流的话，就必须从头到尾播放，我们是无法进行操作的，所以我们需要把这个音视频的裸流包装一下，放在固定格式的文件里面，这种固定文件就叫做音视频的容器。
- 作用：解码+渲染
- 支持视频格式：MP4、MP3
<body> <button onclick="playVid()">播放视频</button> <button onclick="pauseVid()">暂停视频</button> <button onclick="loadVid()">重新加载视频</button> <video id="vs" src="demo.mp4"></video> <script> const myVideo = document.getElementById("vs"); function playVid(){ myVideo.play(); } function pauseVid(){ myVideo.pause(); } function loadVid(){ myVideo.load(); } </script> </body> 复制代码
<body> <button onclick="getVolume()">音量是多少</button> <button onclick="setVolume()">将视频音量设置为20%</button> <button onclick="getCurTime()">获得当前播放时间</button> <button onclick="setCurTime()">将播放时间设置为第5秒</button> <video id="vs" src="demo.mp4"></video> <script> const myVideo = document.getElementById("vs"); function getVolume(){ alert(myVideo.volume); } function setVolume(){ myVideo.volume = 0.2; } function getCurTime(){ alert(myVideo.currentTime); } function setCurTime(){ myVideo.currentTime = 5; } </script> </body> 复制代码
<body> <video id="vs" src="demo.mp4"></video> <script> const myVideo = document.getElementById("vs"); myVideo.addEventListener('canplay',function(){ alert('canplay'); }) myVideo.addEventListener('pause',function(){ alert('pause'); }) myVideo.addEventListener('play',function(){ alert('play'); }) myVideo.addEventListener('waiting',function(){ alert('waiting'); }) </script> </body> 复制代码
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
三、浏览器提供的原生多媒体能力
MediaSouce
- 扩展浏览器视频播放能力，支持视频分段加载（支持传入fmp4分片），替代Flash播放器
- 支持播放mp4（实现流式播放）、hls、flv等
- 可实现视频分段加载、清晰度无缝切换、精确预加载等
mp4视频文件结构
fmp4视频文件结构
使用mse实现mp4流式播放
加密音视频播放
对音视频做防盗链处理
自适应码率
根据网络情况自动选择清晰度播放
弹幕
无碰撞，无重叠的弹幕是需要一定的算法来实现的
这里的防挡人像是怎么实现的呢？
原视频在转码的时候，实际上会使用计算机的视觉算法，对视频的每一帧进行检测，检测出人像的范围，然后并且生成了一个蒙版文件，当我们客户端开始播放的时候，会同时下发这个蒙版文件，然后播放器可以使用这个蒙版实现人像防遮挡的效果。
软解：实现Web端播放H265格式和国产浏览器防劫持
网页推流
平时我们在直播要进行推流的话是要下载安装OBS这个软件的，现在呢，我们也是实现了在Web端新开一个页面就能实现一个推流的功能，主要是利用Web RTC技术来实现的。
图片解码
云游戏和特点
字节跳动Web多媒体技术发展
W3C音视频技术新标准
- WebCodecs 更高效的能够调用浏览器音视频编解码能力的API
- WebGPU 在Web端调用这个底层GPU图形计算的能力
- WebVR、WebXR 给虚拟现实，增强现实这些设备提供渲染的能力
最后
⚽这篇文章带领大家学习了Web多媒体技术，相信你一定收获满满~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！
