Merge pull request #170 from girlbymirror/master

Support: Resize
numberwolf · Aug 13, 2022 · e33b061 · e33b061
2 parents 01a888f + 62b7c00
commit e33b061
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 16 deletions.
diff --git a/README.MD b/README.MD
@@ -141,6 +141,7 @@
 | 获取 音频采样率 | 是 | ---- |
 | 追帧策略算法 | 是 |  HTTP-FLV(no audio) |
 | 倍速调整 | 是 |  H.264/AV1 |
+| Resize缩放 | 是 | ---- |
 
 <br>
 

diff --git a/README_EN.MD b/README_EN.MD
@@ -155,6 +155,8 @@ Notice：
 
 		- [Play frame by frame(next frame)](#nextframe)
 
+		- [Resize](#resize)
+
 		- [Snapshot](#snapshot)
 
 		- [Release Player](#release)
@@ -251,6 +253,7 @@ Notice：
 | Get Audio SampleRate | Y | ---- |
 | Chase Frame | Y | HTTP-FLV(no audio) |
 | PlayBackRate | Y | H.264/AV1 |
+| Resize | Y | ---- |
 
 <br>
 
@@ -860,10 +863,16 @@ player.closeFullScreen();
 
 |  Function | Return | Desc |
 |  ----  | ----  | ---- |
-| playNextFrame()  | - | play next frame |
+| playNextFrame()  | true/false | play next frame |
 
 <br>
 
+#### resize ####
+
+| Function | Return | Desc |
+| ---- | ---- | ----|
+| resize(width, height) | true/false | resize |
+
 
 #### snapshot ####
 
@@ -956,6 +965,8 @@ ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
 
 | Update | Content |
 | ---- | ---- |
+| Time | 2022/08/13 |
+| - | 0.Support: Resize |
 | Time | 2022/07/27 |
 | - | 0.Support: PlayBackRate |
 | Time | 2022/07/12 |

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

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

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

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

diff --git a/example_normal/index.html b/example_normal/index.html
@@ -37,7 +37,7 @@
     <link rel="stylesheet" type="text/css" href='player-view/css/button.css'>
     <link rel="stylesheet" type="text/css" href='player-view/css/progress.css'>
     <script src="dist/missile.js"></script>
-    <script src="dist/h265webjs-v20220801.js"></script>
+    <script src="dist/h265webjs-v20220813.js"></script>
     <script src="index.js"></script>
 
 </head>

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

diff --git a/index-debug.html b/index-debug.html
@@ -33,10 +33,10 @@
     <meta charset="utf-8" name="github" content="https://github.com/numberwolf/h265web.js">
 
     <script src="dist/missile.js"></script> <!-- IMPORTANT -->
-    <script src="dist/h265webjs-v20220801.js"></script> <!-- IMPORTANT -->
+    <script src="dist/h265webjs-v20220813.js"></script> <!-- IMPORTANT -->
 
     <!--<script src="dist-multi-thread/missile-multi-thread.js"></script>
-    <script src="dist-multi-thread/h265webjs-v20220801.js"></script>-->
+    <script src="dist-multi-thread/h265webjs-v20220813.js"></script>-->
 
     <style>
     </style>

diff --git a/src/src/h265webjs.js b/src/src/h265webjs.js
@@ -777,6 +777,82 @@ class H265webjsModule {
         return false;
     } // showNextFrame
 
+    resize(width, height) {
+        let _this = this;
+        // _this.playParam.size = {
+        //     width   : _this.player.mediaInfo.width,
+        //     height  : _this.player.mediaInfo.height
+        // };
+        if (this.player !== undefined && this.player !== null) {
+            if (!width ||
+                !height ||
+                !this.playParam.size.width ||
+                !this.playParam.size.height
+            ) {
+                return false;
+            }
+
+            const mediaW = this.playParam.size.width;
+            const mediaH = this.playParam.size.height;
+
+            const isHEVC = this.playParam.videoCodec === 0;
+            const glCanvasBox = document
+                .querySelector('#' + this.configFormat.playerId);
+            glCanvasBox.style.width = width + "px";
+            glCanvasBox.style.height = height + "px";
+
+            if (isHEVC === true) {
+                // soft decoder
+                let resizeBase = (targetWidth, targetHeight) => {
+                    // console.log('checkDisplaySize==========>', targetWidth, targetHeight, mediaW, mediaH);
+                    let biggerWidth = mediaW / targetWidth > mediaH / targetHeight;
+                    let fixedWidth = (targetWidth / mediaW).toFixed(2);
+                    let fixedHeight = (targetHeight / mediaH).toFixed(2);
+                    let scaleRatio = biggerWidth ? fixedWidth : fixedHeight;
+
+                    let width = parseInt(mediaW * scaleRatio, 10);
+                    let height = parseInt(mediaH * scaleRatio, 10);
+                    // console.log(
+                    //     'checkDisplaySize ==========>',
+                    //     targetWidth, targetHeight, mediaW, mediaH);
+                    // console.log(
+                    //     'checkDisplaySize ret ==========>', width, height);
+
+                    console.log("debug resize => targetHeight:", targetHeight, ", height:", height);
+                    console.log("debug resize => targetWidth:", targetWidth, ", width:", width);
+
+                    let topMargin = parseInt((targetHeight - height) / 2, 10);
+                    let leftMargin = parseInt((targetWidth - width) / 2, 10);
+                    // console.log(topMargin, leftMargin);
+                    // player.isCheckDisplay = true;
+                    return [topMargin, leftMargin, width, height];
+                }; // end resizeBase
+
+                let glCanvas = glCanvasBox
+                    .getElementsByTagName('canvas')[0];
+
+                let resizeData = resizeBase(width, height);
+                console.log("debug resize => resizeData:", resizeData);
+
+                glCanvas.style.marginTop = resizeData[0] + 'px';
+                glCanvas.style.marginLeft = resizeData[1] + 'px';
+                glCanvas.style.width = resizeData[2] + 'px';
+                glCanvas.style.height = resizeData[3] + 'px';
+            } else {
+                // native
+                let glCanvas = glCanvasBox
+                    .getElementsByTagName('video')[0];
+
+                glCanvas.style.width = width + 'px';
+                glCanvas.style.height = height + 'px';
+            } // end check avc/hevc resize
+
+            return true;
+        }
+
+        return false;
+    }
+
     /**********
      Private
      **********/

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

diff --git a/src/version.sh b/src/version.sh
@@ -19,5 +19,5 @@
 #  * Github: https://github.com/numberwolf/h265web.js
 #  * 
 #  **********************************************************/
-VERSION='v20220801' # output version + index.js
+VERSION='v20220813' # output version + index.js
 WASM_VERSION='v20220706'