fix(vue): 修复example fetch& 释放播放器实例

numberwolf · Apr 26, 2022 · 9177f7a · 9177f7a
1 parent 5ffcde6
commit 9177f7a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 68 deletions.
diff --git a/example_vue/public/index.html b/example_vue/public/index.html
@@ -16,6 +16,7 @@
       >
     </noscript>
 
+    <script src="/dist/missile-v20220421.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

diff --git a/example_vue/src/App.vue b/example_vue/src/App.vue
@@ -46,61 +46,62 @@
  * vue/next is same as vue2, so we should init  project
  * in mounted lifecycle.
  */
-import { defineComponent, onMounted, onUnmounted, ref } from "vue";
-import { createPlayerServer, executePlayerServer } from "./services/player";
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import {
+  createPlayerServer,
+  executePlayerServer,
+  destoryPlayerServer,
+} from './services/player'
 
 /**
  * By default we define a constant vairiable should without vue module
  */
-const URL = "hevc_test_moov_set_head_16s.mp4";
+const URL = 'hevc_test_moov_set_head_16s.mp4'
 const H265JS_DEFAULT_PLAYER_CONFIG = {
-  player: "glplayer",
+  player: 'glplayer',
   width: 960,
   height: 540,
   token:
-    "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1",
+    'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1',
   extInfo: {
     moovStartFlag: true,
   },
-};
+}
 
 export default defineComponent({
   setup() {
-    const timelineRef = ref(null);
-    let playerObject = null;
+    const timelineRef = ref(null)
+    let playerObject = null
     const resolveConfig = (conf) =>
-      Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf);
+      Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf)
 
     onMounted(() => {
-      playerObject = createPlayerServer(URL, resolveConfig());
-      executePlayerServer(playerObject, timelineRef.value);
-    });
+      playerObject = createPlayerServer(URL, resolveConfig())
+      executePlayerServer(playerObject, timelineRef.value)
+    })
 
-    onUnmounted(() => {
-      playerObject = null;
-    });
+    onUnmounted(() => destoryPlayerServer(playerObject))
 
     const playAction = (action) => {
-      // console.log(playerObject);
-      if (action === "pause" && playerObject.isPlaying()) {
-        console.log("[Action]: Pause");
-        playerObject.pause();
-        return;
+      if (action === 'pause' && playerObject.isPlaying()) {
+        console.log('[Action]: Pause')
+        playerObject.pause()
+        return
       }
-      if (action === "resume" && !playerObject.isPlaying()) {
-        console.log("[Action]: Resume");
-        playerObject.play();
-        return;
+      if (action === 'resume' && !playerObject.isPlaying()) {
+        console.log('[Action]: Resume')
+        playerObject.play()
+        return
       }
-    };
+    }
 
-    const resumeHandler = () => playAction("resume");
+    const resumeHandler = () => playAction('resume')
 
-    const pauseHandler = () => playAction("pause");
+    const pauseHandler = () => playAction('pause')
 
-    return { resumeHandler, pauseHandler, timelineRef };
+    return { resumeHandler, pauseHandler, timelineRef }
   },
-});
+})
 </script>
 
 <style scoped>

diff --git a/example_vue/src/main.js b/example_vue/src/main.js
@@ -1,17 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-const loadScript = (url) =>
-  new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = url
-    script.onload = () => {
-      resolve()
-    }
-    script.onerror = () => {
-      reject('cannot load script ' + url)
-    }
-    document.body.appendChild(script)
-  })
-
-loadScript('/dist/missile-v20220421.js').then((res) => createApp(App).mount('#app'))
+createApp(App).mount('#app')
diff --git a/example_vue/src/services/player.js b/example_vue/src/services/player.js
@@ -1,46 +1,56 @@
-import H265webjsModule from "../../public/dist/index";
+import H265webjsModule from '../../public/dist/index'
 
 const durationFormmat = (val) => {
-  val = val.toString();
-  if (val.length < 2) return "0" + val;
-  return val;
-};
+  val = val.toString()
+  if (val.length < 2) return '0' + val
+  return val
+}
 
 const setDurationText = (duration) => {
-  if (duration < 0) return "Player";
-  const randDuration = Math.round(duration);
+  if (duration < 0) return 'Player'
+  const randDuration = Math.round(duration)
   return (
     durationFormmat(Math.floor(randDuration / 3600)) +
-    ":" +
+    ':' +
     durationFormmat(Math.floor((randDuration % 3600) / 60)) +
-    ":" +
+    ':' +
     durationFormmat(Math.floor(randDuration % 60))
-  );
-};
+  )
+}
 
 export const createPlayerServer = (videoUrl, config) => {
-  return H265webjsModule.createPlayer(videoUrl, config);
-};
+  return H265webjsModule.createPlayer(videoUrl, config)
+}
 
 export const executePlayerServer = (player, timelineEl) => {
   // todo....
-  let mediaInfo = null;
+  let mediaInfo = null
   player.onLoadFinish = () => {
-    mediaInfo = player.mediaInfo();
-    if (mediaInfo.videoType === "vod") {
+    mediaInfo = player.mediaInfo()
+    if (mediaInfo.videoType === 'vod') {
       timelineEl.textContent =
         setDurationText(0) +
-        "/" +
-        setDurationText(mediaInfo.meta.durationMs / 1000);
+        '/' +
+        setDurationText(mediaInfo.meta.durationMs / 1000)
     }
-  };
+  }
   player.onPlayTime = (pts) => {
-    if (mediaInfo.videoType === "vod") {
+    if (mediaInfo.videoType === 'vod') {
       timelineEl.textContent =
         setDurationText(pts) +
-        "/" +
-        setDurationText(mediaInfo.meta.durationMs / 1000);
+        '/' +
+        setDurationText(mediaInfo.meta.durationMs / 1000)
     }
-  };
-  player.do();
-};
+  }
+  player.do()
+}
+
+/**
+ *
+ * @param {ReturnType<typeof H265webjsModule.createPlayer>} playerInstance
+ */
+export const destoryPlayerServer = (playerInstance) => {
+  // release playerInstance & forece Gc
+  playerInstance.release()
+  playerInstance = null
+}