直播带货

直播带货是一种快速增长的电子商务趋势。但是,对于许多前端工程师而言,视听技术可能是陌生的领域。本文探讨淘宝直播带货的背后技术,并揭示了有关流媒体技术的各种信息,例如文本,图形,图像,音频和视频。它还介绍了播放器,网络媒体技术和主流框架。本文设想打开前端多媒体领域的大门。

视听技术基础

视频

条款

比特率每单位时间的采样率越高,清晰度越高,并且处理后的文件与原始文件越接近。

影格速率对于视频,帧速率会影响视频播放期间的视觉延迟。较高的帧速率会产生较高的流畅度。低帧频可能会导致视觉滞后。

压缩率使用以下公式计算压缩率:压缩后的文件大小/原始文件的大小×100%。对于编码,压缩后的文件大小越小,压缩性能越好。但是,解压缩文件需要更长的时间。

解析度用于测量图像中数据量的参数。它与视频清晰度密切相关。

视频容器格式

流行的容器格式包括MP4,AVI,FLV,TS,M3U8,WebM,OGV和MOV。

H.264H.264是当今最流行的编码格式。

H.265H.265是一种用于高效视频编码的新格式。H.265替代了H.264和AVC编码标准。

VP9VP9是WebM
Project开发的下一代视频编码格式。VP9支持从低比特率压缩到高质量超高清的所有Web和移动用例。VP9还支持10位和12位编码以及高动态范围(HDR)编码。

AV1AV1是由开放媒体联盟(AOM)开发的一种开源,无版权的视频编码格式。AV1由Google开发,是VP9的后继产品。AV1是H.265的强大竞争对手。

声音的

条款

采样率音频采样率是记录设备每秒从音频信号中收集的平均采样数。以更高的音频采样率采样的声音在再现时听起来更加真实自然。

样本量每秒收集的样本数量由比特率衡量。每个样本中的位数是由位深度来衡量的,它反映了以位为单位的样本精度。

比特率比特率衡量每秒传输的比特数。也称为数据信号速率。比特率的单位包括bit / s,kbit / s和Mbit /
s。比特率越高,每单位时间传输的数据越多。

压缩率压缩率是原始音频数据大小与通过脉冲编码调制(PCM)或其他压缩编码技术进行压缩时的音频数据大小之比。

音频容器格式

流行的音频格式包括WAV,AIFF,AMR,MP3和OGG。

音频编码格式

PCMPCM是数字通信中使用的编码方法之一。

AAC-LC(MPEG AAC低复杂度)高级音频编解码器-低复杂度(AAC-LC)是一种高性能音频编解码器,可在低比特率下提供高质量的音频。

AAC-LD高级音频编码-低延迟(AAC-LD)或MPEG-4 AAC-LD是一种音频解码器,具有电话会议和上层(OTT)服务所需的低延迟。

LAC(免费无损音频编解码器)FLAC是最流行的免费无损音频压缩编解码器。自2012年以来,FLAC得到了许多软件和硬件音频产品的支持,例如光盘(CD)。

淘宝直播带货

直播技术

流媒体协议

通过Internet,音频和视频媒体数据是通过网络协议传输的,这些协议分布在会话层,表示层和应用程序层。

常用协议包括实时消息协议(RTMP),实时传输协议(RTP),实时控制协议(RTCP),实时流协议(RTSP),HTTP闪存视频(FLV)协议,
HTTP实时流(HLS)协议和HTTP上的动态自适应流(DASH)协议。每种协议都有其自身的优点和缺点。

溪流摄取和溪流牵引

实时购物主机启动实时流后,记录设备会收集主机的语音和图像,然后通过相应的协议将其摄取到流媒体服务器中。然后,通过流提取协议从流媒体服务器中提取流数据,以为观看者播放流。

玩家们

本节介绍与播放器有关的技术以及播放器如何处理拉流。

流拉

在播放器播放视频流之前,必须先将其拉出。

例如,使用Web浏览器提供的Fetch API和Stream API提取FLV格式的视频流数据。

Demux的定义

然后,提取的流数据被解复用。图像,声音和字幕(如果有)通过多路分解器与提取的流数据分开。此过程称为Demux。

解复用后的图像,声音和字幕称为基本流,由解码器解码。

解复用过程

解复用的基本比特流被解码为音频和视频播放器播放的数据。

解码后的数据具有多种类型,以下部分将介绍其中的一些类型。

SPS和PPS

序列参数集(SPS)和图片参数集(PPS)共同确定最大视频分辨率,帧速率和一系列视频播放参数。PPS和SPS通常存储在比特流的开始位置。

SPS和PPS为编码的视频序列存储一组全局参数。如果这些参数丢失,则解码可能会失败。

I帧,B帧和P帧

I帧是关键帧。I帧的数据可以通过帧内预测被独立地解码。I帧通常是图片组(GOP)中的第一帧。GOP是MPEG使用的视频压缩技术。I帧被适当地压缩成随机访问参考点,并用作静态图像。

B帧是前向预编码帧。基于先前的I帧或P帧以及随后的I帧或P帧来预测该帧。在解码期间,当前B帧的数据与先前缓存的图片和解码后的图片两者叠加以生成最终图片。

P帧是前向预测帧。在图像编码期间,通过去除关于图像序列中的编码帧的所有冗余时间信息,来压缩要发送的P帧的数据。

精工

当视频编码器输出视频比特流时,补充增强信息(SEI)是可选的。例如,在实时问答流中,SEI会携带许多与问答相关的信息。这改善了问题显示和向观众的视听呈现之间的同步性。

PTS和DTS

