Skip to content

Latest commit

 

History

History
1214 lines (900 loc) · 30.7 KB

README_EN.MD

File metadata and controls

1214 lines (900 loc) · 30.7 KB
Raw

h265web.js - Support Hard-Decode

中文 | English

H265web.js is the best HEVC/H.265 web player you can find.
Video Stream Server recommand use ZLMediaKit(https://github.com/ZLMediaKit/ZLMediaKit) - Pretty good video live stream server/framework

A hevc/h.265 web player, easy to play 1080P. ~^_^~ For love if h265web helped you, please star it~

All Features

Feature Feature Feature Feature
HLS(LIVE) M3u8(VOD) MP4(VOD) FLV(VOD)




HTTP-FLV(LIVE) HTTP-TS(LIVE) WS-FLV(LIVE) WS-TS(LIVE)




MPEG-TS(VOD) MPEG-PS(VOD) AV1(Chrome) MOV(H.265)





HTTP-HEVC WS-HEVC MKV(HEVC) AAC(MAIN/LC)




Multi-Thread
(only:
https+nginx conf)		 Single-Thread G711A(HTTP-FLV) G711U(HTTP-FLV)




MediaInfo HEVC/H.265 AVC/H.264 Hardware decoder
(FLV/HTTP-FLV/MP4)

Contact

Online DEMO h265webjs.html (Demo is not newest version, you need to download from github and get newest version)

First Demo - for first use index-debug.html

h265web.js mpeg.js (ts demuxer) h265web.js's H.265 decoder LICENSE
h265web.js MPEG-Demuxer.js h265web.js-wasm-decoder CYL_Free-1.0 LICENSE-Free_CN.MD

Remind!

H265web.js use the soft-decode mode(Can not use hard-decode and assembly-optimization on browers), so your device performance has a large impact on player.

Notice：

  • Recommended FPS <= 30fps

    • Better: 24fps

  • Recommended Bitrate <= 1500kbps

    • Better: 300~600kbps

Index

0、README

TODO Content
1 Support HDR10 BT.2020

Supported

  • Protocol box
protocol model support desc
mp4 Video on demand Y ----
mov Video on demand Y HEVC/H.265
mkv Video on demand Y HEVC/H.265
av1 Video on demand Y Chrome
mpeg-ts Video on demand Y ----
mpeg-ps Video on demand Y ----
m3u8 Video on demand Y ----
hls Live Y ----
flv Video on demand Y ----
http-flv Live Y CodecID=12
http-ts Live Y ----
http-hevc Live Y ----
http-hevc Video on demand Y ----
websocket-hevc Live Y ----
websocket-flv Live Y ----
websocket-ts Live Y ----
HEVC/H.265 Video on demand Y ----
HEVC/H.265 Live Y ----
AVC/H.264 Video on demand Y ----
AVC/H.264 Live Y ----
  • Codec
Codec Support Desc
AVC/H.264 Y ----
HEVC/H.265 Y ----
AAC Y ----
G711A Y HTTP-FLV
G711U Y HTTP-FLV
AV1 Y Chrome
  • Features
Feature Support Desc
Hardware-Decode Y For Chrome/Safari etc...
Video on demand Y ----
Live Y ----
Seek Y ----
AccurateSeek Y ----
Cover Image Y ----
Playing with download Y ----
Volume Y ----
Play Y ----
Pause Y ----
ReStart Y ----
PauseWithCoverImage Y ----
1080P Y ----
720P Y ----
Create multi players Y ----
Play without Audio Y ----
Cache process Y ----
Open Fullscreen Y ----
Exit Fullscreen Y ----
Play frame by frame Y ----
Snapshot Y ----
Autoplay Y HTTP-FLV 265+264
HTTP-TS 265+264
HLS 264
Cache Length Y MP4 265
Multi-thread decoder Y (HTTPS+ Conf NGINX)
Single-thread decoder Y compatible
Get MediaInfo Y ----
Get Codec Param Y Video&Audio
Get Media Duration Y Video&Audio
Get Video Size Y ----
Get Video FPS Y ----
Get Audio SampleRate Y ----
Chase Frame Y HTTP-FLV(no audio)
PlayBackRate Y H.264/AV1
Resize Y ----

freeToken

token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";

Demo

https://www.zzsin.com/h265webjs.html

Simple Demo - First index-debug.html


PreviewImage

Type Example
VOD
LIVE

1、UseItByDemo

  • Simple Demo - First index-debug.html

  • You need to put project in your web server path, and open it with index.html


2、SdkAndApiDocument

———————— API/Events

New SDK Project for H.265/HEVC decoder - https://github.com/numberwolf/h265web.js-wasm-decoder

Install

  • Warning: Do not install from npm store! Please download from Github！ Because npm store is not friendly with Webassembly!

  • Warning: Put the .wasm file into `webpack`/`browerify`'s dist Directory! If wasm's path is not same with `webpack`/`browerify`'s dist file's path, you can not running with it！！！Or you can include with this github's dist/\*.js and dist/missile\*.wasm

bash init.sh

1）Install SDK Package

  • By github 1.1 h265web.js

  • Simple Demo - First index-debug.html

  • demo: example_normal （recommend）

     <script src="dist/missile.js"></script>
 <script src="dist/h265webjs-v20211016.js"></script>

  • demo: example

     // import wasm in html file
 <script src="dist/missile.js"></script>
 // import from local file in your es js file
 require('./dist/h265webjs');

  • demo: example

    • import xxx from xxx
     // import wasm in html file
 <script src="dist/missile.js"></script>
 // import from local file in your es js file
 import H265webjsModule from './dist/index';

2）Install Wasm

  • If you install it by github, you could skip this step.

3）Include h265web.js to project


PlayerConfig

  • Make player config
const PLAYER_CORE_TYPE_DEFAULT = 0; // Default player core
const PLAYER_CORE_TYPE_CNATIVE = 1; // BAK player Core

let config = {
    player: "glplayer",
    width: 960,
    height: 540,
    token : token,
    extInfo : {
        moovStartFlag : true
    }
};
  • Config desc
Config Type Value Need Desc
type String mp4/hls/ts/raw265/flv N Media file type, or auto detect
player String - Y Player dom id
width Int - Y Player width
height Int - Y Player height
token String - Y player's token
extInfo Object - N player extra info
+ moovStartFlag Bool true/false N:default is sfalse mp4 with moov before mdat
+ rawFps Float32 Example:30 N:default 24 Fps for play HEVC/AVC stream
+ coreProbePart Float32 - N:Default is 1.0 Probe Mp4 media info，interval: 0.0~1.0, traditional mp4 file which moov box front of mdat box, use 0.1(10%) （only with Bak player core mode(beta))
+ core Int - N:Default 0 0:Default Core
1:Bak Core
+ ignoreAudio Int - N:Default is 0 0:Play with audio
1:Without audio
+ probeSize Int - N:4096 HTTP-FLV(LIVE) Mode's probe size, default is 4096
+ autoPlay Bool true/false N:false Open autoplay
HTTP-FLV 265+264
HTTP-TS 265+264
HLS 264
+ cacheLength Int [5, ∞+] N:Default is 50 frames Set cache frame count by manual
MP4 265

