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

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

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

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

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

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

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

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

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

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

圖片

過去方案

過去web投稿頁采取兩套視頻截幀方案，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)	開發(fā)簡單：利用瀏覽器內(nèi)部的視頻播放器能力	視頻支持性好：幾乎支持所有市面上可見的視頻格式（行業(yè)標(biāo)桿）
缺點(diǎn)	無法進(jìn)行錯(cuò)誤處理，有時(shí)會(huì)黑屏，但不報(bào)錯(cuò) 不同瀏覽器有形態(tài)各異的表現(xiàn)，速度和可用性難以保證播放器本身的緩存或預(yù)加載等機(jī)制帶來性能浪費(fèi)	性能損耗大：相比canvas截幀慢；內(nèi)存消耗大：早期的wasm功能甚至?xí)?dǎo)致頁面崩潰；開發(fā)門檻高，需要了解ffmpeg lib的使用方式，要寫C代碼，需要手動(dòng)構(gòu)建各類基礎(chǔ)庫

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

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

WebCodecs是什么

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

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

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

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

MP4的入門知識(shí)

視頻處理的基本概念

圖片

編碼/解碼：

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

封裝/解封裝：

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

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

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

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

圖片

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

圖片

原圖大小：1620*1080*3/1024/1204 = 4.25MB ----> 編碼后大小：856KB

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

編碼-幀間編碼

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

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

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

圖片

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

幀間差異

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

圖片

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

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

圖片

不同的幀類型

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

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

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

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

圖片

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

封裝

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

圖片

WebCodecs截幀方案

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

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

圖片

不同于播放器：截幀不需要預(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)對應(yīng)的幀可能并不存在 → 使用距離最近的幀

圖片

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

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

整體過程

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

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

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

性能分析

本地測試：

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

圖片

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

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

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

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

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

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

圖片

總結(jié)：

隨著視頻規(guī)格的提升，webcodecs的截幀速度為wasm和canvas的 2.5~5 倍
提前 3~13s 完成頁面所需的截幀任務(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投稿頁首選截幀方式，根據(jù)線上表現(xiàn)做進(jìn)一步優(yōu)化
其他封裝格式的視頻支持：支持webm封裝格式（已支持，且開源了mkv demuxer）
開源

附錄

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官方說明：WebCodecs（https://w3c.github.io/webcodecs/#videodecoder-interface）

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

本期作者

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

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

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

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

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

標(biāo)簽：

熱門焦點(diǎn)

之家push系統(tǒng)迭代之路

前言在這個(gè)信息爆炸的互聯(lián)網(wǎng)時(shí)代，能夠及時(shí)準(zhǔn)確獲取信息是當(dāng)今社會(huì)要解決的關(guān)鍵問題之一。隨著之家用戶體量和內(nèi)容規(guī)模的不斷增大，傳統(tǒng)的靠"主動(dòng)拉"獲取信息的方式已不能滿足用
三言兩語說透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術(shù)，可以幫助我們寫出更加優(yōu)雅、泛用的函數(shù)。本文將首先介紹柯里化和反柯里化的概念、實(shí)現(xiàn)原理和應(yīng)用
JVM優(yōu)化：實(shí)戰(zhàn)OutOfMemoryError異常

一、Java堆溢出堆內(nèi)存中主要存放對象、數(shù)組等，只要不斷地創(chuàng)建這些對象，并且保證 GC Roots 到對象之間有可達(dá)路徑來避免垃圾收集回收機(jī)制清除這些對象，當(dāng)這些對象所占空間超過
騰訊蓋樓，字節(jié)拆墻

來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之“想重溫暴刷深淵、30+技能搭配暴搓到爽的游戲體驗(yàn)嗎？一起上晶核，即刻暴打！”曾憑借直播騰訊旗下代理格斗游戲《DNF》一
2299元起！iQOO Pad開啟預(yù)售：性能最強(qiáng)天璣平板

5月23日，iQOO如期舉行了新品發(fā)布會(huì)，除了首發(fā)安卓最強(qiáng)旗艦處理器的iQOO Neo8系列新機(jī)外，還在發(fā)布會(huì)上推出了旗下首款平板電腦——iQOO Pad，其搭載了天璣
iQOO Neo8 Pro搶先上架：首發(fā)天璣9200+ 安卓性能之王

經(jīng)過了一段時(shí)間的密集爆料，昨日iQOO官方如期對外宣布：將于5月23日推出全新的iQOO Neo8系列新品，官方稱這是一款擁有旗艦級(jí)性能調(diào)校的作品。隨著發(fā)布時(shí)
質(zhì)感不錯(cuò)！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

一直以來，OPPO K系列機(jī)型都保持著較為均衡的產(chǎn)品體驗(yàn)，歷來都是2K價(jià)位的明星機(jī)型，去年推出的OPPO K10和OPPO K10 Pro兩款機(jī)型憑借各自的出色配置，堪稱有
朋友圈可以修改可見范圍了蘋果用戶可率先體驗(yàn)

近日，iOS用戶迎來微信8.0.27正式版更新，除了可更換二維碼背景外，還新增了多項(xiàng)實(shí)用功能。在新版微信中，朋友圈終于可以修改可見范圍，簡單來說就是已發(fā)布的朋友圈
世界人工智能大會(huì)國際日開幕式活動(dòng)在世博展覽館開啟

30日上午，世界人工智能大會(huì)國際日開幕式活動(dòng)在世博展覽館開啟，聚集國際城市代表、重量級(jí)院士專家、國際創(chuàng)新企業(yè)代表，共同打造人工智能交流平臺(tái)。上海市副市

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

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

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

過去方案

WebCodecs是什么

MP4的入門知識(shí)

視頻處理的基本概念

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

編碼-幀間編碼

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

幀間差異

不同的幀類型

封裝

WebCodecs截幀方案

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

尋幀

整體過程

性能分析

之家push系統(tǒng)迭代之路

三言兩語說透柯里化和反柯里化

JVM優(yōu)化：實(shí)戰(zhàn)OutOfMemoryError異常

騰訊蓋樓，字節(jié)拆墻

2299元起！iQOO Pad開啟預(yù)售：性能最強(qiáng)天璣平板

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

質(zhì)感不錯(cuò)！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

朋友圈可以修改可見范圍了蘋果用戶可率先體驗(yàn)

世界人工智能大會(huì)國際日開幕式活動(dòng)在世博展覽館開啟

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