前端多媒体

246 阅读2分钟

1. is What ?

前端多媒体 顾名思义为利用专业的前端能力,解决多媒体场景下的各类技术和业务问题。涵盖许多方面 -> 流媒体协议、音视频播放技术、web媒体技术...

2. W3C 下的标准媒体技术

在 html5 支持多媒体元素之前,我们想要在浏览器上播放一个视频的话需要借助一些插件,eg:Adobe Flash... 需要用户手动安装,比较麻烦也不安全。

所以 W3C 在 html5 标准中就定义了一系列新的多媒体元素来改善这一情况,just like:< video/>< audio/>< source/>< track/>

虽然说方便了许多 -> '开箱即用' ,但是其提供的功能是有限的。少了些现实场景中播放器该有的功能:视频分段加载、视频码率转换、部分加载、内存管理...那怎么办嘞?用媒体 API:

3.1 Media Source API

先贴个文档 Media Source API

Media Source API(官方名为MSE -> Media Source Extensions) 扩展了浏览器的媒体播放功能。1> 它允许我们通过 JS 创动态构造媒体流对象 MediaSource ,并使用 < video/>< audio/> 等元素播放;2> 也可以实现使用 JS 把一些不支持的视频流格式封装为支持的格式(eg:小破站开源的 flv.js 就使用了 MSE 技术把 FLV 源用 JS 实时转化并封装为 HTML5 的视频格式)

【补1-> MediaSource】

MediaSource 是一个容器对象,可以包含要播放媒体的就绪状态、整个流不同媒体块(source buffer)的引用。

截屏2024-06-17 19.48.00.png

URL.createObjectURL() 可以创建一个指向 MediaSource 对象的 ObjectURL

截屏2024-06-17 19.42.43.png

【补2-> FLV】wiki

Flash Video(简称 flv),是一种网络视频格式,用作流媒体格式,它的出现解决了视频文件导入 Flash 后再导出的 SWF 文件体积变大,不能在网络上正常播放等缺点。

3.2 Web Audio API

Media Audio API

Web Audio API 用于处理和合成 Web 应用程中的音频,允许开发者进行声音合成、添加音频特效、音频可视化等。使用它几乎可以完成一个专业的 web 音频处理软件(如节拍器、调音器等)。

3.3 Media Stream API

Media Stream API

Media Stream API 允许开发者使用本地的摄像头和麦克风来采集和录制音频、捕捉电脑屏幕(截屏)、读取本地视频做合成。常用于 web 摄像头、拍照、录屏、视频通话等。、、

4. webRTC

webRTC(web Real-Time-Commucation) 是一项实时通讯技术,它允许 web 应用在不借助中间媒介的情况下,建立 web 之间的点对点连接,实现视频流、音频流或者其他数据的传输。允许开发者进行音视频的采集、解编码、网络传输、显示等功能。常常用于音视频通信、直播推流、web会议等。

just like:

截屏2024-06-18 16.02.32.png