【青训营】-🎨走进Web多媒体技术

小白菜的编程日记
921 阅读5分钟

一、什么是Web多媒体技术

随着近几年抖音，快手，B站等音视频APP走进千家万户，丰富我们的娱乐生活，音视频技术的发展和学习也掀起来一波新的热潮，在业务需求的推动下，Web产品的音视频技术也是得到了很大的发展和突破。

Web前端

交互体验、前端工程化、跨端能力...

数字对媒体

音视频原理、封装容器、编解码算法...

Web多媒体技术主要分为以下几个方向：

  • 点播

主要分为短视频，中视频，长视频。

  • 直播

在现场通过设备采集现场的音视频数据，把这些数据推送到服务端，服务端进行处理，然后用他的客户端拉取直播流去观看直播。

  • 图片

我们需要对图片的下发，下载的网络链路进行监控，诊断，不同的图片的格式在不同浏览器下是不一样的，比如webp文件在safari浏览器不显示的，然后web多媒体工程师需要对webp文件进行解码，最终显示在safari浏览器中。

  • 实时通信

提供高质量低延迟的音视频数据通信能力，主要是应用在视频会议，在线教育还有一些互动娱乐的场景里面。

  • 云游戏

游戏运行在服务端，降低了客户端硬件要求。

  • 视频剪辑

在web端进行音视频的编辑，不需要在自己的编辑软件里操作。

二、音视频基础知识

假设8bit表示一个子像素，清晰度1280720，帧率25fpx,时长60s,未压缩视频大小 = 8bit3128025*60 = 3.9GB

经过H264压缩后视频大小 = 11MB,压缩比为360：1

image.png

空间/帧内压缩

image.png

我们看上面这张图片，蓝天这块每个小块的相似度很高，表明它们之间有很大的冗余性的，可以用一个小块近似代替其他三个小块，只用保存一个小块的信息，可以节省很多流量，通过算法消除每个小块之间的信息冗余性，就可以大大压缩视频文件。

时间/帧间压缩

image.png

上面两张图片中，只有球员，裁判，球迷是有差异的，变的地方都一样，因此也存在冗余性，这种情况也可以压缩。

编码格式发展

image.png

容器封装格式

我们将这个视频通过编码器编码后得到的是裸流，比如使用264编码器，得到的就是264裸流，如果直接播放264裸流的话，就必须从头到尾播放，我们是无法进行操作的，所以我们需要把这个音视频的裸流包装一下，放在固定格式的文件里面，这种固定文件就叫做音视频的容器。 image.png

<video> 和<audio>元素

image.png

  • 作用：解码+渲染
  • 支持视频格式：MP4、MP3

<video> 和<audio>元素方法

image.png

image.png

<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>

<video> 和<audio>元素属性

image.png


<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>

<video> 和<audio>元素事件

image.png

<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>

<video> 和<audio>元素缺陷

  • 不支持直接播放hls、flv等视频格式

  • 视频资源的请求和加载无法通过代码控制

    • 分段加载（节约流量）
    • 清晰度无缝切换
    • 精确预加载

三、浏览器提供的原生多媒体能力

MediaSouce

  • 扩展浏览器视频播放能力，支持视频分段加载（支持传入fmp4分片），替代Flash播放器
  • 支持播放mp4（实现流式播放）、hls、flv等
  • 可实现视频分段加载、清晰度无缝切换、精确预加载等

image.png

mp4视频文件结构

image.png

fmp4视频文件结构

image.png

使用mse实现mp4流式播放

image.png

加密音视频播放

对音视频做防盗链处理 image.png

自适应码率

根据网络情况自动选择清晰度播放

image.png

弹幕

无碰撞，无重叠的弹幕是需要一定的算法来实现的 image.png

这里的防挡人像是怎么实现的呢？

原视频在转码的时候，实际上会使用计算机的视觉算法，对视频的每一帧进行检测，检测出人像的范围，然后并且生成了一个蒙版文件，当我们客户端开始播放的时候，会同时下发这个蒙版文件，然后播放器可以使用这个蒙版实现人像防遮挡的效果。

软解：实现Web端播放H265格式和国产浏览器防劫持

image.png

网页推流

平时我们在直播要进行推流的话是要下载安装OBS这个软件的，现在呢，我们也是实现了在Web端新开一个页面就能实现一个推流的功能，主要是利用Web RTC技术来实现的。 image.png

图片解码

image.png

云游戏和特点

image.png

字节跳动Web多媒体技术发展

image.png

W3C音视频技术新标准

  • WebCodecs 更高效的能够调用浏览器音视频编解码能力的API
  • WebGPU 在Web端调用这个底层GPU图形计算的能力
  • WebVR、WebXR 给虚拟现实，增强现实这些设备提供渲染的能力

最后

⚽这篇文章带领大家学习了Web多媒体技术，相信你一定收获满满~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript

avatar
文章
阅读
粉丝