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

https://omc3i.codesandbox.io/

组件扩展

如何扩展UI组件请参考文档 组件添加componentadd

API

https://goldvideo.github.io/h265player/API/index.html

开发与维护

h265player开发的更多相关文章

  1. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

  2. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  3. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  4. Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记

    以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...

  5. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...

  6. Android请求网络共通类——Hi_博客 Android App 开发笔记

    今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...

  7. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

随机推荐

  1. hdu3714 水三分

    题意:       给你一些函数 y = ax^2 + bx + c,的a >= 0 的二次函数,x的范围是0--1000, 问你在这个范围内函数值最大的最小是多少,最大指的是对于某一个x最大的 ...

  2. 5.IA-32寄存器

    寄存器(Register)是CPU内部用来存放数据的一些小型存储区域,它与RAM(Random Access Memory,随机存储器.内存)略有不同.CPU访问(Access)RAM中的数据时要经过 ...

  3. (2) arm 指令条件码

    条件码助记符 标志 含义 EQ Z=1 相等 NE Z=0 不相等 CS/HS C=1 无符号数大于或等于 CC/LO C=0 无符号数小于 MI N=1 负数 PL N=0 正数或0 VS V=1 ...

  4. Could not contact [localhost:8005]. Tomcat may not be running.

    出错环境介绍: Tomcat-version:8.5.56 JDK-version:1.8.0_152 Linux:CentOS-7 错误信息 sh /opt/apache-tomcat-8.5.56 ...

  5. Nginx配置动静分离

    简单解释 所谓动静分离指的是当访问静态资源时,路由到一台静态资源服务器,当访问是非静态资源时,路由到另外一台服务器 配置实现 修改server块 server块配置参考,配置规则可自行修改,符合正则语 ...

  6. 二、多线程之Thread中run 和start 区别

    Thread使用run 和start 区别 结论:run()方法将作为当前调用线程本身的常规方法调用执行,并且不会发生多线程. System.out.println("开始测试多线程&quo ...

  7. InnoDB存储引擎简介

    前言: 存储引擎是数据库的核心,对于 MySQL 来说,存储引擎是以插件的形式运行的.虽然 MySQL 支持种类繁多的存储引擎,但最常用的当属 InnoDB 了,本篇文章将主要介绍 InnoDB 存储 ...

  8. 03.21 ICPC训练联盟周赛:UCF Local Programming Contest 2018正式赛

    B Breaking Branches 题意:两个人比赛折枝,谁剩下最后1,无法折出整数即为输 思路:树枝长n,若是奇数,则Bob胜出,若是偶数,则Alice胜出,且需要输出1: 1 #include ...

  9. Vulkan移植GPUImage(五)从P到Z的滤镜

    现aoce_vulkan_extra把GPUImage里从P到Z的大部分滤镜用vulkan的ComputeShader实现了,也就是最后一部分的移植,整个过程相对前面来说比较简单,大部分我都是直接复制 ...

  10. Nacos C++客户端开发文章

    前段时间关注了下阿里巴巴发起的开源项目Nacos,这是一个注册.配置中心(Naming And Config),支持各种语言的客户端,但是唯独没有C++的,考虑到以前做过一段时间的C++程序员,不禁一 ...