主要观点总结
文章介绍了基于WebCodecs的网页端高性能视频截帧技术，通过使用WASM结合FFmpeg和WebCodecs实现更高效的视频截帧功能。文章详细描述了业务背景、方案设想、解决方案、核心思路、具体实现步骤以及最后的结果和数据。同时，也提到了使用web-demuxer npm包来简化使用WebAssmbly+FFmpeg的过程，并通过简单的代码实现视频截帧。最后，文章讨论了WebCodecs的未来发展和使用WASM封装更多能力的可能性。
关键观点总结
关键观点1: 业务背景和目标
B站Web投稿页需要高效的视频截帧功能，解决部分视频格式无法解封装导致的性能问题。结合WebCodecs和WASM实现高性能截帧，提高推荐体验。
关键观点2: 方案设想和核心思路
联想到之前使用WebAssembly+FFmpeg的经验，提出通过复用FFmpeg的Demux能力结合WebCodecs的Decode能力，实现优势互补。将Demux环节交给WASM+FFmpeg支持更多格式，Decode环节交给WebCodecs提升性能。
关键观点3: 具体实现步骤和难点
包括在C中获取WebCodecs解码所需数据的关键数据结构，生成WebAVStream和WebAVPacket结构体，实现JS与C的双向通信，以及截帧SDK中基于原始数据的转换和适配。其中，生成codec_string是难点之一。
关键观点4: 结果和效益
使用WASM Demuxer+WebCodecs截帧后，封面推荐耗时P90减少了约40%，因视频封装格式不支持导致的WebCodecs截帧失败错误量下降了约72%。
关键观点5: web-demuxer的出现和便利
为了简化使用WebAssmbly+FFmpeg的过程，提供了一个名为web-demuxer的npm包。通过简单的代码即可实现视频截帧，同时也支持以ReadableStream逐帧读取的方式进行更复杂的场景。
文章预览
前言 B 站 Web 投稿页面通过结合 WASM + FFmpeg 和 WebCodecs 实现了更高效的视频截帧功能，解决了部分视频格式无法解封装而导致的性能问题。今日前端早读课文章由 @Francis 分享，公号：哔哩哔哩技术授权。 正文从这开始～～ 业务背景 在 B 站 Web 投稿页中，封面、分区、标签的推荐功能都需要使用到视频截帧能力。历史上我们通过 WebAssembly + FFmpeg 来实现视频截帧。从去年开始，开始引入 WebCodecs 进行高性能截帧，截帧性能有显著提升，从而给用户带来更快速的推荐体验。 但目前 WebCodecs 只提供了用于解码的能力，并没有提供对应解封装能力，只能自行实现。此前，我们通过 mp4box.js 以及自行开发的 mkv-demuxer，解决了 mp4+mkv 主流视频格式的解封装问题， 实现了 WebCodecs 高性能封面截帧方案的落地。但仍存在近 2% 的视频格式如 flv、avi 等，因为无法解封装
………………………………
