業(yè)務(wù)介紹

web投稿頁(yè)是B站的主要投稿來(lái)源，有很多高粉UP主使用web端進(jìn)行投稿。

封面部分是投稿過(guò)程中耗時(shí)占比較高的步驟，因此在過(guò)去，web投稿頁(yè)已上線了自動(dòng)的封面截取&推薦功能，有效提升了用戶(hù)體驗(yàn)。同時(shí)在此過(guò)程中有了一定的技術(shù)積累。

自動(dòng)封面功能依賴(lài)于對(duì)用戶(hù)上傳視頻進(jìn)行截幀的能力，最簡(jiǎn)單的方式是在上傳完成之后由服務(wù)端進(jìn)行視頻截幀并返回推薦的候選封面，但顯然這一步會(huì)有大量的等待時(shí)間，因此我們采用的是純前端視頻截幀能力。

實(shí)際上在web投稿頁(yè)有多處需要截幀的地方：

• 封面推薦：截取多張低清圖在前端進(jìn)行AI打分，基于打分結(jié)果截取最多10張高清圖供UP主選擇
• 封面選幀：對(duì)默認(rèn)推薦的幀不滿意，手動(dòng)獲取準(zhǔn)確時(shí)間點(diǎn)的幀畫(huà)面
• 分區(qū)&話題推薦：從視頻中截取多幀，打包上傳至后臺(tái)進(jìn)行分析后返回推薦結(jié)果

圖片

圖片

過(guò)去方案

過(guò)去web投稿頁(yè)采取兩套視頻截幀方案，wasm優(yōu)先，canvas兜底

現(xiàn)狀：截幀成功率97%左右，封面推薦耗時(shí)（去掉極端數(shù)據(jù)）

• 平均：8.4s
• 50分位：16s
• 90分位：19s

WebCodecs是什么

WebCodecs于21年9月份推出，是用于在web頁(yè)面上對(duì)音視頻進(jìn)行底層操縱（如編解碼）的API。

WebCodecs是相對(duì)底層的API，準(zhǔn)確來(lái)說(shuō)是為有音視頻開(kāi)發(fā)基礎(chǔ)的人準(zhǔn)備的，對(duì)前端同學(xué)來(lái)說(shuō)有一定的門(mén)檻。

在使用FFmpeg時(shí)可直接調(diào)用包裝好的方法，主要門(mén)檻在于wasm環(huán)境的配置和構(gòu)建。而使用WebCodecs時(shí)則需要基于編解碼的原理手動(dòng)實(shí)現(xiàn)功能?；蛟S后續(xù)WebCodecs將會(huì)推出更加上層的API。

所以在進(jìn)一步介紹WebCodecs截幀方案之前，我想先介紹一些視頻處理的入門(mén)知識(shí)，感興趣的可以參考附錄中的鏈接進(jìn)一步學(xué)習(xí)。

MP4的入門(mén)知識(shí)

視頻處理的基本概念

圖片

編碼/解碼：

• 視頻的編碼是將原始的圖像信息進(jìn)行變換壓縮等處理，方便傳輸并保證圖像質(zhì)量。解碼則是將壓縮后的文件還原成視頻需要的一連串圖像
• 常見(jiàn)的編碼格式：H.265; mpeg4; vp9 ……

封裝/解封裝：

• 一個(gè)視頻文件可能包含多個(gè)音頻和視頻流，通過(guò)封裝格式將他們聚合在一起，在使用時(shí)按照規(guī)則逐步解析
• 常見(jiàn)的封裝格式：mov,mp4,m4a,3gp,3g2; matroska; flv; avi ……

在這里簡(jiǎn)單介紹下.mp4文件常用的h264編碼以及MP4封裝

編碼-幀內(nèi)編碼（以JPEG圖片壓縮算法為例）

利用人眼的生物特性結(jié)合數(shù)學(xué)方法進(jìn)行數(shù)據(jù)壓縮，并確保圖片質(zhì)量。主要步驟：

圖片

具體流程在這就不展開(kāi)了，總之，經(jīng)過(guò)壓縮后圖片的文件大小將有非常顯著的縮小

圖片

??

圖片