解码时间戳(DTS)用于告诉播放器何时解码帧数据。

演示时间戳(PTS)用于告诉播放器何时显示帧数据。

DTS和PTS可以直接确定音频和视频回放的同步性。

解码过程会生成各种产品。有关更多信息,请参见本文的最后一节。

Remux

Remux与Demux相反。Remux是将音频基本流(ES),视频ES和字幕ES组合成完整的多媒体的过程。

Remux和Demux都需要更改视频文件的多路复用和编码格式。具体过程在此不再赘述。

渲染图

渲染是指在PC硬件(如显示器和扬声器)上播放解码的数据。负责渲染的模块称为渲染器。流行的视频渲染器包括增强型视频渲染器(EVR)和Madshi视频渲染器(madVR)。渲染器通常通过使用视频标签内置到网络播放器中。

自定义渲染:例如,H.265播放器使用Web浏览器提供的API来创建模拟视频标签,并使用画布和音频元素进行渲染。

网络媒体技术

WebRTC

Web实时通信(WebRTC)允许网络应用程序和网站在Web浏览器之间建立对等(P2P)连接,而无需使用中间媒体。这些连接支持音频流,视频流和其他类型的数据的快速传输。

WebRTC由视频引擎,语音引擎,会话管理,iSAC(为语音压缩设计),VP8(由Google的WebM项目开发的视频编解码器)和API(例如本机C
++ API和Web API)组成。

微软

媒体源扩展(MSE)是针对播放器的技术规范。MSE
API提供了基于Web的流媒体功能,而无需使用任何插件。MSE允许JavaScript使用音频和视频元素创建媒体流并播放流。

MSE大大扩展了Web浏览器的媒体播放功能,并允许JavaScript创建媒体流。MSE适用于自适应流式传输,并且已经发展为支持实时流式传输和其他方案。

WebXR

扩展现实(XR)包括虚拟现实(VR),增强现实(AR)和混合现实(MR)。WebXR支持具有所有类型现实的设备。WebXR允许创建在所有VR和AR设备上运行的沉浸式内容。这提供了基于Web的VR和AR体验。

WebGL

Web图形库(WebGL)是支持用户交互的3D绘图标准。WebGL支持JavaScript和OpenGL ES 2.0的组合。添加OpenGL ES
2.0的JavaScript绑定,以允许WebGL加速使用HTML5
Canvas的硬件的3D渲染。在基于Web的开发过程中,使用系统图形卡可以更流畅地在Web浏览器中显示3D场景和模型,并创建复杂的导航和可视数据。

WebGL使用画布进行渲染。在“玩家”部分,我们了解到玩家可以使用画布进行图像渲染。WebGL增强了播放器的播放流畅性和其他功能。

Web组装

WebAssembly(Wasm)是一种新的可移植且与Web兼容的格式,具有体积小和加载速度快的特点。Wasm是由W3C社区开发的新规范,由主流Web浏览器制造商组成。

Wasm允许播放器与FFmpeg集成,从而使播放器能够解码Web浏览器无法识别的H.265视频。

使用中的开源产品和框架

以下各节介绍了当前最受欢迎的开源产品和框架。

flv.js

flv.js是由哔哩哔哩开发的开源HTML5
FLV播放器。基于HTTP-FLV协议,flv.js通过纯JavaScript转换FLV数据,以确保FLV文件以Web模式播放。

hls.js

hls.js是基于HLS协议开发的JavaScript播放器库。hls.js使用MSE在Web模式下播放HLS文件。

Apple Inc.提出的HLS协议受到移动客户端的广泛支持,因此广泛用于实时流方案中。

video.js

video.js是基于HTML5的播放器,可播放H5和Flash文件,并提供100多个插件。video.js播放HLS和DASH格式的文件,并允许创建自定义主题和字幕扩展名。video.js适用于全球许多情况。

FFmpeg

FFmpeg是领先的多媒体框架和开放源代码,跨平台的多媒体解决方案。FFmpeg提供了一系列功能,例如音频和视频编码,解码,代码转换,复用,解复用,流媒体,过滤器和回放。

FFmpeg由以下前端组件使用:

JavaScript播放器:
FFmpeg与Wasm集成在一起,以在Web浏览器中实现JavaScript播放器或扩展Web浏览器的其他视听功能。

节点模块Fluent-FFmpeg:这是Node.js中有用的模块,可简化FFmpeg的复杂命令。使用此模块可以上传文件并处理视频流。有关更多信息,请访问fluent-ffmpeg网站。

OBS

Open Broadcaster Software(OBS)是用于视频录制和实时流传输的灵活的开源软件。OBS用C和C
++编写,提供了一系列功能,例如实时源和设备捕获,方案组成,编码,记录和广播。OBS使用RTMP将数据传输到启用了RTMP的目的地,例如YouTube,Twitch.tv,Instagram,Facebook和其他流媒体网站。

OBS使用x264免费软件库,Intel Quick Sync Video,NVIDIA
NVENC和AMD视频编码引擎将视频流编码为H.264,MPEG-4
AVC,H.265和HEVC格式。OBS还使用MP3和AAC编码器对音频流进行编码。如果您熟悉视听编码和解码,请使用libavcodec和libavformat库提供的编解码器和容器,以及将输出流输出到自定义FFmpeg
URL。

美国职棒大联盟

MLT是一种非线性视频编辑器引擎,适用于各种类型的应用程序,包括桌面应用程序以及在Android和iOS上运行的应用程序。

对于淘宝直播带货的背后技术,大家是不是觉得很复杂呀,

By 中正

发表评论

邮箱地址不会被公开。 必填项已用*标注