h265player開發
https://github.com/goldvideo/h265player
簡介
隨着視頻編碼技術的發展，相比H.264, H.265同等畫質體積僅為一半、帶寬占用省一半、畫質更細膩等諸多優勢。 但Web瀏覽器還不支持H.265的解碼播放，因此基於Web Assembly(封裝FFmpeg)、JS解封裝、Canvas投影以及AudioContext實現Web端的H265播放。
支持主要瀏覽器及其版本如下：
Chrome（>57） Safari (>11) Firefox (>52)
本項目是一個公開的基礎可用版本，並不含有具體的業務代碼。業務可基於此項目進行具體業務實現。
安裝與測試
下載源碼
#創建根目錄
* mkdir goldvideo
* cd goldvideo
# 下載h265player源碼, 創建h265player目錄
* git clone https://github.com/goldvideo/h265player.git
* cd h265player
# 安裝依賴
* npm install
工程打包
#以下打包命令任選一
* npm run dev #運行開發環境
* npm run test #運行測試環境
* npm run build #打包正式環境
* rollup -c #打包csj與esm版本
Nginx配置(或者其他Server)
server {
listen 8000;
location / {
root <path of goldvideo>/goldvideo;
index index.html index.htm;
autoindex on;
}
}
測試頁面
重啟nginx並訪問demo地址，就能看到播放器畫面，如果可以能正常播放視頻時就表示成功了。http://localhost:8000/h265player/demo/demo.html
如果遇到錯誤，請通過檢查路徑配置以及資源是否加載完成等。您也可以給我們留言反饋問題，我們將盡快回復。
以上就完成了基本安裝，想了解更多詳情，可以接着往下看。
安裝NPM包，參照example快速運行例子[可選]
#可以直接npm安裝構建后的文件，快速運行DEMO
* npm i goldvideo-player
具體參見 goldvideo example
源碼安裝解封裝庫demuxer[可選]
下載 demuxer 庫源碼 或者 從 npm 安裝 (https://www.npmjs.com/package/demuxer)
* cd goldvideo
* git clone https://github.com/goldvideo/demuxer.git
* cd demuxer
* npm install
# 打包模塊，詳情請查看demuxer項目里面的package.json文件
* npm install --global rollup
# 構建demuxer模塊
* rollup -c ./rollup.config.js --environment BUILD_MODE:production
* cd h265player
# 從本地安裝demuxer，調用本地構建的庫
* npm install ../demuxer
源碼編譯WASM解碼庫[可選]
decoder_wasm庫之前已經編譯並復制到 h265player/dist/lib/目錄下。你也可以自己編譯並替換libffmpeg.js與libffmpeg.wasm文件。
#如果想看源碼和編譯過程，可以查看decoder_wasm模塊源碼。
* cd goldvideo
* git clone http://github.com/goldvideo/decoder_wasm.git
* cd decoder_wasm
wasm安裝略微復雜，詳細查看README文件
主要模塊結構
源碼目錄結構
├─goldvideo│ ├─demuxer│ ├─h265player│ ├─decoder_wasm│ ├─example整體架構圖
播放器主要分為UI、Loader、數據處理、數據渲染四個部分和3個線程。一個是主線程，包括界面控制、下載控制、數據流控制、音視頻控制等功能；數據加載線程，完成元數據和數據片段的請求；數據處理線程，完成數據解封裝和解碼。
- 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的差值來調整視頻顯示時間來達到音視頻同步。
具體流程如下：
解封裝器
通過JS實現了視頻數據的解封裝，從而獲取到獨立的視頻（H265）數據和音頻（AAC）數據。詳細信息請參考demuxer模塊：https://github.com/goldvideo/demuxer。
解碼器
通過ffmpeg實現H265數據的軟解碼，如果要在瀏覽器中調用ffmpeg，需要把ffmpeg編譯成wasm進行調用，具體ffmpeg編譯成wasm過程，可參考decoder_wasm
ImagePlayer
通過yuv-canvas實現YUV數據渲染，ImagePlayer中會有一個隊列存儲YUV數據，並計算當前yuv數據的時間長度，大於等於readybufferLength的值時，會觸發ImagePlayerReady事件。當音視頻播放器都處於ready狀態時，H265播放器觸發dataReady事件，開始調用play方法進行視頻播放。
AudioPlayer
Web Audio API
Audio Player的實現基於Web Audio API, 包括AAC音頻流的解碼與PCM數據的播放。
- 解碼：Audio Player模塊接收解封裝模塊發過來的AAC數據流，通過AudioContext的decodeAudioData API，解碼為待后續播放的PCM數據。
- 音頻節點：音頻節點（AudioNode）是Web Audio API中的音頻數據＂處理器＂，Web Audio API通過不同“處理器”對音頻數據做串行處理，最終通過揚聲器（audioContext.destination）播放。
- ScriptProcessorNode：音頻源節點。Web Audio API提供多種音頻源節點以提供音頻數據，如AudioBufferSourceNode， MediaElementAudioSourceNode等。考慮到倍速播放的需求，我們用的是ScriptProcessorNode， 通過onaudioprocess回調函數請求音頻數據。
- GainNode：音量控制節點。
倍速播放
Audio Context的部分音頻節點提供了playbackRate屬性以實現倍速播放的功能，但是音頻在倍速播放的同時，音頻的音調（pitch）也同步地升高/降低。
為實現變速不變調，項目中，我們使用了一個音頻數據處理庫SoundTouchJS，將處理過的變速不變調的音頻數據提供給ScriptProcessorNode。
快速開始
在head標簽中添加如下代碼
<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>
.play-container {
width: 800px;
height: 500px;
}
</style>
創建一個div，作為播放器的容器
<div class="play-container"></div>
新建一個GoldPlay實例對象，傳入相應參數，就可以實現視頻的播放
//播放器容器
let el = doc.querySelector('.play-container')
//播放器參數
let options = {
// 視頻播放地址
sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',
type: 'HLS'
// wasm庫地址
libPath: 'http://localhost:8000/h265player/dist/lib',
}
let player = new GoldPlay(el, options}
在線demo
組件擴展
如何擴展UI組件請參考文檔 組件添加componentadd
API
https://goldvideo.github.io/h265player/API/index.html
開發與維護