原圖大?。?620*1080*3/1024/1204 = 4.25MB ----> 編碼后大?。?56KB

PS：效果僅供參考，兩者皆為經(jīng)過(guò)JPEG壓縮的圖片，只不過(guò)壓縮比不同

編碼-幀間編碼

盡管經(jīng)過(guò)幀內(nèi)編碼的壓縮，圖片已經(jīng)有了很明顯的體積減少，但存儲(chǔ)視頻的每一幀是依然是很不明智的行為。因此需要幀間編碼。

通常有兩種方式進(jìn)行幀間編碼：動(dòng)態(tài)補(bǔ)償+幀間差異

動(dòng)態(tài)補(bǔ)償

圖片

通常，兩個(gè)連續(xù)的幀之間是存在相同部分的，只是位置發(fā)生了變化因此可以通過(guò)存儲(chǔ) 塊的索引 + 偏移量（向量）以減少存儲(chǔ)體積

幀間差異

僅有動(dòng)態(tài)補(bǔ)償還不夠還原每一幀的畫(huà)面，還需要通過(guò)兩幀之間的diff幀來(lái)輔助還原

圖片

diff幀的畫(huà)面通常信息量比較低，因此通過(guò)幀內(nèi)壓縮會(huì)獲得很高的壓縮比

使用這兩種方法，結(jié)合上一幀參考幀，便可以獲得當(dāng)前幀了

圖片

不同的幀類(lèi)型

對(duì)應(yīng)的，產(chǎn)生了三種幀類(lèi)型

I 幀：俗稱(chēng)的關(guān)鍵幀，僅使用了幀內(nèi)編碼，可以被獨(dú)立還原為圖像

P幀：幀的圖像還原依賴(lài)前一幀的解碼結(jié)果

B幀：幀的圖像還原依賴(lài)前一幀與后一幀的解碼結(jié)果

圖片

幀的展示順序與解碼順序可能是不一樣的

封裝

MP4封裝文件基本結(jié)構(gòu)：所有數(shù)據(jù)存放在box中

圖片

WebCodecs截幀方案

設(shè)想一個(gè)問(wèn)題：只使用一個(gè)編程語(yǔ)言的基本API，如何最高效地獲取一個(gè).mp4文件中的某一個(gè)時(shí)間點(diǎn)所在的圖像？

在了解了上面的基本知識(shí)后，我們可以分4步解決這個(gè)問(wèn)題：

圖片

不同于播放器：截幀不需要預(yù)解碼緩存等步驟。為了保證性能，需要多少數(shù)據(jù)拿多少，拿多少處理多少，避免多余的文件讀取和解析造成性能和內(nèi)存的浪費(fèi)。

 元數(shù)據(jù)讀取&解析

1. 讀取文件頭部8byte的數(shù)據(jù)，按照box的header規(guī)則逐個(gè)獲取各box的位置以及大小

圖片

PS：moov可能在文件的末尾，順序不固定

2. 將moov box所在文件塊切片，提供給解封裝器解析，獲取到：

• 該視頻的詳細(xì)編碼參數(shù)
• 所有幀的索引信息

圖片

尋幀

策略：幀的時(shí)間戳并不是連續(xù)的的 → 某個(gè)時(shí)間點(diǎn)對(duì)應(yīng)的幀可能并不存在 → 使用距離最近的幀

圖片

獲取到最近的關(guān)鍵幀和非關(guān)鍵幀之后，則要根據(jù)截幀的需求提供不同的文件塊給解碼器解碼

只提供關(guān)鍵幀速度更快，適合精度不高的場(chǎng)景（封面推薦），準(zhǔn)確截幀適合精度要求高的場(chǎng)景（封面選幀）

整體過(guò)程

由于解封裝器(mp4box.js)和解碼器(WebCodecs-VideoDecoder)本身為流式設(shè)計(jì)，優(yōu)先服務(wù)于流式的應(yīng)用場(chǎng)景（如直播視頻流，點(diǎn)播視頻流，需要通過(guò)網(wǎng)絡(luò)請(qǐng)求分塊獲取到文件內(nèi)容）。而視頻截幀是一個(gè)本地場(chǎng)景，已經(jīng)有了完整的文件。且視頻截幀的API最好是類(lèi)似同步的方式，在一個(gè)方法調(diào)用中完成所有的幀截取，并一起返回。

