當(dāng)前位置：首頁(yè) > 科技 > 軟件

基于WebCodecs的網(wǎng)頁(yè)端高性能視頻截幀

來(lái)源：責(zé)編：時(shí)間：2024-02-01 12:51:25 204觀看

導(dǎo)讀業(yè)務(wù)介紹web投稿頁(yè)是B站的主要投稿來(lái)源，有很多高粉UP主使用web端進(jìn)行投稿。封面部分是投稿過(guò)程中耗時(shí)占比較高的步驟，因此在過(guò)去，web投稿頁(yè)已上線了自動(dòng)的封面截取&推薦功能，有效提升了用戶體驗(yàn)。同時(shí)在此過(guò)程中有了一定

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

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

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

自動(dòng)封面功能依賴于對(duì)用戶上傳視頻進(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兜底

	Video + Canvas	WebAssembly + FFmpeg
流程	Video標(biāo)簽 --> 設(shè)置video時(shí)間 canvas context 2d, drawImage()直接成圖	FFmpeg API調(diào)用+數(shù)據(jù)傳遞為主視頻文件解封裝逐個(gè)讀取關(guān)鍵幀圖像數(shù)據(jù) 數(shù)據(jù)層層傳遞 web端進(jìn)行圖像渲染（webgl / canvas）
優(yōu)點(diǎn)	開(kāi)發(fā)簡(jiǎn)單：利用瀏覽器內(nèi)部的視頻播放器能力	視頻支持性好：幾乎支持所有市面上可見(jiàn)的視頻格式（行業(yè)標(biāo)桿）
缺點(diǎn)	無(wú)法進(jìn)行錯(cuò)誤處理，有時(shí)會(huì)黑屏，但不報(bào)錯(cuò) 不同瀏覽器有形態(tài)各異的表現(xiàn)，速度和可用性難以保證播放器本身的緩存或預(yù)加載等機(jī)制帶來(lái)性能浪費(fèi)	性能損耗大：相比canvas截幀慢；內(nèi)存消耗大：早期的wasm功能甚至?xí)?dǎo)致頁(yè)面崩潰；開(kāi)發(fā)門(mén)檻高，需要了解ffmpeg lib的使用方式，要寫(xiě)C代碼，需要手動(dòng)構(gòu)建各類基礎(chǔ)庫(kù)

現(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 ----> 編碼后大小：856KB

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)前幀了

圖片

不同的幀類型

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

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

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

B幀：幀的圖像還原依賴前一幀與后一幀的解碼結(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最好是類似同步的方式，在一個(gè)方法調(diào)用中完成所有的幀截取，并一起返回。

因此設(shè)計(jì)了通過(guò)事件拋出以及定時(shí)器機(jī)制以達(dá)到對(duì)內(nè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)行粗略的分類

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

圖片

總結(jié)：

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

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

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

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

缺點(diǎn)

依賴解封裝器的實(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

不同的幀類型：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封裝類型介紹：mp4封裝格式各box類型講解及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ā)工程師

本文鏈接：http://www.www897cc.com/showinfo-26-70451-0.html基于WebCodecs的網(wǎng)頁(yè)端高性能視頻截幀

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇：一文搞懂設(shè)計(jì)模式—責(zé)任鏈模式

下一篇： Go Gin框架實(shí)現(xiàn)優(yōu)雅地重啟和停止

標(biāo)簽：

熱門(mén)焦點(diǎn)

中興AX5400Pro+上手體驗(yàn)：再升級(jí) 雙2.5G網(wǎng)口+USB 3.0這次全都有

2021年11月的時(shí)候，中興先后發(fā)布了兩款路由器產(chǎn)品，中興AX5400和中興AX5400 Pro，從產(chǎn)品命名上就不難看出這是隸屬于同一系列的，但在外觀設(shè)計(jì)上這兩款產(chǎn)品可以說(shuō)是完全沒(méi)一點(diǎn)關(guān)系
5月iOS設(shè)備好評(píng)榜：iPhone 14僅排第43？

來(lái)到新的一月，安兔兔的各個(gè)榜單又重新匯總了數(shù)據(jù)，像安卓陣營(yíng)的榜單都有著比較大的變動(dòng)，不過(guò)iOS由于設(shè)備的更新?lián)Q代并沒(méi)有那么快，所以相對(duì)來(lái)說(shuō)變化并不大，特別是iOS好評(píng)榜，老款設(shè)
一年經(jīng)驗(yàn)在二線城市面試后端的經(jīng)驗(yàn)分享

