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

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

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

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

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

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

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

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

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

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

圖片

過去方案

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

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

現(xiàn)狀：截幀成功率97%左右，封面推薦耗時（去掉極端數(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時可直接調(diào)用包裝好的方法，主要門檻在于wasm環(huán)境的配置和構(gòu)建。而使用WebCodecs時則需要基于編解碼的原理手動實現(xiàn)功能。或許后續(xù)WebCodecs將會推出更加上層的API。

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

MP4的入門知識

視頻處理的基本概念

圖片

編碼/解碼：

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

封裝/解封裝：

一個視頻文件可能包含多個音頻和視頻流，通過封裝格式將他們聚合在一起，在使用時按照規(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)有了很明顯的體積減少，但存儲視頻的每一幀是依然是很不明智的行為。因此需要幀間編碼。

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

動態(tài)補(bǔ)償

圖片

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

幀間差異

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

圖片

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

使用這兩種方法，結(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è)想一個問題：只使用一個編程語言的基本API，如何最高效地獲取一個.mp4文件中的某一個時間點所在的圖像？

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

圖片

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

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

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

圖片

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

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

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

圖片

尋幀

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

圖片

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

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

整體過程

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

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

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

性能分析

本地測試：

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

圖片

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

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

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

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

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

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

圖片

總結(jié)：

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

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

優(yōu)點

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

缺點

依賴解封裝器的實現(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幀計算 - 知乎（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://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)雅地重啟和停止

標(biāo)簽：

熱門焦點

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

在今天的Redmi后性能時代戰(zhàn)略發(fā)布會結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
石頭智能洗地機(jī)A10 Plus體驗：雙向自清潔治好了我的懶癌

一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個產(chǎn)品名上就不難看出，這次石頭推出的并不是常見的掃地機(jī)器
分布式系統(tǒng)中的CAP理論，面試必問，你理解了嘛？

對于剛剛接觸分布式系統(tǒng)的小伙伴們來說，一提起分布式系統(tǒng)，就感覺高大上，深不可測。而且看了很多書和視頻還是一臉懵逼。這篇文章主要使用大白話的方式，帶你理解一下分布式系統(tǒng)
一篇文章帶你了解 CSS 屬性選擇器

屬性選擇器對帶有指定屬性的 HTML 元素設(shè)置樣式。可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。一、了解屬性選擇器CSS屬性選擇器提供了一種簡單而
每天一道面試題-CPU偽共享

前言：了不起：又到了每天一到面試題的時候了！學(xué)弟，最近學(xué)習(xí)的怎么樣啊了不起學(xué)弟：最近學(xué)習(xí)的還不錯，每天都在學(xué)習(xí)，每天都在進(jìn)步！了不起：那你最近學(xué)習(xí)的什么呢？了不起學(xué)弟：最近在學(xué)習(xí)C
三星Galaxy Z Fold/Flip 5國行售價曝光：最低7499元/12999元起

據(jù)官方此前宣布，三星將于7月26日也就是明天在韓國首爾舉辦Unpacked活動，屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
微軟發(fā)布Windows 11新版引入全新任務(wù)欄狀態(tài)

近日，微軟發(fā)布了Windows 11新版，而Build 22563更新主要引入了幾周前曝光的平板模式任務(wù)欄等，系統(tǒng)更流暢了。更新中，Windows 11加入了專門針對平板優(yōu)化的任務(wù)欄
AI藝術(shù)欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

光影交錯的鏡像世界，虛實幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場景都出現(xiàn)在2019世界人工智能大會的舞臺上。8月29日至31日，“AI藝術(shù)欣賞體驗會”在上海
電博會與軟博會實現(xiàn)"線下+云端"的雙線融合

在本次“電博會”與“軟博會”雙展會利好條件的加持下，既可以發(fā)揮展會拉動人流、信息流、資金流實現(xiàn)快速交互流動的作用，繼而推動區(qū)域經(jīng)濟(jì)良性發(fā)展；又可以聚

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

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

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

過去方案

WebCodecs是什么

MP4的入門知識

視頻處理的基本概念

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

編碼-幀間編碼

動態(tài)補(bǔ)償

幀間差異

不同的幀類型

封裝

WebCodecs截幀方案

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

尋幀

整體過程

性能分析

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

石頭智能洗地機(jī)A10 Plus體驗：雙向自清潔治好了我的懶癌

分布式系統(tǒng)中的CAP理論，面試必問，你理解了嘛？

一篇文章帶你了解 CSS 屬性選擇器

每天一道面試題-CPU偽共享

三星Galaxy Z Fold/Flip 5國行售價曝光：最低7499元/12999元起

微軟發(fā)布Windows 11新版引入全新任務(wù)欄狀態(tài)

AI藝術(shù)欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

電博會與軟博會實現(xiàn)"線下+云端"的雙線融合

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