H5视频前端框架设计：WASM与MP4播放方案

"该文档详细介绍了基于HTML5的视频前端框架设计，主要涉及h265格式解码，采用WebAssembly (WASM)、WebSocket和WebGL技术。框架包括两个部分：previewPlayer（预览）和playbackPlayer（回放），分别支持WASM和MP4播放方案。此外，还提到了package模块，它是一个公用封装库，以及utils工具包，包含各种辅助功能。文档中列出了整体架构和不同播放方案的主子线程交互流程。" 在设计这个HTML5视频前端框架时，开发者考虑了多种技术的集成和优化。首先，支持h265格式解码，这是现代视频编码标准，能提供更高压缩效率和更清晰的视频质量。为了实现这一点，框架利用了WebAssembly（WASM）技术，这是一种在浏览器中运行接近原生速度的代码的技术。WASM允许在浏览器环境中执行编译后的C/C++代码，使得高性能的视频解码成为可能。 在预览和回放过程中，框架提供了两种播放方案：WASM方案和MP4方案。WASM方案使用子线程进行解码，主线程通过WebSocket获取数据并进行WebGL渲染。MP4方案则相对简单，数据通过WebSocket获取后，直接在主线程进行处理，然后由video标签播放。 预览过程中的WASM方案，主线程先接收数据并保存在缓冲区，等待子线程加载完成。当子线程加载完成后，主线程将帧头解析后的数据发送给子线程进行解码，解码后的数据再返回主线程，由WebGL进行渲染。由于解析速度通常快于数据传输，因此一旦缓冲区数据解析完毕，后续数据可以直接传递给子线程。 回放过程中的WASM方案与预览类似，但处理多通道数据，需要对不同通道的数据进行PTS时间同步，确保正确的播放顺序。 对于MP4方案，无论是预览还是回放，主线程接收数据后，仅解析帧头，然后将帧数据交给子线程进行MP4格式封装，预览时直接添加到MediaSource的sourcebuffer，回放时则需要处理PTS同步问题。 package模块是预览和回放共用的封装库，包含了MP4组装、WebSocket封装、WebGL渲染和StreamaxFrame视频帧头解析等功能。同时，utils工具包提供了logger日志工具、convert转换工具和common公共方法，为整个框架提供便利的支持。 整体来看，这个框架设计充分利用了现代Web技术的优势，实现了高效、灵活的视频处理和播放，特别是在处理h265格式时，通过WASM技术提高了解码性能，结合WebSocket和WebGL，确保了流畅的用户体验。