InitPlayer

  • Warning！！！

After compile ,Please put your JS file with wasm file in the same directory

  • Example
	./dist/your dist play file
	./dist/sdk files
	./index.html
  • Create your player(Global function)

new265webjs(mediaAddress, playerConfig)

Param Type Default Need Desc
mediaAddress String - Y media file address/path
playerConfig Object - Y player's config

  • Example

    • 1）URI and Config

      • Example 1 Create mp4/hls/ts Player
       let videoURL = "h265_test.mp4";
 let config = {
     player: "glplayer",
     width: 960,
     height: 540,
     accurateSeek : true,
     token : token,
     extInfo : {
         moovStartFlag : true,
         readyShow : true
     }
 };
      • Example 2 Create raw265 Player (play hevc raw stream)
       let videoURL = "demo/res/raw.h265";
 let config = {
     player: "glplayer",
     width: 960,
     height: 540,
     accurateSeek : true,
     token : token,
     extInfo : {
         readyShow : true,
         rawFps : 30 // frame rate
     }
 };
      • Example 3 Create FLV(Video on demand) Player
       const PLAYER_CORE_TYPE_DEFAULT = 0; // Default player core
 const PLAYER_CORE_TYPE_CNATIVE = 1; // Bak player core mode
 let config = {
     player: "glplayer",
     width: 960,
     height: 540,
     accurateSeek : true,
     token : token,
     extInfo : {
         moovStartFlag : true,
         readyShow : true,
         autoCrop : false,
         coreProbePart : 0.1,
         ignoreAudio : 0
     }
 };

    • 2）Player

        1. Example 0 Create by normal js without compile Example:
       let player = window.new265webjs(url, config);
        1. If require('./src/h265webjs');

      Example:

       let player = new265webjs(videoURL, config); // Global Function
        1. If import H265webjsModule from './dist/index';（recommend）

      Example:

       let player = H265webjsModule.createPlayer(videoURL, config);
        1. NOTICE! If you want to create raw265 stream player (Do not need execute with this step when you play 265 vod stream)
        • Add raw265 type, and set rawFps for player's fps
         config = {
     type: 'raw265',
     player: "glplayer",
     width: 960,
     height: 540,
     // accurateSeek : true,
     token : token,
     extInfo : {
         rawFps: 24,
         moovStartFlag : true,
         coreProbePart : 0.1,
         ignoreAudio : 0,
         probeSize : 8192,
         autoPlay : true,
     }
 };

