基於Web Assembly的H265播放器實現

項目概述

隨着視頻編碼技術的發展，相比H.264，H.265具備同等畫質體積一半、畫質更清晰細膩、編碼效率更高等諸多優點。 但因版權等因素主流瀏覽器還不支持H.265的解碼，所以須要專門的插件實現解碼。本項目基於Web Assembly(封裝FFmpeg庫)、JS解封裝、Canvas投影以及AudioContext，是Web端的H265播放器的完整解決方案。

播放器顯示效果以下：

 

功能簡介

播放器主要分爲UI、Loader、數據處理、數據渲染四個部分和3個線程。一個是主線程，負責界面控制、下載控制、數據流控制、音視頻控制等功能；另外一個是數據加載線程，負責meta數據和視頻分片數據的請求；還有一個是數據處理線程，即負責視頻數據的解封裝和視頻解碼。

數據處理流程以下：

 

播放器的實現主要分爲如下四個部分：

• UI：播放器顯示，包括screen和controlbar兩部分，screen包括視頻圖像展現、彈窗、海報圖等。controlbar包括進度條、播放按鈕、音量控制等組件。
• Loader：負責媒體數據的加載和解析，目前僅支持HLS協議。經過worker實現數據的請求，加載完成後，根據設置緩存大小，存儲請求的ts數據，當達到緩存上限後中止加載。解碼器從ts數據隊列獲取ts後，Hls Loader會把請求過的ts釋放，繼續加載下一個ts，達到最大緩存限制後中止加載
• 數據處理：主要包括數據解封裝和H265解碼，解封裝經過demuxe.js這個類庫實現，H265解碼經過ffmpeg打包生成的wasm軟解來實現，cpu使用率較高。
• 數據渲染：包括視屏渲染和音頻渲染，視頻渲染經過ImagePlayer把解碼後的yuv數據直接渲染到canvas，音頻經過AudioPlayer把AAC數據解碼後進行音頻播放，最後經過pts實現音視頻的同步。同步策略是以音頻爲參考，判斷當前視頻pts與獲取到的音頻pts的差值來調整視頻顯示時間來達到音視頻同步。

項目地址

本項目是一個公開的基礎可用版本，並不含有具體的業務代碼。業務可基於此項目進行具體業務實現。本項目代碼：https://github.com/goldvideo

包含三個相關項目：

• demuxer: JS解封裝TS/MP4工具，負責TS碼流的解封裝與轉封裝
• decoder_wasm: 基於開源ffmpeg的H.265解碼器，結合WebAssembly技術，實現前端視頻解碼
• h265player: H265播放器界面，包括數據加載、控制器、播放流程與畫面同步渲染等