h265player开发
h265player開(kāi)發(fā)
https://github.com/goldvideo/h265player
簡(jiǎn)介
隨著視頻編碼技術(shù)的發(fā)展，相比H.264, H.265同等畫(huà)質(zhì)體積僅為一半、帶寬占用省一半、畫(huà)質(zhì)更細(xì)膩等諸多優(yōu)勢(shì)。 但Web瀏覽器還不支持H.265的解碼播放，因此基于Web Assembly(封裝FFmpeg)、JS解封裝、Canvas投影以及AudioContext實(shí)現(xiàn)Web端的H265播放。
支持主要瀏覽器及其版本如下：
Chrome（>57） Safari (>11) Firefox (>52)
本項(xiàng)目是一個(gè)公開(kāi)的基礎(chǔ)可用版本，并不含有具體的業(yè)務(wù)代碼。業(yè)務(wù)可基于此項(xiàng)目進(jìn)行具體業(yè)務(wù)實(shí)現(xiàn)。
安裝與測(cè)試
下載源碼
# 創(chuàng)建根目錄 mkdir goldvideo cd goldvideo# 下載h265player源碼, 創(chuàng)建h265player目錄 git clone https://github.com/goldvideo/h265player.git cd h265player# 安裝依賴(lài)* npm install****
工程打包
# 以下打包命令任選一 npm run dev # 運(yùn)行開(kāi)發(fā)環(huán)境 npm run test # 運(yùn)行測(cè)試環(huán)境 npm run build # 打包正式環(huán)境 rollup -c # 打包c(diǎn)sj與esm版本****
Nginx配置(或者其他Server)
server { listen 8000; location / { root
測(cè)試頁(yè)面
重啟nginx并訪(fǎng)問(wèn)demo地址，就能看到播放器畫(huà)面，如果可以能正常播放視頻時(shí)就表示成功了。http://localhost:8000/h265player/demo/demo.html
如果遇到錯(cuò)誤，請(qǐng)通過(guò)檢查路徑配置以及資源是否加載完成等。您也可以給我們留言反饋問(wèn)題，我們將盡快回復(fù)。
以上就完成了基本安裝，想了解更多詳情，可以接著往下看。
安裝NPM包，參照example快速運(yùn)行例子[可選]
# 可以直接npm安裝構(gòu)建后的文件，快速運(yùn)行DEMO npm i goldvideo-player*
具體參見(jiàn) goldvideo example
源碼安裝解封裝庫(kù)demuxer[可選]
下載 demuxer 庫(kù)源碼 或者 從 npm 安裝 (https://www.npmjs.com/package/demuxer)
- cd goldvideo* git clone https://github.com/goldvideo/demuxer.git* cd demuxer* npm install# 打包模塊，詳情請(qǐng)查看demuxer項(xiàng)目里面的package.json文件* npm install --global rollup# 構(gòu)建demuxer模塊* rollup -c ./rollup.config.js --environment BUILD_MODE:production* cd h265player# 從本地安裝demuxer，調(diào)用本地構(gòu)建的庫(kù)* npm install …/demuxer
源碼編譯WASM解碼庫(kù)[可選]
decoder_wasm庫(kù)之前已經(jīng)編譯并復(fù)制到 h265player/dist/lib/目錄下。你也可以自己編譯并替換libffmpeg.js與libffmpeg.wasm文件。
# 如果想看源碼和編譯過(guò)程，可以查看decoder_wasm模塊源碼。 cd goldvideo git clone http://github.com/goldvideo/decoder_wasm.git cd decoder_wasm***
wasm安裝略微復(fù)雜，詳細(xì)查看README文件
主要模塊結(jié)構(gòu)
源碼目錄結(jié)構(gòu)
├─goldvideo│ ├─demuxer│ ├─h265player│ ├─decoder_wasm│ ├─example
整體架構(gòu)圖
播放器主要分為UI、Loader、數(shù)據(jù)處理、數(shù)據(jù)渲染四個(gè)部分和3個(gè)線(xiàn)程。一個(gè)是主線(xiàn)程，包括界面控制、下載控制、數(shù)據(jù)流控制、音視頻控制等功能；數(shù)據(jù)加載線(xiàn)程，完成元數(shù)據(jù)和數(shù)據(jù)片段的請(qǐng)求；數(shù)據(jù)處理線(xiàn)程，完成數(shù)據(jù)解封裝和解碼。
UI：播放器顯示成，包括screen和controlbar兩部分，screen包括視頻圖像展示、彈窗、海報(bào)圖等。controlbar包括進(jìn)度條、播放按鈕、音量控制等組件。
Loader：負(fù)責(zé)媒體數(shù)據(jù)的加載和解析，目前僅支持HLS協(xié)議。通過(guò)worker實(shí)現(xiàn)數(shù)據(jù)的請(qǐng)求，加載完成后，根據(jù)設(shè)置緩存大小，存儲(chǔ)請(qǐng)求的ts數(shù)據(jù)，當(dāng)達(dá)到緩存上限后停止加載。解碼器從ts數(shù)據(jù)隊(duì)列獲取ts后，Hls Loader會(huì)把請(qǐng)求過(guò)的ts釋放，繼續(xù)加載下一個(gè)ts，達(dá)到最大緩存限制后停止加載數(shù)據(jù)處理：主要包括數(shù)據(jù)解封裝和H265解碼，解封裝通過(guò)demuxe.js這個(gè)類(lèi)庫(kù)實(shí)現(xiàn)，H265解碼通過(guò)ffmpeg打包生成的wasm軟解來(lái)實(shí)現(xiàn)，cpu使用率較高。數(shù)據(jù)渲染：包括視屏渲染和音頻渲染，視頻渲染通過(guò)ImagePlayer把解碼后的yuv數(shù)據(jù)直接渲染到canvas，音頻通過(guò)AudioPlayer把AAC數(shù)據(jù)解碼后進(jìn)行音頻播放，最后通過(guò)pts實(shí)現(xiàn)音視頻的同步。同步策略是以音頻為參考，判斷當(dāng)前視頻pts與獲取到的音頻pts的差值來(lái)調(diào)整視頻顯示時(shí)間來(lái)達(dá)到音視頻同步。
具體流程如下：
解封裝器
通過(guò)JS實(shí)現(xiàn)了視頻數(shù)據(jù)的解封裝，從而獲取到獨(dú)立的視頻（H265）數(shù)據(jù)和音頻（AAC）數(shù)據(jù)。詳細(xì)信息請(qǐng)參考demuxer模塊：https://github.com/goldvideo/demuxer。
解碼器
通過(guò)ffmpeg實(shí)現(xiàn)H265數(shù)據(jù)的軟解碼，如果要在瀏覽器中調(diào)用ffmpeg，需要把ffmpeg編譯成wasm進(jìn)行調(diào)用，具體ffmpeg編譯成wasm過(guò)程，可參考decoder_wasm
ImagePlayer
通過(guò)yuv-canvas實(shí)現(xiàn)YUV數(shù)據(jù)渲染，ImagePlayer中會(huì)有一個(gè)隊(duì)列存儲(chǔ)YUV數(shù)據(jù)，并計(jì)算當(dāng)前yuv數(shù)據(jù)的時(shí)間長(zhǎng)度，大于等于readybufferLength的值時(shí)，會(huì)觸發(fā)ImagePlayerReady事件。當(dāng)音視頻播放器都處于ready狀態(tài)時(shí)，H265播放器觸發(fā)dataReady事件，開(kāi)始調(diào)用play方法進(jìn)行視頻播放。
AudioPlayer
Web Audio API
Audio Player的實(shí)現(xiàn)基于Web Audio API, 包括AAC音頻流的解碼與PCM數(shù)據(jù)的播放。
解碼：Audio
Player模塊接收解封裝模塊發(fā)過(guò)來(lái)的AAC數(shù)據(jù)流，通過(guò)AudioContext的decodeAudioData
API，解碼為待后續(xù)播放的PCM數(shù)據(jù)。
音頻節(jié)點(diǎn)：音頻節(jié)點(diǎn)（AudioNode）是Web
Audio API中的音頻數(shù)據(jù)＂處理器＂，Web
Audio API通過(guò)不同“處理器”對(duì)音頻數(shù)據(jù)做串行處理，最終通過(guò)揚(yáng)聲器（audioContext.destination）播放。
ScriptProcessorNode：音頻源節(jié)點(diǎn)。Web
Audio API提供多種音頻源節(jié)點(diǎn)以提供音頻數(shù)據(jù)，如AudioBufferSourceNode，
MediaElementAudioSourceNode等。考慮到倍速播放的需求，我們用的是ScriptProcessorNode， 通過(guò)onaudioprocess回調(diào)函數(shù)請(qǐng)求音頻數(shù)據(jù)。
GainNode：音量控制節(jié)點(diǎn)。
倍速播放
Audio Context的部分音頻節(jié)點(diǎn)提供了playbackRate屬性以實(shí)現(xiàn)倍速播放的功能，但是音頻在倍速播放的同時(shí)，音頻的音調(diào)（pitch）也同步地升高/降低。
為實(shí)現(xiàn)變速不變調(diào)，項(xiàng)目中，我們使用了一個(gè)音頻數(shù)據(jù)處理庫(kù)SoundTouchJS，將處理過(guò)的變速不變調(diào)的音頻數(shù)據(jù)提供給ScriptProcessorNode。
快速開(kāi)始
在head標(biāo)簽中添加如下代碼
創(chuàng)建一個(gè)div，作為播放器的容器
新建一個(gè)GoldPlay實(shí)例對(duì)象，傳入相應(yīng)參數(shù)，就可以實(shí)現(xiàn)視頻的播放
//播放器容器let el = doc.querySelector(’.play-container’)//播放器參數(shù)let options = { // 視頻播放地址 sourceURL: ‘http://localhost:8000/h265player/data/video2/playlist.m3u8’, type: ‘HLS’ // wasm庫(kù)地址 libPath: ‘http://localhost:8000/h265player/dist/lib’,}let player = new GoldPlay(el, options}
在線(xiàn)demo
https://omc3i.codesandbox.io/
組件擴(kuò)展
如何擴(kuò)展UI組件請(qǐng)參考文檔 組件添加componentadd
API
https://goldvideo.github.io/h265player/API/index.html
開(kāi)發(fā)與維護(hù)
github: https://github.com/goldvideo/h265player
總結(jié)
以上是生活随笔為你收集整理的h265player开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ffmpeg architecture（
- 下一篇： h265webplayer