修改 destroy promise 返回类型

langhuihui · Jun 3, 2024 · 5bb7ea2 · 5bb7ea2
1 parent 791f775
commit 5bb7ea2
Show file tree

Hide file tree

Showing 32 changed files with 392 additions and 171 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -486,9 +486,16 @@ jessibuca.close();
 ### destroy()
 
 - **用法**： 关闭视频，释放底层资源
+- **返回**：
+    - `{Promise}`
 
 ```js
-jessibuca.destroy()
+jessibuca.destroy().then(()=>{
+    // todo: next
+})
+
+// 或者
+await jessibuca.destroy();
 ```
 
 ### clearView()

diff --git a/demo/components/DemoPlayer.vue b/demo/components/DemoPlayer.vue
@@ -188,9 +188,9 @@ export default {
         this.create();
         window.onerror = (msg) => (this.err = msg);
     },
-    unmounted() {
+    async unmounted() {
         if (this.$options && this.$options.jessibuca) {
-            this.$options.jessibuca.destroy();
+            await this.$options.jessibuca.destroy();
         }
         this.vConsole.destroy();
     },
@@ -373,9 +373,9 @@ export default {
         rotateChange() {
             this.$options.jessibuca.setRotate(this.rotate);
         },
-        destroy() {
+        async destroy() {
             if (this.$options.jessibuca) {
-                this.$options.jessibuca.destroy();
+                await this.$options.jessibuca.destroy()
             }
             this.create();
             this.playing = false;
@@ -400,13 +400,11 @@ export default {
             this.$options.jessibuca.stopRecordAndSave();
         },
 
-
         screenShot() {
             this.$options.jessibuca.screenshot();
         },
 
-
-        restartPlay(type) {
+        async restartPlay(type) {
 
             if (type === 'mse') {
                 this.useWCS = false;
@@ -423,7 +421,7 @@ export default {
                 this.useOffscreen = false;
             }
 
-            this.destroy();
+            await this.destroy();
             setTimeout(() => {
                 this.play();
             }, 100)

diff --git a/demo/public/2x2-demo.html b/demo/public/2x2-demo.html
@@ -156,6 +156,7 @@
     var showOperateBtns = true; // 是否显示按钮
     var forceNoOffscreen = true; //
     var playList = [];
+    var size = 4;
 
     function create(id) {
         var $container = document.getElementById('container' + id);
@@ -190,7 +191,7 @@
     }
 
 
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < size; i++) {
         create(i + 1);
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
@@ -199,7 +200,7 @@
 
 
     $player.addEventListener('click', function () {
-        for (let i = 0; i < 4; i++) {
+        for (let i = 0; i < size; i++) {
             var id = i + 1;
             var $playHref = document.getElementById('playUrl' + id);
             let player = playList[i];
@@ -225,26 +226,35 @@
     $pause.addEventListener('click', function () {
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
-        for (let i = 0; i < 4; i++) {
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
             player && player.pause()
         }
     })
 
     $destroy.addEventListener('click', function () {
-        for (let i = 0; i < 4; i++) {
+        const destroyList = [];
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
-            player && player.destroy()
-        }
-        playList = [];
-        setTimeout(() => {
-            for (let i = 0; i < 4; i++) {
-                create(i + 1);
+            if (player) {
+                destroyList.push(player.destroy());
             }
-            $player.style.display = 'inline-block';
-            $pause.style.display = 'none';
-            $destroy.style.display = 'none';
-        }, 100)
+        }
+        Promise.all(destroyList).then(() => {
+            playList = [];
+            setTimeout(() => {
+                for (let i = 0; i < size; i++) {
+                    create(i + 1);
+                }
+                $player.style.display = 'inline-block';
+                $pause.style.display = 'none';
+                $destroy.style.display = 'none';
+            }, 100)
+        }).catch((e) => {
+            console.error(e);
+        })
+
+
     })
 
 </script>

diff --git a/demo/public/3x3-demo.html b/demo/public/3x3-demo.html
@@ -213,6 +213,7 @@
     var showOperateBtns = true; // 是否显示按钮
     var forceNoOffscreen = true; //
     var playList = [];
+    var size = 9;
 
     function create(id) {
         var $container = document.getElementById('container' + id);
@@ -223,7 +224,7 @@
             isResize: false,
             text: "",
             loadingText: "加载中",
-            debug: true,
+            debug: false,
             showBandwidth: showOperateBtns, // 显示网速
             operateBtns: {
                 fullscreen: showOperateBtns,
@@ -245,7 +246,7 @@
     }
 
 
-    for (let i = 0; i < 9; i++) {
+    for (let i = 0; i < size; i++) {
         create(i + 1);
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
@@ -254,7 +255,7 @@
 
 
     $player.addEventListener('click', function () {
-        for (let i = 0; i < 9; i++) {
+        for (let i = 0; i < size; i++) {
             var id = i + 1;
             var $playHref = document.getElementById('playUrl' + id);
             let player = playList[i];
@@ -280,26 +281,35 @@
     $pause.addEventListener('click', function () {
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
-        for (let i = 0; i < 9; i++) {
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
             player && player.pause()
         }
     })
 
     $destroy.addEventListener('click', function () {
-        for (let i = 0; i < 9; i++) {
+        const destroyList = [];
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
-            player && player.destroy()
-        }
-        playList = [];
-        setTimeout(() => {
-            for (let i = 0; i < 9; i++) {
-                create(i + 1);
+            if (player) {
+                destroyList.push(player.destroy());
             }
-            $player.style.display = 'inline-block';
-            $pause.style.display = 'none';
-            $destroy.style.display = 'none';
-        }, 100)
+        }
+        Promise.all(destroyList).then(() => {
+            playList = [];
+            setTimeout(() => {
+                for (let i = 0; i < size; i++) {
+                    create(i + 1);
+                }
+                $player.style.display = 'inline-block';
+                $pause.style.display = 'none';
+                $destroy.style.display = 'none';
+            }, 100)
+        }).catch((e) => {
+            console.error(e);
+        })
+
+
     })
 
 </script>

diff --git a/demo/public/MSE-2x2-demo.html b/demo/public/MSE-2x2-demo.html
@@ -122,7 +122,7 @@
             <input
                 autocomplete="on"
                 id="playUrl2"
-                value="http://flv.bdplay.nodemedia.cn/live/bbb.flv"
+                value="http://flv.bdplay.nodemedia.cn/live/bbb_264.flv"
             />
         </div>
         <div class="input">
@@ -138,7 +138,7 @@
             <input
                 autocomplete="on"
                 id="playUrl4"
-                value="http://flv.bdplay.nodemedia.cn/live/bbb.flv"
+                value="http://flv.bdplay.nodemedia.cn/live/bbb_264.flv"
             />
         </div>
         <div class="input">
@@ -160,6 +160,7 @@
     var showOperateBtns = true; // 是否显示按钮
     var forceNoOffscreen = true; //
     var playList = [];
+    var size = 4;
 
     function create(id) {
         var $container = document.getElementById('container' + id);
@@ -170,7 +171,7 @@
             isResize: false,
             text: "",
             loadingText: "加载中",
-            debug: true,
+            debug: false,
             showBandwidth: showOperateBtns, // 显示网速
             operateBtns: {
                 fullscreen: showOperateBtns,
@@ -192,7 +193,7 @@
     }
 
 
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < size; i++) {
         create(i + 1);
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
@@ -201,7 +202,7 @@
 
 
     $player.addEventListener('click', function () {
-        for (let i = 0; i < 4; i++) {
+        for (let i = 0; i < size; i++) {
             var id = i + 1;
             var $playHref = document.getElementById('playUrl' + id);
             let player = playList[i];
@@ -227,26 +228,35 @@
     $pause.addEventListener('click', function () {
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
-        for (let i = 0; i < 4; i++) {
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
             player && player.pause()
         }
     })
 
     $destroy.addEventListener('click', function () {
-        for (let i = 0; i < 4; i++) {
+        const destroyList = [];
+        for (let i = 0; i < size; i++) {
             let player = playList[i];
-            player && player.destroy()
-        }
-        playList = [];
-        setTimeout(() => {
-            for (let i = 0; i < 4; i++) {
-                create(i + 1);
+            if (player) {
+                destroyList.push(player.destroy());
             }
-            $player.style.display = 'inline-block';
-            $pause.style.display = 'none';
-            $destroy.style.display = 'none';
-        }, 100)
+        }
+        Promise.all(destroyList).then(() => {
+            playList = [];
+            setTimeout(() => {
+                for (let i = 0; i < size; i++) {
+                    create(i + 1);
+                }
+                $player.style.display = 'inline-block';
+                $pause.style.display = 'none';
+                $destroy.style.display = 'none';
+            }, 100)
+        }).catch((e) => {
+            console.error(e);
+        })
+
+
     })
 
 </script>