文章目錄
- 引言
- 問題
- 解決方案
3.1 方案1：開發自己的瀏覽器
3.2 方案2：前端JS解碼+canvas顯示
3.3 方案3：前端WebAssembly轉碼+video顯示
3.4 方案4：前端WebAssembly解碼+canvas顯示
3.5 總結 - 相關資料
- 參考資料
- 引言
項目要求在瀏覽器上支持H265視頻，但即使當前最新的Chrome 85.0.4183.121版本也還不支持H265的解碼。
那么，在瀏覽器上能不能解決H265的解碼及顯示呢？答案是肯定的。
- 問題
瀏覽器上支持H265，需要在瀏覽器上解決兩個問題：
解碼H265視頻流
顯示H265視頻流
3. 解決方案
經過一番網絡搜索和研究，大致有以下4種方案：
3.1 方案1：開發自己的瀏覽器
開發自己的瀏覽器
在底層實現支持H265解碼
在 video 標簽支持H265視頻流的顯示
目前公司已開發了自己的瀏覽器，基於Chrome 83進行開發，並增加了FFmpeg對HEVC的編解碼，經測試能完美解決H265的編解碼及顯示。但由於存在版權風險，目前只能內部使用。
該方案可行，在測試機（i7-9700/32G）上播放16路的H265視頻，整體比較流暢，但其它主流瀏覽器還是不支持H265，還需要研究不支持H265瀏覽器的解決方案。
3.2 方案2：前端JS解碼+canvas顯示
相關文檔：Web端H.265播放器研發解密
https://blog.csdn.net/weixin_34379433/article/details/89535511
示例
https://sparkmorry.github.io/mse-learning/h265/
https://github.com/sparkmorry/mse-learning
該方案測試下來，JS解碼相比較WebAssembly的解碼方案，從性能來看會比較差，放棄。
3.3 方案3：前端WebAssembly轉碼+video顯示
從ffmpegwasm上看到的一個轉碼示例，由於video標簽不能播放H265的視頻，所以先將H265視頻轉出H264，然后就可以通過video標簽播放了
示例
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/transcode.html
該方案測試下來，幾秒的視頻轉碼為H264需要近1分鍾的時間，性能達不到要求，放棄。
3.4 方案4：前端WebAssembly解碼+canvas顯示
相關文檔：Web端H.265播放器研發解密
https://blog.csdn.net/weixin_34379433/article/details/89535511
相關示例：H265播放器
（1）https://g.alicdn.com/videox/mp4-h265/1.0.2/index.html
（2）https://static-assets.cyt-rain.cn/h265/index.html
一個比較好的h265播放器
https://github.com/goldvideo/h265player
基於WASM的H265 Web播放器
文檔 https://www.pianshen.com/article/3192218495/
源碼 https://github.com/sonysuqin/WasmVideoPlayer
示例 https://roblin.cn/wasm/
該方案測試下來，該方案個人覺得是性能比較好的方案，在測試機（i7-9700/32G）上播放6路的H265視頻，整體比較流暢。
3.5 總結
瀏覽器支持H265解碼，初定方案：
支持H265的瀏覽器，如：科達瀏覽器，則直接使用瀏覽器自帶的解碼方案進行解碼（硬解碼或軟解碼），然后通過video標簽顯示出來；
不支持H265的瀏覽器，則采用WebAssembly技術，將FFmpeg編譯為wasm，收到H265碼流時，調用FFmpeg進行解碼，然后通過canvas來顯示視頻畫面；
- 相關資料
janus-gateway 關於AV1和H265的協商
https://github.com/meetecho/janus-gateway/pull/2120
How to enable HEVC/H265 and AV1 in #webrtc in your browser
https://webrtcbydralex.com/index.php/2020/04/28/how-to-enable-hevc-h265-and-av1-in-webrtc-in-your-browser/
- 參考資料
Chromium媒體元素源碼
https://github.com/chromium/chromium/tree/master/media
WebAssembly
https://webassembly.org/
優秀的開源視音頻處理框架FFmpeg
https://www.ffmpeg.org/
https://github.com/FFmpeg/FFmpeg
https://github.com/ffmpegwasm/ffmpeg.wasm
基於LLVM編譯的WebAssembly打包工具集Emscripten
https://emscripten.org/index.html
基於WebAssembly的ogg播放器
https://github.com/brion/ogv.js
基於FFmpeg的簡單播放器
https://github.com/leixiaohua1020/simplest_ffmpeg_player
from：https://blog.csdn.net/cgs1999/article/details/108847894