support websocket hevc live stream

numberwolf · May 9, 2022 · e429530 · e429530
1 parent 9050683
commit e429530
Show file tree

Hide file tree

Showing 20 changed files with 739 additions and 888 deletions.
diff --git a/README.MD b/README.MD
@@ -34,8 +34,11 @@
 | <img src="resource/icon-ts.png" width="100"> | <img src="resource/icon-mpegps.png" width="100"> | <img src="resource/icon-av1.png" width="100"> | <img src="resource/icon-mov-h265.png" width="100">|
 | MPEG-TS(VOD) | MPEG-PS(VOD) | AV1(Chrome) | MOV(H.265) |
 | <br> | <br> | <br> | <br> |
-| <img src="resource/icon-hevc.png" width="100"> | <img src="resource/icon-mkv.png" width="100"><br> | <img src="resource/icon-todo.png" width="100"> | <img src="resource/icon-todo.png" width="100"><br> |
-| HTTP-HEVC | MKV(HEVC) | G711A | HDR10(BT2020) |
+| <img src="resource/icon-hevc.png" width="100"> | <img src="resource/icon-websockethevc.png" width="100"> | <img src="resource/icon-mkv.png" width="100"><br> | <img src="resource/icon-aac.png" width="100"> |
+| HTTP-HEVC | WS-HEVC | MKV(HEVC) | AAC(MAIN/LC) |
+| <br> | <br> | <br> | <br> |
+| <img src="resource/icon-todo.png" width="100"> |
+| G711A |
 
 </font>
 </strong>
@@ -187,6 +190,9 @@
 | flv | 点播 |  是  | --- |
 | http-flv | 直播 |  是  | CodecID=12 |
 | http-ts | 直播 |  是  | ---- |
+| http-hevc | 直播 |  是  | ---- |
+| http-hevc | 点播 |  是  | ---- |
+| websocket-hevc | 直播 |  是  | ---- |
 | websocket-flv | 直播 |  是  | ---- |
 | websocket-ts | 直播 |  是  | ---- |
 | HEVC/H.265 | 点播 |  是  | ---- |