PlayerBindEvents

SeedFinished

  • Example
player.onSeekFinish = () => {
    // todo
};

CallbackYuvData

Callback param Type Default Need Desc
width int - - YUV width
height int - - YUV height
imageBufferY Uint8Array - - Y
imageBufferB Uint8Array - - ChromaB
imageBufferR Uint8Array - - ChromaR

You can use this event's data to render a new window(full screen play)

must use setRenderScreen to open this feature.

  • Example
player.onRender = (width, height, imageBufferY, imageBufferB, imageBufferR) => {
	// todo
};

MediaLoadSuccessed

If this event happened, you can start play

  • Example
player.onLoadFinish = () => {
	// todo
};

PlayerPtsUpdate

Callback param Type Default Need Desc
videoPTS float64 - - pts now
  • Example
player.onPlayTime = (videoPTS) => {
	// todo
	console.log(videoPTS)
};

PlayFinished

  • Example
player.onPlayFinish = () => {
    // finished
};

CacheDownload

Callback param Type Default Need Desc
cPts float64 - - Cache process timestamp
  • Example
player.onCacheProcess = (cPts) => {
    // console.log("onCacheProcess => ", cPts);
};

CoverImageLoadFinished

  • Example
player.onReadyShowDone = () => {
    // console.log("onReadyShowDone");
    // to play
};

CachingDecodeFrames

  • Example
player.onLoadCache = () => {
	// caching frames
};

CachingDecodeFinished

  • Example
player.onLoadCacheFinshed = () => {
    // cache finished
};

OpenFullScreenEvent

  • Example
player.onOpenFullScreen = () => {
    // todo
};

CloseFullScreenEvent

  • Example
player.onCloseFullScreen = () => {
    // todo
};

CallbackPlayState

  • Example
player.onPlayState = (state) => {
    // state
    // true: playing / false: paused
};

PlayerAPIDocument

BuildPlayer

After【set player config】和【bind events】

  • Example
player.do();

GetPlayerPlayStatus

Function Return Desc
isPlaying() bool play status
  • Example
if (player.isPlaying()) {
	// now is playing
} else {
}

StartPlay

Function Return Desc
play() - Start play
  • Example
player.play();

Pause

Function Return Desc
pause() - Pause
  • Example
player.pause();

SetRenderCallbackYuvFrame

After open，you can use onRender Event

Function Return Desc
setRenderScreen({param1}) - Open/Close : Render callback YUV Frame data
  • Param
Param Type Default Desc
param1 bool false Open/Close : Render callback YUV Frame data
  • Example
// Open
player.setRenderScreen(true);
// Close
player.setRenderScreen(false);

Seek

