feat: hls examples

Ezviz-OpenBiz · Jul 31, 2024 · 54b4d2c · 54b4d2c
1 parent 176c590
commit 54b4d2c
Show file tree

Hide file tree

Showing 42 changed files with 55,065 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+node_modules/
+dist/
+build/
+.cache
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,3 @@
+## 暂停不提供 CDN
+
+解码库资源 `decoder.worker.js`, `decoder.wasm`
diff --git a/examples/base-app/README.md b/examples/base-app/README.md
@@ -0,0 +1,16 @@
+## 使用
+
+
+
+```bash
+
+# 安装 http-server
+yarn install
+
+## 安装 `ezuikit-flv`, 拷贝 `node_modules/ezuikit-flv`下的 `decoder.js`, `decoder.wasm` 和 `index.js` 文件到当前目录下
+
+## 运行
+## http://localhost:8080
+yarn run dev
+
+```
diff --git a/examples/base-app/index.html b/examples/base-app/index.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="./index.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .root {
+            display: flex;
+            place-content: center;
+            margin-top: 3rem;
+        }
+
+        #container {
+            background: #000;
+            width: 640px;
+            height: 398px;
+        }
+
+        .input {
+            display: flex;
+            margin-top: 10px;
+            color: white;
+            place-content: stretch;
+        }
+
+        .input input {
+            flex: auto;
+        }
+
+        button {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    </style>
+</head>
+
+<body class="page">
+    <div class="root">
+        <div class="container-shell">
+            <div id="container"></div>
+            <div class="input">
+                <input autocomplete="on" id="playUrl" value="" />
+                <button id="init">初始化</button>
+            </div>
+            <div style="display: inline-flex;">
+                <button id="play">播放</button>
+                <button id="pause">停止</button>
+                <button id="destroy">销毁</button>
+                <select id="setDebug">
+                    <option value>打印日志</option>
+                    <option value="0">不打印日志</option>
+                </select>
+                <div title="只取小数点后两位，不进位">
+                    <label>音量：</label>
+                    <input placeholder="0~1" id="setVolume" type="number" step="0.01" style="width: 60px" />
+                </div>
+                <div>
+                    <label>旋转</label>
+                    <select id="setRotate" title="只支持 0 | 90 | 180 | 270">
+                        <option value="0">0度</option>
+                        <option value="90">90度</option>
+                        <option value="180">180度</option>
+                        <option value="270">270度</option>
+                    </select>
+                </div>
+                <div>
+                    <label>填充模式</label>
+                    <select id="setScaleMode" title="填充模式">
+                        <option value="0">完全填充区域（拉伸）</option>
+                        <option value="1" selected>等比缩放,最大边填充</option>
+                        <option value="2">等比缩放,最小边填充</option>
+                    </select>
+                </div>
+                <button id="getVersion">获取版本</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        var $init = document.getElementById('init');
+        var $play = document.getElementById('play');
+        var $pause = document.getElementById('pause');
+        var $playHref = document.getElementById('playUrl');
+        var $container = document.getElementById('container');
+        var $destroy = document.getElementById('destroy');
+        var $getVersion = document.getElementById('getVersion');
+
+        var $setDebug = document.getElementById('setDebug')
+        var $setVolume = document.getElementById('setVolume')
+        var $setRotate = document.getElementById('setRotate')
+        var $setScaleMode = document.getElementById('setScaleMode')
+
+        var player = null;
+
+        function create() {
+            player = new ({
+                container: $container,
+                url: $playHref.value,
+                debug: true
+            });
+
+            player.on("error", (msg) => { console.error(msg) })
+        }
+
+        $init.addEventListener('click', function () {
+            var href = $playHref.value;
+
+            if (player) {
+                player.destroy()
+                player = null
+            }
+
+            if (href) {
+                create()
+                player.play();
+            }
+        }, false)
+
+        $play.addEventListener('click', function () {
+            if (player) {
+                player.play();
+            }
+        }, false)
+
+        $pause.addEventListener('click', function () {
+            if (player) player.pause();
+        })
+
+        $destroy.addEventListener('click', function () {
+            if (player) {
+                player.destroy();
+                player = null
+            }
+            create();
+        })
+
+        $getVersion.addEventListener("click", () => {
+            if (player) {
+                console.log(player.getVersion())
+            }
+        })
+
+        $setDebug.addEventListener('change', (e) => {
+            if (player) {
+                player.setDebug(e.target.value !== '0')
+            }
+        })
+
+        $setRotate.addEventListener('change', (e) => {
+            if (player) {
+                player.setRotate(e.target.value)
+            }
+        })
+        $setScaleMode.addEventListener('change', (e) => {
+            if (player) {
+                player.setScaleMode(e.target.value)
+            }
+        })
+        $setVolume.addEventListener('blur', (e) => {
+            if (player) {
+                player.setVolume(e.target.value)
+            }
+        })
+
+    </script>
+
+</body>
+
+</html>
diff --git a/examples/base-app/index.js b/examples/base-app/index.js
diff --git a/examples/base-app/package.json b/examples/base-app/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "base-app",
+  "version": "1.0.0",
+  "main": "",
+  "scripts": {
+    "dev": "http-server -p 8080 ."
+  },
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  },
+  "dependencies": {
+    "@ezuikit/player-hls": "^0.1.0-alpha.1"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## 暂停不提供 CDN

		解码库资源 `decoder.worker.js`, `decoder.wasm`