@@ -458,72 +464,25 @@ var config = {
 
 		* 3. 如果创建的是`raw265`类型的Websocket等直播裸流数据播放 请注意
 			(普通265点播流直接填写url播放就可以，不需要走如下流程)
-			> 这部分fetch请求网络数据以及异步喂数据的过程 请自行改写,下面给出的仅仅是一个demo,网络IO和解析265流为帧数据会非常耗时。
-			>   
-			> 如果你可以通过websocket直接一帧一帧传输的话，那么只需要调用喂265数据的函数即可。
-
-			* `raw265`类型下，喂一帧一帧H.265播放
-
-			调用函数
-
-			|  函数 | 返回 | 说明 | 
-			|  ----  | ----  | ---- |
-			| append265NaluFrame  | NULL | 喂一帧265数据 |
-
-			参数
-
-			| 参数 | 类型 | 默认值 | 必填 | 说明 | 
-			|  ----  | ----  | ---- | ---- | ---- |
-			| frame  | Uint8Array | - | 是 | 一帧265数据 |
-
-			例子 - 这里直接将265文件通过网络串流传输
+			* 请填写`raw265`类型, 添加`rawFps`选项设置播放帧率
 
 			```javascript
-			//
-		    // fetch 265
-		    // you can use your code to fetch vod stream
-		    // only need `h265webjs.append265NaluFrame(nalBuf);` to append 265 frame
-		    //
-		    let rawParser = new RawParserModule();
-
-		    let fetchFinished = false;
-		    let startFetch = false;
-		    let networkInterval = window.setInterval(() => {
-		        if (!startFetch) {
-		            startFetch = true;
-		            fetch(url265).then(function(response) {
-		                let pump = function(reader) {
-		                    return reader.read().then(function(result) {
-		                        if (result.done) {
-		                            // console.log("========== RESULT DONE ===========");
-		                            fetchFinished = true;
-		                            window.clearInterval(networkInterval);
-		                            networkInterval = null;
-		                            return;
-		                        }
-		                        let chunk = result.value;
-		                        rawParser.appendStreamRet(chunk);
-		                        return pump(reader);
-		                    });
-		                }
-		                return pump(response.body.getReader());
-		            })
-		            .catch(function(error) {
-		                console.log(error);
-		            });
-		        }
-		    }, 1);
-
-		    // fps>=30 play else cache
-		    let naluParseInterval = window.setInterval(() => {
-		        if (nalBuf != false) {
-		            // require
-		            h265webjs.append265NaluFrame(nalBuf);
-		        } else if (fetchFinished) {
-		            window.clearInterval(naluParseInterval);
-		            naluParseInterval = null;
-		        }
-		    }, 1);
+			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,
+                }
+            };
 			```
 
 <br>
@@ -982,6 +941,8 @@ ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
 
 | 更新日志 | 内容 |
 | ---- | ---- |
+| 时间 | 2022/05/09 |
+| - | 0.支持 Websocket 265流播放 |
 | 时间 | 2022/05/07 |
 | - | 0.点播内核错误优化 |
 | - | 1.265裸流点播流程优化，只需要填写url和rawFps即可播放 |

diff --git a/README_EN.MD b/README_EN.MD
@@ -35,8 +35,11 @@ A hevc/h.265 web player, easy to play 1080P. `~^_^~ For love` if <a href="https:
 | <img src="resource/icon-ts.png" width="100"> | <img src="resource/icon-mpegps.png" width="100"> | <img src="resource/icon-av1.png" width="100"> | <img src="resource/icon-mov-h265.png" width="100">|
 | MPEG-TS(VOD) | MPEG-PS(VOD) | AV1(Chrome) | MOV(H.265) |
 | <br> | <br> | <br> | <br> |
-| <img src="resource/icon-hevc.png" width="100"> | <img src="resource/icon-mkv.png" width="100"><br> | <img src="resource/icon-todo.png" width="100"> | <img src="resource/icon-todo.png" width="100"><br> |
-| HTTP-HEVC | MKV(HEVC) | G711A | HDR10(BT2020) |
+| <img src="resource/icon-hevc.png" width="100"> | <img src="resource/icon-websockethevc.png" width="100"> | <img src="resource/icon-mkv.png" width="100"><br> | <img src="resource/icon-aac.png" width="100"> |
+| HTTP-HEVC | WS-HEVC | MKV(HEVC) | AAC(MAIN/LC) |
+| <br> | <br> | <br> | <br> |
+| <img src="resource/icon-todo.png" width="100"> |
+| G711A |
 
 </font>
 </strong>
@@ -76,7 +79,7 @@ Notice：
 
 ## Index
 
-- [Update Log](#upldatelog)
+- [Update Log](#updatelog)
 
 - [0、README](#0readme)
 
@@ -186,6 +189,9 @@ Notice：
 | 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  | ---- |
@@ -458,68 +464,25 @@ let config = {
 		* 3. NOTICE! If you want to create `raw265` stream player
 			(Do not need execute with this step when you play 265 vod stream)
 
-			* `raw265` type，feed byte data
-
-			Function
-
-			|  Function | Return | Desc | 
-			|  ----  | ----  | ---- |
-			| append265NaluFrame  | NULL | Feed H.265 nalu-frame (bytes) |
-
-			Params
-
-			| Param | Type | Default | Require | Desc | 
-			|  ----  | ----  | ---- | ---- | ---- |
-			| frame  | Uint8Array | - | Y | Bytes |
-
-			Example - I get a hevc file by network, and get bytes data to player.
+			* Add `raw265` type, and set `rawFps` for player's fps
 
 			```javascript
-			//
-		    // fetch 265
-		    // you can use your code to fetch vod stream
-		    // only need `h265webjs.append265NaluFrame(nalBuf);` to append 265 frame
-		    //
-		    let rawParser = new RawParserModule();
-
-		    let fetchFinished = false;
-		    let startFetch = false;
-		    let networkInterval = window.setInterval(() => {
-		        if (!startFetch) {
-		            startFetch = true;
-		            fetch(url265).then(function(response) {
-		                let pump = function(reader) {
-		                    return reader.read().then(function(result) {
-		                        if (result.done) {
-		                            // console.log("========== RESULT DONE ===========");
-		                            fetchFinished = true;
-		                            window.clearInterval(networkInterval);
-		                            networkInterval = null;
-		                            return;
-		                        }
-		                        let chunk = result.value;
-		                        rawParser.appendStreamRet(chunk);
-		                        return pump(reader);
-		                    });
-		                }
-		                return pump(response.body.getReader());
-		            })
-		            .catch(function(error) {
-		                console.log(error);
-		            });
-		        }
-		    }, 1);
-
-		    // fps>=30 play else cache
-		    let naluParseInterval = window.setInterval(() => {
-		        if (nalBuf != false) {
-		            // require
-		            h265webjs.append265NaluFrame(nalBuf);
-		        } else if (fetchFinished) {
-		            window.clearInterval(naluParseInterval);
-		            naluParseInterval = null;
-		        }
-		    }, 1);
+			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,
+                }
+            };
 			```
 
 
@@ -963,10 +926,12 @@ ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
 
 <br>
 
-# UpldateLog #
+# UpdateLog #
 
 | Update | Content |
 | ---- | ---- |
+| 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 |

diff --git a/dist/h265webjs-v20220507.js → dist/h265webjs-v20220509.js b/dist/h265webjs-v20220507.js → dist/h265webjs-v20220509.js
diff --git a/dist/index.js b/dist/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220507');
+require('./h265webjs-v20220509');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/example/dist/dist-play.js b/example/dist/dist-play.js
diff --git a/example/dist/h265webjs-v20220507.js → example/dist/h265webjs-v20220509.js b/example/dist/h265webjs-v20220507.js → example/dist/h265webjs-v20220509.js
diff --git a/example/dist/index.js b/example/dist/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220507');
+require('./h265webjs-v20220509');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/example/index.html b/example/index.html
@@ -126,8 +126,10 @@ <h1> h265web.js 播放器 Demo </h1>
 
         /******** raw hevc http(vod) *****/
         // var url = "http://127.0.0.1/test.h265";
+        // var url = "ws://localhost:9999";
 
         var config = {
+            // type: "raw265",
             player: "glplayer",
             width: 960,
             height: 540,