Function Return Desc
seek({pts}) - Seek to any timestamp
  • Params
Param Type Default Desc
pts float64 - Seek to any timestamp
  • Example
// Seek to 10.01s
player.seek(10.01);

VolumeOption

Function Return Desc
setVoice({volume}) - volume value
  • Params
Param Type Default Desc
volume float64 - Set value in [0, 1.0], 0 is mute，1.0 is full
  • Example
// half
player.setVoice(0.5);

GetMediaInfo

Function Return Desc
mediaInfo() Object Media file info
  • Return Example
meta:
	audioNone: false // include audio stream
	durationMs: 600000 // media duration(ms)
	fps: 25 // frame rate
	sampleRate: 44100 // audio sampleRate
	size:
		height: 720
		width: 1280
	videoCodec: 0 // 0:HEVC/H.265 1:Others Codec
	isHEVC: true // video is HEVC Codec
videoType: "vod" // vod or live
  • Example
let mediaInfo = player.mediaInfo();

OpenFullscreen

Function Return Desc
fullScreen() - open fullscreen
  • Example
player.fullScreen();

ExitFullscreen

Function Return Desc
closeFullScreen() - exit fullscreen
  • Example
player.closeFullScreen();

nextframe

Function Return Desc
playNextFrame() true/false play next frame

setplayrate

Function Return Desc
setPlaybackRate(rate) true/false 设置倍速 默认1.0
  • 示例
h265Object.setPlaybackRate(0.5);

getplayrate

Function Return Desc
getPlaybackRate() Double 截取当前帧图像
  • 示例
let rate = h265Object.getPlaybackRate();

resize

Function Return Desc
resize(width, height) true/false resize

snapshot

Function Return Desc
snapshot() - Snapshot frame
  • Example
const snapCanvas = document.getElementById("snapshot-player"); // create canvas
h265Object.snapshot(snapCanvas); // snapshot to canvas

release

Function Return Desc
release() - Release Player
  • Example
player.release();

3、Others

Donate

Wechat Alipay PayPal
TODO

FFmpegSupportH265LiveEncode


TranscodeAndGet265CodecFileByFFmpeg

  • mp4
ffmpeg -i input.mp4 \
-vcodec libx265 -pix_fmt \
-acodec aac -ac 2 -ar 44100 \
-preset medium -maxrate 1000k -bufsize 1000k \
-vtag hvc1 \
-movflags faststart \
-y video.mp4
  • hls/m3u8 capture
ffmpeg -f avfoundation -i 1:0 \
-q 4 -r 10 \
-filter_complex "scale=1280:720" \
-pix_fmt yuv420p \
-vcodec libx265 \
-ar 22050 -ab 64k -ac 1 -acodec aac \
-threads 4 \
-preset veryfast \
-f segment \
-segment_list test.m3u8 \
-segment_time 5 \
-y /Users/numberwolf/Documents/webroot/VideoMissile/VideoMissilePlayer/res/hls1/v-%03d.ts
  • mpeg-ts
ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
-vcodec libx265 -x265-params "bframes=0:keyint=10" -r 24 -filter_complex "scale=720:1280" -preset fast -maxrate 800k -bufsize 800k \
-acodec aac -ar 22050 -ac 1 \
-pix_fmt yuv420p \
-f mpegts -y ./res/veilside2.ts

UpdateLog

