在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:h265player开源软件地址:https://gitee.com/tmkmk/h265player开源软件介绍:简介随着视频编码技术的发展,相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。但Web浏览器还不支持H.265的解码播放,因此基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投影以及AudioContext实现Web端的H265播放。 支持主要浏览器及其版本如下: 本项目是一个公开的基础可用版本,并不含有具体的业务代码。业务可基于此项目进行具体业务实现。 安装与测试下载源码# 创建根目录* 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 { 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安装直接使用,可选# 可以直接npm安装构建后的文件,快速运行DEMO* npm i goldvideo-player 源码安装解封装库,可选下载 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 ROOT* git clone http://github.com/goldvideo/decoder_wasm.git* cd decoder_wasm wasm安装略微复杂,详细查看README文件 主要模块结构源码目录结构├─goldvideo│ ├─demuxer│ ├─h265player│ ├─decoder_wasm│ ├─example 整体架构图播放器主要分为UI、Loader、数据处理、数据渲染四个部分和3个线程。一个是主线程,包括界面控制、下载控制、数据流控制、音视频控制等功能;数据加载线程,完成元数据和数据片段的请求;数据处理线程,完成数据解封装和解码。
流程图播放器主要流程如下图所示: 具体流程如下:解封装器通过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 APIAudio Player的实现基于Web Audio API, 包括AAC音频流的解码与PCM数据的播放。
倍速播放Audio Context的部分音频节点提供了playbackRate属性以实现倍速播放的功能,但是音频在倍速播放的同时,音频的音调(pitch)也同步地升高/降低。 快速开始在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 APIhttps://goldvideo.github.io/h265player/API/index.html 开发与维护* github: [https://github.com/goldvideo/h265player](https://github.com/goldvideo/h265player) |
请发表评论