當前位置：首頁 > 科技 > 軟件

基于WebCodecs的網頁端高性能視頻截幀

來源：責編：時間：2024-02-01 12:51:25 227觀看

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

業務介紹

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

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

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

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

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

圖片

過去方案

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

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

現狀：截幀成功率97%左右，封面推薦耗時（去掉極端數據）

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

WebCodecs是什么

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

WebCodecs是相對底層的API，準確來說是為有音視頻開發基礎的人準備的，對前端同學來說有一定的門檻。

在使用FFmpeg時可直接調用包裝好的方法，主要門檻在于wasm環境的配置和構建。而使用WebCodecs時則需要基于編解碼的原理手動實現功能。或許后續WebCodecs將會推出更加上層的API。

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

MP4的入門知識

視頻處理的基本概念

圖片

編碼/解碼：

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

封裝/解封裝：

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

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

編碼-幀內編碼（以JPEG圖片壓縮算法為例）

利用人眼的生物特性結合數學方法進行數據壓縮，并確保圖片質量。主要步驟：

圖片

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

圖片

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

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

編碼-幀間編碼

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

通常有兩種方式進行幀間編碼：動態補償+幀間差異

動態補償

圖片

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

幀間差異

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

圖片

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

使用這兩種方法，結合上一幀參考幀，便可以獲得當前幀了

圖片

不同的幀類型

對應的，產生了三種幀類型

I 幀：俗稱的關鍵幀，僅使用了幀內編碼，可以被獨立還原為圖像

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

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

圖片

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

封裝

MP4封裝文件基本結構：所有數據存放在box中

圖片

WebCodecs截幀方案

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

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

圖片

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

元數據讀取&解析

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

圖片

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

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

該視頻的詳細編碼參數
所有幀的索引信息

圖片

尋幀

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

圖片

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

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

整體過程

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

因此設計了通過事件拋出以及定時器機制以達到對內部流式依賴庫的包裝。

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

性能分析

本地測試：

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

圖片

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

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

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

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

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

線上數據：

圖片

總結：

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

WebCodecs截幀方案的優點&缺點

優點

速度很快，受視頻規格影響小
讀取文件少
內存占用有一定降低，且表現穩定

缺點

依賴解封裝器的實現，當前使用了mp4box.js作為解封裝器，約能覆蓋95%的視頻
目前僅mp4和webm的解封裝器較完善
WebCodecs瀏覽器支持性一般，當前為85%左右

規劃

作為web投稿頁首選截幀方式，根據線上表現做進一步優化
其他封裝格式的視頻支持：支持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

本期作者

張鋒嗶哩嗶哩資深開發工程師

本文鏈接：http://www.tebozhan.com/showinfo-26-70451-0.html基于WebCodecs的網頁端高性能視頻截幀

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：一文搞懂設計模式—責任鏈模式

下一篇： Go Gin框架實現優雅地重啟和停止

標簽：

熱門焦點

鴻蒙OS 4.0公測機型公布：甚至連nova6都支持

華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
官方承諾：K60至尊版將會首批升級MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
Mate60手機殼曝光致敬自己的經典設計

8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
消息稱迪士尼要拍真人版《魔發奇緣》：女主可能也找黑人演員

8月5日消息，迪士尼確實有點忙，忙著將不少動畫改成真人版，繼《美人魚》后，真人版《白雪公主》、《魔發奇緣》也在路上了。據外媒消息稱，迪士尼將打造真人版
電視息屏休眠仍有網絡上傳愛奇藝被質疑“薅消費者羊毛”

記者丨寧曉敏見習生丨汗青出品丨鰲頭財經（theSankei）前不久，愛奇藝發布了一份亮眼的一季報，不僅營收和會員營收創造歷史最佳表現，其運營利潤也連續6個月實現增長。自去年年初
破圈是B站頭上的緊箍咒

來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之每年的暑期檔都少不了瞄準追劇女孩們的古偶劇集，2021年有優酷的《山河令》，2022年有愛奇藝的《蒼蘭訣》，今年卻輪到小破站抓住了追
三星電子Q2營收60萬億韓元存儲業務營收同比仍下滑超過50%

7月27日消息，據外媒報道，從三星電子所發布的財報來看，他們主要利潤來源的存儲芯片業務在今年二季度仍不樂觀，營收同比仍在大幅下滑，所在的設備解決方案
OPPO Reno10 Pro英雄聯盟定制禮盒公布：薩勒芬妮同款配色夢幻十足

5月24日，OPPO推出了全新的OPPO Reno 10系列，包含OPPO Reno10、OPPO Reno10 Pro和OPPO Reno10 Pro+三款新機，全系標配了超光影長焦鏡頭，是迄今為止拍照
榮耀Magicbook V 14 2021曙光藍版本正式開售，擁有觸摸屏

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

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

基于WebCodecs的網頁端高性能視頻截幀

業務介紹

過去方案

WebCodecs是什么

MP4的入門知識

視頻處理的基本概念

編碼-幀內編碼（以JPEG圖片壓縮算法為例）

編碼-幀間編碼

動態補償

幀間差異

不同的幀類型

封裝

WebCodecs截幀方案

元數據讀取&解析

尋幀

整體過程

性能分析

鴻蒙OS 4.0公測機型公布：甚至連nova6都支持

官方承諾：K60至尊版將會首批升級MIUI 15

Mate60手機殼曝光致敬自己的經典設計

消息稱迪士尼要拍真人版《魔發奇緣》：女主可能也找黑人演員

電視息屏休眠仍有網絡上傳愛奇藝被質疑“薅消費者羊毛”

破圈是B站頭上的緊箍咒

三星電子Q2營收60萬億韓元存儲業務營收同比仍下滑超過50%

OPPO Reno10 Pro英雄聯盟定制禮盒公布：薩勒芬妮同款配色夢幻十足

榮耀Magicbook V 14 2021曙光藍版本正式開售，擁有觸摸屏

最新推薦

猜你喜歡

熱門推薦

相關資訊