業(yè)務(wù)介紹
web投稿頁是B站的主要投稿來源,有很多高粉UP主使用web端進(jìn)行投稿。nrO28資訊網(wǎng)——每日最新資訊28at.com
封面部分是投稿過程中耗時占比較高的步驟,因此在過去,web投稿頁已上線了自動的封面截取&推薦功能,有效提升了用戶體驗。同時在此過程中有了一定的技術(shù)積累。nrO28資訊網(wǎng)——每日最新資訊28at.com
自動封面功能依賴于對用戶上傳視頻進(jìn)行截幀的能力,最簡單的方式是在上傳完成之后由服務(wù)端進(jìn)行視頻截幀并返回推薦的候選封面,但顯然這一步會有大量的等待時間,因此我們采用的是純前端視頻截幀能力。nrO28資訊網(wǎng)——每日最新資訊28at.com
實際上在web投稿頁有多處需要截幀的地方:nrO28資訊網(wǎng)——每日最新資訊28at.com
- 封面推薦:截取多張低清圖在前端進(jìn)行AI打分,基于打分結(jié)果截取最多10張高清圖供UP主選擇
- 封面選幀:對默認(rèn)推薦的幀不滿意,手動獲取準(zhǔn)確時間點的幀畫面
- 分區(qū)&話題推薦:從視頻中截取多幀,打包上傳至后臺進(jìn)行分析后返回推薦結(jié)果
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
過去方案
nrO28資訊網(wǎng)——每日最新資訊28at.com
過去web投稿頁采取兩套視頻截幀方案,wasm優(yōu)先,canvas兜底nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
| Video + CanvasnrO28資訊網(wǎng)——每日最新資訊28at.com | WebAssembly + FFmpegnrO28資訊網(wǎng)——每日最新資訊28at.com |
流程nrO28資訊網(wǎng)——每日最新資訊28at.com | - Video標(biāo)簽 --> 設(shè)置video時間
- canvas context 2d, drawImage()直接成圖
| FFmpeg API調(diào)用+數(shù)據(jù)傳遞為主nrO28資訊網(wǎng)——每日最新資訊28at.com - 視頻文件解封裝
- 逐個讀取關(guān)鍵幀圖像數(shù)據(jù)
- 數(shù)據(jù)層層傳遞
- web端進(jìn)行圖像渲染(webgl / canvas)
|
優(yōu)點nrO28資訊網(wǎng)——每日最新資訊28at.com | - 開發(fā)簡單:利用瀏覽器內(nèi)部的視頻播放器能力
| - 視頻支持性好:幾乎支持所有市面上可見的視頻格式(行業(yè)標(biāo)桿)
|
缺點nrO28資訊網(wǎng)——每日最新資訊28at.com | - 無法進(jìn)行錯誤處理,有時會黑屏,但不報錯
- 不同瀏覽器有形態(tài)各異的表現(xiàn),速度和可用性難以保證
- 播放器本身的緩存或預(yù)加載等機(jī)制帶來性能浪費(fèi)
| - 性能損耗大:相比canvas截幀慢;
- 內(nèi)存消耗大:早期的wasm功能甚至?xí)?dǎo)致頁面崩潰;
- 開發(fā)門檻高,需要了解ffmpeg lib的使用方式,要寫C代碼,需要手動構(gòu)建各類基礎(chǔ)庫
|
nrO28資訊網(wǎng)——每日最新資訊28at.com
現(xiàn)狀:截幀成功率97%左右,封面推薦耗時(去掉極端數(shù)據(jù))nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs是什么
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs于21年9月份推出,是用于在web頁面上對音視頻進(jìn)行底層操縱(如編解碼)的API。nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs是相對底層的API,準(zhǔn)確來說是為有音視頻開發(fā)基礎(chǔ)的人準(zhǔn)備的,對前端同學(xué)來說有一定的門檻。nrO28資訊網(wǎng)——每日最新資訊28at.com
在使用FFmpeg時可直接調(diào)用包裝好的方法,主要門檻在于wasm環(huán)境的配置和構(gòu)建。而使用WebCodecs時則需要基于編解碼的原理手動實現(xiàn)功能。或許后續(xù)WebCodecs將會推出更加上層的API。nrO28資訊網(wǎng)——每日最新資訊28at.com
所以在進(jìn)一步介紹WebCodecs截幀方案之前,我想先介紹一些視頻處理的入門知識,感興趣的可以參考附錄中的鏈接進(jìn)一步學(xué)習(xí)。nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
MP4的入門知識
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
視頻處理的基本概念
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
編碼/解碼:nrO28資訊網(wǎng)——每日最新資訊28at.com
- 視頻的編碼是將原始的圖像信息進(jìn)行變換壓縮等處理,方便傳輸并保證圖像質(zhì)量。解碼則是將壓縮后的文件還原成視頻需要的一連串圖像
- 常見的編碼格式:H.265; mpeg4; vp9 ……
封裝/解封裝:nrO28資訊網(wǎng)——每日最新資訊28at.com
- 一個視頻文件可能包含多個音頻和視頻流,通過封裝格式將他們聚合在一起,在使用時按照規(guī)則逐步解析
- 常見的封裝格式:mov,mp4,m4a,3gp,3g2; matroska; flv; avi ……
在這里簡單介紹下.mp4文件常用的h264編碼以及MP4封裝nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
編碼-幀內(nèi)編碼(以JPEG圖片壓縮算法為例)
nrO28資訊網(wǎng)——每日最新資訊28at.com
利用人眼的生物特性結(jié)合數(shù)學(xué)方法進(jìn)行數(shù)據(jù)壓縮,并確保圖片質(zhì)量。主要步驟:nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
具體流程在這就不展開了,總之,經(jīng)過壓縮后圖片的文件大小將有非常顯著的縮小nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
??nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
原圖大小:1620*1080*3/1024/1204 = 4.25MB ----> 編碼后大小:856KBnrO28資訊網(wǎng)——每日最新資訊28at.com
PS:效果僅供參考,兩者皆為經(jīng)過JPEG壓縮的圖片,只不過壓縮比不同nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
編碼-幀間編碼
nrO28資訊網(wǎng)——每日最新資訊28at.com
盡管經(jīng)過幀內(nèi)編碼的壓縮,圖片已經(jīng)有了很明顯的體積減少,但存儲視頻的每一幀是依然是很不明智的行為。因此需要幀間編碼。nrO28資訊網(wǎng)——每日最新資訊28at.com
通常有兩種方式進(jìn)行幀間編碼:動態(tài)補(bǔ)償+幀間差異nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
動態(tài)補(bǔ)償
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
通常,兩個連續(xù)的幀之間是存在相同部分的,只是位置發(fā)生了變化因此可以通過存儲 塊的索引 + 偏移量(向量)以減少存儲體積nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
幀間差異
nrO28資訊網(wǎng)——每日最新資訊28at.com
僅有動態(tài)補(bǔ)償還不夠還原每一幀的畫面,還需要通過兩幀之間的diff幀來輔助還原nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
diff幀的畫面通常信息量比較低,因此通過幀內(nèi)壓縮會獲得很高的壓縮比nrO28資訊網(wǎng)——每日最新資訊28at.com
使用這兩種方法,結(jié)合上一幀參考幀,便可以獲得當(dāng)前幀了nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
不同的幀類型
nrO28資訊網(wǎng)——每日最新資訊28at.com
對應(yīng)的,產(chǎn)生了三種幀類型nrO28資訊網(wǎng)——每日最新資訊28at.com
I 幀:俗稱的關(guān)鍵幀,僅使用了幀內(nèi)編碼,可以被獨(dú)立還原為圖像nrO28資訊網(wǎng)——每日最新資訊28at.com
P幀:幀的圖像還原依賴前一幀的解碼結(jié)果nrO28資訊網(wǎng)——每日最新資訊28at.com
B幀:幀的圖像還原依賴前一幀與后一幀的解碼結(jié)果nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
幀的展示順序與解碼順序可能是不一樣的nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
封裝
nrO28資訊網(wǎng)——每日最新資訊28at.com
MP4封裝文件基本結(jié)構(gòu):所有數(shù)據(jù)存放在box中nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs截幀方案
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
設(shè)想一個問題:只使用一個編程語言的基本API,如何最高效地獲取一個.mp4文件中的某一個時間點所在的圖像?nrO28資訊網(wǎng)——每日最新資訊28at.com
在了解了上面的基本知識后,我們可以分4步解決這個問題:nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
不同于播放器:截幀不需要預(yù)解碼緩存等步驟。為了保證性能,需要多少數(shù)據(jù)拿多少,拿多少處理多少,避免多余的文件讀取和解析造成性能和內(nèi)存的浪費(fèi)。nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
元數(shù)據(jù)讀取&解析
nrO28資訊網(wǎng)——每日最新資訊28at.com
1. 讀取文件頭部8byte的數(shù)據(jù),按照box的header規(guī)則逐個獲取各box的位置以及大小nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
PS:moov可能在文件的末尾,順序不固定nrO28資訊網(wǎng)——每日最新資訊28at.com
2. 將moov box所在文件塊切片,提供給解封裝器解析,獲取到:nrO28資訊網(wǎng)——每日最新資訊28at.com
- 該視頻的詳細(xì)編碼參數(shù)
- 所有幀的索引信息
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
尋幀
nrO28資訊網(wǎng)——每日最新資訊28at.com
策略:幀的時間戳并不是連續(xù)的的 → 某個時間點對應(yīng)的幀可能并不存在 → 使用距離最近的幀nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
獲取到最近的關(guān)鍵幀和非關(guān)鍵幀之后,則要根據(jù)截幀的需求提供不同的文件塊給解碼器解碼nrO28資訊網(wǎng)——每日最新資訊28at.com
只提供關(guān)鍵幀速度更快,適合精度不高的場景(封面推薦),準(zhǔn)確截幀適合精度要求高的場景(封面選幀)nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
整體過程
nrO28資訊網(wǎng)——每日最新資訊28at.com
由于解封裝器(mp4box.js)和解碼器(WebCodecs-VideoDecoder)本身為流式設(shè)計,優(yōu)先服務(wù)于流式的應(yīng)用場景(如直播視頻流,點播視頻流,需要通過網(wǎng)絡(luò)請求分塊獲取到文件內(nèi)容)。而視頻截幀是一個本地場景,已經(jīng)有了完整的文件。且視頻截幀的API最好是類似同步的方式,在一個方法調(diào)用中完成所有的幀截取,并一起返回。nrO28資訊網(wǎng)——每日最新資訊28at.com
因此設(shè)計了通過事件拋出以及定時器機(jī)制以達(dá)到對內(nèi)部流式依賴庫的包裝。nrO28資訊網(wǎng)——每日最新資訊28at.com
同時將計算密集的解封裝、解碼、渲染工作擋在獨(dú)立的web worker中執(zhí)行,確保宿主頁面運(yùn)行流暢不受影響。nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
性能分析
nrO28資訊網(wǎng)——每日最新資訊28at.com
本地測試:nrO28資訊網(wǎng)——每日最新資訊28at.com
測試機(jī)上模擬了web投稿頁場景,對WebCodecs / WebAssembly / Canvas 三種截幀方式的性能進(jìn)行了測試。nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
測試樣本:720p視頻2個,1080p視頻3個,2k視頻1個,4k視頻3個nrO28資訊網(wǎng)——每日最新資訊28at.com
測試環(huán)境:2020 M1 MacBook pro, 公司測試windows本(i5-1135G7 1.38~2.40GHz)nrO28資訊網(wǎng)——每日最新資訊28at.com
測試方式:在不同測試機(jī)上對每個視頻跑三次測試用例,共81次nrO28資訊網(wǎng)——每日最新資訊28at.com
測試用例:模擬web投稿頁截幀流程,數(shù)量,分辨率保持相同nrO28資訊網(wǎng)——每日最新資訊28at.com
實際場景中:視頻的編碼,分辨率,壓制參數(shù)等都會對截幀性能有影響,在這里以分辨率進(jìn)行粗略的分類nrO28資訊網(wǎng)——每日最新資訊28at.com
線上數(shù)據(jù):nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
圖片nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
總結(jié):nrO28資訊網(wǎng)——每日最新資訊28at.com
- 隨著視頻規(guī)格的提升,webcodecs的截幀速度為wasm和canvas的 2.5~5 倍
- 提前 3~13s 完成頁面所需的截幀任務(wù),用戶能夠更快的看到推薦結(jié)果
- 在內(nèi)存消耗上有一定的降低
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs截幀方案的優(yōu)點&缺點nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
優(yōu)點nrO28資訊網(wǎng)——每日最新資訊28at.com
- 速度很快,受視頻規(guī)格影響小
- 讀取文件少
- 內(nèi)存占用有一定降低,且表現(xiàn)穩(wěn)定
缺點nrO28資訊網(wǎng)——每日最新資訊28at.com
- 依賴解封裝器的實現(xiàn),當(dāng)前使用了mp4box.js作為解封裝器,約能覆蓋95%的視頻
- 目前僅mp4和webm的解封裝器較完善
- WebCodecs瀏覽器支持性一般,當(dāng)前為85%左右
規(guī)劃nrO28資訊網(wǎng)——每日最新資訊28at.com
- 作為web投稿頁首選截幀方式,根據(jù)線上表現(xiàn)做進(jìn)一步優(yōu)化
- 其他封裝格式的視頻支持:支持webm封裝格式(已支持,且開源了mkv demuxer)
- 開源
nrO28資訊網(wǎng)——每日最新資訊28at.com
附錄nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
jpeg壓縮算法介紹:nrO28資訊網(wǎng)——每日最新資訊28at.com
- 我站:https://www.bilibili.com/video/BV1TZ4y1S7iG
- 知乎:影像算法解析——JPEG 壓縮算法 - 知乎(https://zhuanlan.zhihu.com/p/40356456)
視頻編碼介紹:https://www.youtube.com/watch?v=QoZ8pccsYo4nrO28資訊網(wǎng)——每日最新資訊28at.com
不同的幀類型:I, P, and B-frames - Differences and Use Cases Made Easy - OTTVerse(https://ottverse.com/i-p-b-frames-idr-keyframes-differences-usecases)nrO28資訊網(wǎng)——每日最新資訊28at.com
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)nrO28資訊網(wǎng)——每日最新資訊28at.com
MP4封裝類型介紹:mp4封裝格式各box類型講解及IBP幀計算 - 知乎(https://zhuanlan.zhihu.com/p/457888765)nrO28資訊網(wǎng)——每日最新資訊28at.com
在線MP4解析工具:Online Mp4 Parser(https://www.onlinemp4parser.com/)nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs官方說明:WebCodecs(https://w3c.github.io/webcodecs/#videodecoder-interface)nrO28資訊網(wǎng)——每日最新資訊28at.com
WebCodecs代碼示例:https://github.com/w3c/webcodecsnrO28資訊網(wǎng)——每日最新資訊28at.com
本期作者nrO28資訊網(wǎng)——每日最新資訊28at.com
張鋒嗶哩嗶哩資深開發(fā)工程師nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
nrO28資訊網(wǎng)——每日最新資訊28at.com
本文鏈接:http://www.www897cc.com/showinfo-26-70451-0.html基于WebCodecs的網(wǎng)頁端高性能視頻截幀
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 一文搞懂設(shè)計模式—責(zé)任鏈模式
下一篇: Go Gin框架實現(xiàn)優(yōu)雅地重啟和停止