Update Content
Time 2022/11/06
- 0.Update
Time 2022/11/02
- 0.Update WASM
Time 2022/10/22
- 0.Support: Hard-Decode for FLV/HTTP-FLV/MP4
- 1.Support: AVC with Mpeg-TS
Time 2022/09/13
- 0.Fixed: AVC stream loop buffer error without autoplay
Time 2022/09/12
- 0.Fixed: hevc url cannot play without text of "http"
Time 2022/08/24
- 0.Feature: Safari with native player(version>13)
Time 2022/08/23
- 0.Fixed: Buffer Progress with AVC
Time 2022/08/13
- 0.Support: Resize
Time 2022/07/27
- 0.Support: PlayBackRate
Time 2022/07/12
- 0.Fixed some problem
Time 2022/07/06-10
- 0.Support g711u (http-flv)
- 1.Fixed: HTTP-FLV(AVC) without Audio
Time 2022/07/01
- 0.Feature: HTTP-FLV(Without audio) Stream Performance optimizing
Time 2022/06/27
- 0.Fixed: problem with hls parser
Time 2022/06/26
- 0.Support g711a (http-flv)
- 1.Fixed 264(avc) flv error with mediainfo
- 2.Support Multi/Single Thread
Time 2022/05/18
- 0.Support multi-thread decode
- 1.Support mp4's cache length config
- 2.Performance optimizing
- 3.This version is for Beta
Time 2022/05/09
- 0.Suport play with Websocket 265 raw stream
Time 2022/05/07
- 0.Fixed:MP4(VOD) retry error
- 1.Support:HEVC raw stream(VOD), create with url
- 2.Support:MKV format
Time 2022/04/21
- 0.Performance optimizing
Time 2022/04/17
- New Opensource Free Protocol CYL_Free-1.0 LICENSE-Free_CN.MD
Time 2022/04/14
- 0.Support Mov File
- 1.Support HTTP-FLV/HTTP-TS/HLS Autoplay
- 2.Performance optimizing of 1080P MP4(VOD)
- 3.Retry of mp4 sniff action
- 4.Support AV1
- 5.Support Play frame by frame
- 6.Support Video Frame Snapshot
Time 2022/03/28
- 0.Support MPEG-PS(MPEG1) stream
Time 2022/03/02
- 0.Fixed h264 FLV(LIVE) can not get resolution info with retry
Time 2022/01/17
- 0.Fixed ISSUE of HLS 265 OOM Case #108
- 1.Fixed ISSUE of HLS Split Rules #105
- 2.Add New Demo index-debug.html
- 3.Fixed 10+playes of 264 play failed, stack overflow
Time 2021/12/31
- 0.Add H.264 HTTP-FLV Retry after error
Time 2021/12/24
- 0.Fixed H.264 HTTP-FLV Some Badcase with callback
Time 2021/12/19
- 0.Fixed H.264 HLS Callback's problem
Time 2021/12/08
- 0.Fixed Problem of H.264 MP4 onReadyShowDone Event
Time 2021/12/04 - In the small hours
- 0.Fixed http-flv 265 Render With crash
- 1.Fixed hls problem of fullscreen
- 2.Fixed some bugs
Time 2021/11/29 - Night
- 0.Fixed http-flv retry case and some bugs
Time 2021/11/25 - Night
- 0.Fixed httpflv/ws LIVE ignoreAudio problem
Time 2021/11/23 - Night
- 0.Fixed #90
Time 2021/11/21 - In the small hours
- 0.Support Websocket-FLV (HEVC/H.265)
- 1.Support Websocket-TS (HEVC/H.265)
- 2.Support HTTP-TS (HEVC/H.265)
Time 2021/11/16 - Evening
- 0.First request, if no response and timeout, then retry 5 times
Time 2021/11/15 - Evening
- 0.HTTP-FLV auto retry when timeout with out packet.(7s)
Time 2021/11/14 - Evening
- 0.Add wasm file of 265mb version(can memory auto grow)
- 1.Add wasm file of 512mb version(can memory auto grow)
Time 2021/11/04 - Evening
- 0.Fixed: release many times with crash
Time 2021/10/26 - Evening
- 0.Fixed some bugs
Time 2021/10/24 - Evening
- 0.Support Codec of AVC/H.264's MP4/HLS/M3u8/FLV/HTTP-FLV play
Time 2021/10/18 - Evening
- 0.Add new example
Time 2021/10/16 - Evening
- 0.Fixed: HTTP-FLV: Mediainfo's codec fault value
- 1.Update example
Time 2021/10/14 - Evening
- 0.Fixed: Mediainfo's codec fault value
Time 2021/10/13 - Evening
- 0.The player compatible with WebIDE develop, split wasm(js) and h265web.js, need include wasm(js) as single
Time 2021/10/12 - Evening
- 0.Fixed: Support HTTP-FLV(HEVC) without fps param
Time 2021/10/09 - In the small hours
- 0.Support HTTP-FLV(HEVC) LIVE, CodecID=12
- 0.MP4/FLV(VOD) performance optimizing of Seek operation(out of cache area)
Time 2021/09/27 - Evening
- 0.M3u8/MpegTS performance optimizing of Seek operation(out of cache area)
Time 2021/09/25 - In the small hours
- 0.HLS Live Fixed: Crash by OOM
- 1.HLS Live Fixed: MPEG-TS full path
- 2.HLS Live Fixed: Stop by lost stream a moment
- 3.HLS Live Fixed: Stop by unstable network
Time 2021/09/08 - Evening
- 0.Fixed: M3U8 Seek with Decode Failed
- 1.Fixed: Some MP4 Case
- 2.Config update, remove some options, make it auto set
Time 2021/09/07 - Evening
- 0.M3U8 Fixed: some error with parse mpegts file
Time 2021/09/07 - In the small hours
- 0.Bak Player Core - Fixed:MP4/FLV(VOD) Seek BUG can not seek to 0; And performance optimizing for play
Time 2021/08/15
- 0.H265/HEVC Upgrade Raw Data Player for VOD/LIVE
Time 2021/07/18
- 0.Upgrade: Player UI Style
- 1.Support: fullscreen & close fullscreen
- 2.Add Event: open/close fullscreen
Time 2021/07/11
- 0.Fixed: The player compatible with ZLMediaKit + HUAWEI HoloSens Camera LIVE Stream
Time 2021/07/04
- 0.Fixed: ISSUE#58 (When default player-core's status is caching-frames, can not pause video)
Time 2021/07/01
- 0.Add example and package.json file
Time 2021/06/27
- 0.Open Source!
- 1.Support Seek in FLV
- 2.Fixed: Seek problems with bak player core mode
- 3.Add FLV type ,and do not need set player-core
Time 2021/05/30
- 1.Fixed: Some problem with seek and play(Important)
- 2.Feature: Event/Callback of Video's cover image load finished
Time 2021/05/24
- 1.FLV VOD Play(In the bak player core mode)
Time 2021/05/21
- 1.HLS(LIVE:No audio)performance optimizing
Time 2021/05/18
- 1.HLS(LIVE) performance optimizing and add Audio
Time 2021/05/16
- 1.MP4(VOD) Fixed:BD265 Mp4 box badcase
Time 2021/05/15
- 1.Fixed: HLS Play(LIVE)
Time 2021/04/27
- 1.Fixed: Some video playing with gray block(mosic)
- 2.Fixed: Some video when playing first gop with gray block(mosic)
Time 2021/04/22
- 1.Bak player core mode(test) support: seek
- 2.Bak player core mode(test) support: yuvj420p
- 3.Others
Time 2021/04/12
- 1.Fixed bug: Some video(encode hev) play failed
- 2.Fixed bug: Some video(nalu unstandard) play failed
- 3.Fixed bug: Some video play error with mosic
Time 2021/04/07
- 1.Fixed duration error
Time 2021/03/28
- 1.Add cache process event
- 2.Fixed some bugs
- 3.Remove HLS Log
- 4.Play without audio optio(New Core)
Time 2021/03/14
- 1.Bak player core mode: Fixed: render of bytes align
Time 2021/03/12
- 1.Sorry my friends, I was too tired to make a mistake with hls feature... Now I have fixed it. _!
Time 2021/03/06
- 1.Bak player core mode, Fixed: multi-stream play badcase
Time 2021/02/28
- 1.Add function to feed 265 nalu-frame append265NaluFrame(nalBuf);
- 2.Add new library to parse 265 stream raw-parser.js
Time 2021/02/21
- 1.New SDK Project for H.265/HEVC decoder - https://github.com/numberwolf/h265web.js-wasm-decoder
Time 2021/02/18
- 1.Bak player core mode support play with audio
Time 2021/02/08
- 1.Bak player core mode (beta version , do not support play audio and seek. Make your mp4's moov box front of the mdat)
Time 2021/01/04
- 1.Player Support Hevc file
- 2.Player Support Hevc stream
- 3.Remove Play/Pause Mask
- 4.Add Event:onPlayFinish, called when play video finished