因此設(shè)計(jì)了通過(guò)事件拋出以及定時(shí)器機(jī)制以達(dá)到對(duì)內(nèi)部流式依賴(lài)庫(kù)的包裝。

同時(shí)將計(jì)算密集的解封裝、解碼、渲染工作擋在獨(dú)立的web worker中執(zhí)行，確保宿主頁(yè)面運(yùn)行流暢不受影響。

性能分析

本地測(cè)試：

測(cè)試機(jī)上模擬了web投稿頁(yè)場(chǎng)景，對(duì)WebCodecs / WebAssembly / Canvas 三種截幀方式的性能進(jìn)行了測(cè)試。

圖片

測(cè)試樣本：720p視頻2個(gè)，1080p視頻3個(gè)，2k視頻1個(gè)，4k視頻3個(gè)

測(cè)試環(huán)境：2020 M1 MacBook pro, 公司測(cè)試windows本（i5-1135G7 1.38~2.40GHz）

測(cè)試方式：在不同測(cè)試機(jī)上對(duì)每個(gè)視頻跑三次測(cè)試用例，共81次

測(cè)試用例：模擬web投稿頁(yè)截幀流程，數(shù)量，分辨率保持相同

實(shí)際場(chǎng)景中：視頻的編碼，分辨率，壓制參數(shù)等都會(huì)對(duì)截幀性能有影響，在這里以分辨率進(jìn)行粗略的分類(lèi)

線上數(shù)據(jù)：

圖片

圖片

總結(jié)：

• 隨著視頻規(guī)格的提升，webcodecs的截幀速度為wasm和canvas的 2.5~5 倍
• 提前 3~13s 完成頁(yè)面所需的截幀任務(wù)，用戶(hù)能夠更快的看到推薦結(jié)果
• 在內(nèi)存消耗上有一定的降低

WebCodecs截幀方案的優(yōu)點(diǎn)&缺點(diǎn)

優(yōu)點(diǎn)

• 速度很快，受視頻規(guī)格影響小
• 讀取文件少
• 內(nèi)存占用有一定降低，且表現(xiàn)穩(wěn)定

缺點(diǎn)

• 依賴(lài)解封裝器的實(shí)現(xiàn)，當(dāng)前使用了mp4box.js作為解封裝器，約能覆蓋95%的視頻
• 目前僅mp4和webm的解封裝器較完善
• WebCodecs瀏覽器支持性一般，當(dāng)前為85%左右

規(guī)劃

• 作為web投稿頁(yè)首選截幀方式，根據(jù)線上表現(xiàn)做進(jìn)一步優(yōu)化
• 其他封裝格式的視頻支持：支持webm封裝格式（已支持，且開(kāi)源了mkv demuxer）
• 開(kāi)源

附錄

jpeg壓縮算法介紹：

• 我站：https://www.bilibili.com/video/BV1TZ4y1S7iG
• 知乎：影像算法解析——JPEG 壓縮算法 - 知乎（https://zhuanlan.zhihu.com/p/40356456）

視頻編碼介紹：https://www.youtube.com/watch?v=QoZ8pccsYo4

不同的幀類(lèi)型：I, P, and B-frames - Differences and Use Cases Made Easy - OTTVerse（https://ottverse.com/i-p-b-frames-idr-keyframes-differences-usecases）

codec string的含義（[avc1.4d0033]代表什么）：Codecs in common media types - Web media technologies | MDN（https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter#using_the_codecs_parameter）

MP4封裝類(lèi)型介紹：mp4封裝格式各box類(lèi)型講解及IBP幀計(jì)算 - 知乎（https://zhuanlan.zhihu.com/p/457888765）

在線MP4解析工具：Online Mp4 Parser（https://www.onlinemp4parser.com/）

WebCodecs官方說(shuō)明：WebCodecs（https://w3c.github.io/webcodecs/#videodecoder-interface）

WebCodecs代碼示例：https://github.com/w3c/webcodecs

本期作者

張鋒嗶哩嗶哩資深開(kāi)發(fā)工程師