看文件的编码细节:MP4Box.js - JavaScript MP4 Reader/Fragmenter WEB 音视频 API 超分需要算法介入,自动放大只是放大每个像素点 GOP:Group of Pictures,通常包含 I帧(关键帧),P帧(预测帧),B帧(双向预测帧) H.265、AV1和H.264视频编码对比:x265性能不及预期,Libaom表现亮眼 – PixPark

视频编码格式

  • AV1
  • H.265(HEVC):High Efficiency Video Coding
    • 比H.264更高的压缩比,视频质量。需要底层硬件支持
  • H.264(AVC):Advanced Video Coding
    • profile(画质级别):baseline,extended,main,high
    • level:越高表示视频分辨率和比特率要求越高
  • VP8:google 开发
  • VP9:google 开发
  • Real Vieo

编码字符串(codec)

视频容器(封装)格式

  • MPEG
    • Moving Picture Experts Group,动态图像专家组
    • MPEG-X 代表了一系列标准,比如 MPEG-X 就是经典的 MP3。H.264是MPEG-4的一部分,被称为MPEG-4 Part 10
    • (.mp4 .mpg .mpeg .mpe .dat .vob .3gp)
  • AVI
    • Audio Video Interleave(视频和音频编码混合在一起存储)
  • MKV
    • 几乎支持所有编码格式
    • Matroska Video
  • FLV/F4V
    • Flash Video,F4V:for H.264
  • WMV(.wmv .asf .asx)
    • 微软 Windows Media Video。需要 Windows Media Player,不能直接在Web 上播放
  • WebM
    • Google 引入,适用于 HTML5
  • MOV/M4V
    • 支持 MPEG-2,XVID,H.264
    • 苹果 QuickTime File Format,M4V:for H.264
  • RM/RMVB
    • 支持 RV,RM
    • Real video。VB:variable bitrate(可变比特率)
  • DivX/xvid
    • DivXnetworks 公司发明
  • OGG
    • Ogg Media File
  • M4S(fmp4)
    • MP4 Segment MPEG-DASH 流媒体使用,B站直播使用

SIMD:“Single Instruction Multiple Data”的缩写,即单指令多数据。它是一种并行处理技术,允许在一条指令中同时对多个数据进行操作。可以加速解码image.png

WebCodecs

  • 场景
    • 视频生产:视频剪辑、直播工作台,搭配多人协同、AI 能力
    • 视频消费:播放器、视频会议、云游戏
    • 算力转移:视频压缩、缩略图生成、植入水印、调整速率

ffmpeg + wasm 对比,性能更好,功耗更低 解码器部分和 MSE(Media Source Extensions)相似

编解码 API 对称(图中蓝色部分,只有在 https 环境才支持)

image.png

WebCodecs 开启 Web 音视频新篇章 | 风痕 · 術&思

追帧

预设一个目标的缓冲长度,当播放器的缓冲长度大于目标长度时,就提高播放器的播放速度,这样播放比直播快,播放器的缓冲就会不断被消耗,缓冲带来的延迟也会不断减少,直至播放器的缓冲长度达到目标长度。

Web 直播播放器追帧、跳帧优化

跳帧:直接跳到指定位置

直播情况:23年底做了尝试,现在线上有跳帧,没有追帧(因为会有音画不同步现象)

视频压缩与画质

by nanling

音频

  • 格式
    • mp4,m4a,wav,mp3
  • 音量标准化
    • dB:分贝,decebel,音频的响度单位。
    • gain:增益,用于描述音频信号幅度的放大或增强,在 WEB API 中,对应的是 GainNode
    • 做法
      • 峰值标准化(削峰):响度平均的稿件容易受益(响度战争)
      • 响度标准化(平均响度):大动态范围稿件容易失真,B站使用
    • 响度战争解决思路:K-System
    • 音量标准化能力综述与产品化讨论
    • 响度归一化 Web 技术方案
  • AudioContext
    • 初始化音频: new window.AudioContext() (cocos creator 里使用了这个方法)