h265player开发
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 /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标签中添加如下代码
创建一个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
https://omc3i.codesandbox.io/
组件扩展
如何扩展UI组件请参考文档 组件添加componentadd
API
https://goldvideo.github.io/h265player/API/index.html
开发与维护
github: https://github.com/goldvideo/h265player
h265player开发相关推荐
- java知识体系介绍
国内最牛七星级团队马士兵.高淇等11位十年开发经验专家录制 目 录 百战程序员Java1573题 2百战程序员介绍 3JavaSE编程基础 9第一章 初识Java 9阶段项目课程1 11第二章 数据类 ...
- 【阶段小结】协同开发——这学期的Git使用小结
[阶段小结]协同开发--这学期的Git使用小结 一.Git简介 1. Git简单介绍 2. Git工作流程以及各个区域 3. Git文件状态变化 二.Git安装&Git基本配置 三.个人踩坑 ...
- 基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求 三.具体 ...
- 【ReactiveX】基于Golang pmlpml/RxGo程序包的二次开发
基于Golang pmlpml/RxGo程序包的二次开发[阅读时间:约20分钟] 一.ReactiveX & RxGo介绍 1.ReactiveX 2.RxGo 二.系统环境&项目介绍 ...
- 【golang程序包推荐分享】分享亿点点golang json操作及myJsonMarshal程序包开发的踩坑经历 :)
目录[阅读时间:约5分钟] 一.概述 1.Json的作用 2.Go官方 encoding/json 包 3. golang json的主要操作 二.Json Marshal:将数据编码成json字符串 ...
- 基于Golang的对象序列化的程序包开发——myJsonMarshal
基于Golang的对象序列化的程序包开发--myJsonMarshal[阅读时间:约10分钟] 一.对象序列化概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 三.具体程序设计及 ...
- 基于Golang的监听读取配置文件的程序包开发——simpleConfig_v1
基于Golang的监听&读取配置文件的程序包开发--simpleConfig_v1 [阅读时间:约10分钟] 一.配置文件概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 ...
- 基于Golang的CLI 命令行程序开发
基于Golang的CLI 命令行程序开发 [阅读时间:约15分钟] 一. CLI 命令行程序概述 二. 系统环境&项目介绍&开发准备 1.系统环境 2.项目介绍 3.开发准备 三.具体 ...
- 2022-2028年中国老年旅游市场深度调研及开发战略研究报告
[报告类型]产业研究 [报告价格]¥4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国老年旅游行业市场行业相关概述.中国老年 ...
最新文章
- 将ubuntu系统设置静态ip及ssh
- 《Python Cookbook 3rd》笔记(2.11):删除字符串中不需要的字符
- LISP 冻结excel窗格_粗暴讲解,2分钟 | 即懂excel 冻结首行、首列和单元格怎么弄?...
- 【探索测试篇】探索无界,BUG无限,让程序猿头疼的测试技术
- tar+openssl加密压缩解压缩
- JAVA SAX解析XML文件
- python语法学习第二天--条件与循环
- MyBatis配置项--配置环境(environments)
- UOS桌面专业版下载链接
- java svn插件_eclipse 安装SVN插件 subversive
- 公交系统如何利用智能调度降低运营费用
- 纯HTML CSS制作导航栏 下拉菜单
- SQL 遇到以零作除数错误——用NULLIF()函数处理为0的分母
- 人工智能期末考试复习
- 解决out.print()爆红问题
- ESP32 HTTP Client接口使用
- 刻度尺组件vue-scale,并绑定输入框
- 二分图匹配Hopcroft-Carp算法介绍
- 实验一 利用Excel表格进行掷硬币模拟实验
- WDK开发入门1-基础环境搭建和第一个驱动程序(VS2010)
热门文章
- Python 类—类属性(私有属性、公有属性、实例属性、局部变量)类方法(实例方法、静态方法)
- pytorch利用多个GPU并行计算多gpu
- 2021年华为与小康-北汽-长安
- Wide Deep的OneFlow网络训练
- 自动泊车技术短暂困境,前景可期
- 2021年大数据Hadoop(十五):Hadoop的联邦机制 Federation
- CentOS安装crontab
- Django 模板HTML转义和CSRF4.3
- python 常见的元字符(\d,\w ,^ ,$ 等) 的使用
- android R文件丢失解决方法