忠告這篇文章只適合2年內(nèi)工作經(jīng)驗(yàn)、甚至沒(méi)有工作經(jīng)驗(yàn)的朋友閱讀。如果你是2年以上工作經(jīng)驗(yàn)，請(qǐng)果斷劃走，對(duì)你沒(méi)啥幫助~主人公這篇文章內(nèi)容來(lái)自「升職加薪」星球星友的投稿，坐
“又被陳思誠(chéng)騙了”

作者｜張思齊出品｜眾面（ID：ZhongMian_ZM）如今的國(guó)產(chǎn)懸疑電影，成了陳思誠(chéng)的天下。最近大爆電影《消失的她》票房突破30億斷層奪魁暑期檔，陳思誠(chéng)再度風(fēng)頭無(wú)兩。你可以說(shuō)陳思誠(chéng)的
造車(chē)兩年股價(jià)跌六成，小米的估值邏輯變了嗎？

如果從小米官宣造車(chē)后的首個(gè)交易日起持有小米集團(tuán)的股票，那么截至2023年上半年最后一個(gè)交易日，投資者將浮虧59.16%，同區(qū)間的恒生科技指數(shù)跌幅為52.78%
三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

2023年7月26日，三星電子正式發(fā)布了Galaxy Z Flip5與Galaxy Z Fold5。除此之外，Galaxy Tab S9系列平板電腦以及三星Galaxy Watch6系列智能手表也同期
iQOO Neo8 Pro搶先上架：首發(fā)天璣9200+ 安卓性能之王

經(jīng)過(guò)了一段時(shí)間的密集爆料，昨日iQOO官方如期對(duì)外宣布：將于5月23日推出全新的iQOO Neo8系列新品，官方稱這是一款擁有旗艦級(jí)性能調(diào)校的作品。隨著發(fā)布時(shí)
iQOO Neo8 Pro真機(jī)諜照曝光：天璣9200+和V1+旗艦雙芯加持

去年10月，iQOO推出了iQOO Neo7系列機(jī)型，不僅搭載了天璣9000+，而且是同價(jià)位唯一一款天璣9000+直屏旗艦，一經(jīng)上市便受到了用戶的廣泛關(guān)注。在時(shí)隔半年后，
榮耀Magicbook V 14 2021曙光藍(lán)版本正式開(kāi)售，擁有觸摸屏

榮耀 Magicbook V 14 2021 曙光藍(lán)版本正式開(kāi)售，搭載 i7-11390H 處理器與 MX450 顯卡，配備 16GB 內(nèi)存與 512GB SSD，重 1.48kg，厚 14.5mm，具有 1.5mm 鍵盤(pán)鍵程、

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

基于WebCodecs的網(wǎng)頁(yè)端高性能視頻截幀

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

過(guò)去方案

WebCodecs是什么

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

視頻處理的基本概念

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

編碼-幀間編碼

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

幀間差異

不同的幀類型

封裝

WebCodecs截幀方案

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

尋幀

整體過(guò)程

性能分析

中興AX5400Pro+上手體驗(yàn)：再升級(jí) 雙2.5G網(wǎng)口+USB 3.0這次全都有

5月iOS設(shè)備好評(píng)榜：iPhone 14僅排第43？

一年經(jīng)驗(yàn)在二線城市面試后端的經(jīng)驗(yàn)分享

“又被陳思誠(chéng)騙了”

造車(chē)兩年股價(jià)跌六成，小米的估值邏輯變了嗎？

三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

iQOO Neo8 Pro搶先上架：首發(fā)天璣9200+ 安卓性能之王

iQOO Neo8 Pro真機(jī)諜照曝光：天璣9200+和V1+旗艦雙芯加持

榮耀Magicbook V 14 2021曙光藍(lán)版本正式開(kāi)售，擁有觸摸屏

最新推薦

猜你喜歡

熱門(mén)推薦

相關(guān)資訊