✨ new option decoder

anucvml · Feb 28, 2022 · 36e48cd · 36e48cd
1 parent 68d9cd3
commit 36e48cd
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -65,7 +65,7 @@
     <q-page-container>
       <q-page padding>
         <template v-if="annotationStore.hasVideo">
-          <VideoLoaderV2 v-if="canUseV2"/>
+          <VideoLoaderV2 v-if="useV2"/>
           <VideoLoaderV1 v-else/>
         </template>
         <router-view></router-view>
@@ -93,6 +93,7 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useQuasar } from 'quasar'
+import { computed } from 'vue'
 import VideoLoaderV1 from '~/components/VideoLoaderV1.vue'
 import VideoLoaderV2 from '~/components/VideoLoaderV2.vue'
 import { useAnnotation } from '~/hooks/annotation.js'
@@ -112,7 +113,16 @@ const preferenceStore = usePreferenceStore()
 const q = useQuasar()
 q.dark.set('auto')
 
-const canUseV2 = !!window.VideoDecoder
+const useV2 = computed(() => {
+  console.log('Video Decoder: ', preferenceStore.decoder)
+  if (preferenceStore.decoder === 'v1') {
+    return false
+  } else if (preferenceStore.decoder === 'v2') {
+    return true
+  } else {
+    return !!window.VideoDecoder
+  }
+})
 
 // get parameters from url
 const URLParameter = {}
@@ -134,6 +144,7 @@ const {
   sensitivity,
   defaultfps: defaultFps,
   defaultfpk: defaultFpk,
+  decoder: decoder,
   showobjects: showObjects,
   showregions: showRegions,
   showskeletons: showSkeletons,
@@ -203,6 +214,11 @@ if (defaultFpk) {
     preferenceStore.defaultFpk = fpk
   }
 }
+if (decoder) {
+  if (decoder in ['auto', 'v1', 'v2']) {
+    preferenceStore.decoder = decoder
+  }
+}
 if (showObjects) {
   if (showObjects.toLowerCase() === 'true') {
     preferenceStore.objects = true

diff --git a/src/components/VideoLoaderV1.vue b/src/components/VideoLoaderV1.vue
@@ -48,18 +48,21 @@ const handleLoadeddata = (event) => {
   }
   // add frame index into the backendQueue
   // 1. every one second
+  annotationStore.backendQueue = []
   for (let i = 1.0; i < annotationStore.video.duration; i++) {
     const index = utils.time2index(i)
     if (keyframeList.indexOf(index) === -1) {
       annotationStore.backendQueue.push(index)
     }
   }
   // 2. every 1 / fps second
+  annotationStore.priorityQueue = []
   for (let i = interval; i < annotationStore.video.duration; i += interval) {
     if (i.toFixed(1) % 1 !== 0) {
       annotationStore.backendQueue.push(utils.time2index(i))
     }
   }
+  annotationStore.cachedFrameList = []
   nextTick(() => {
     event.target.currentTime = 0.0
   })

diff --git a/src/components/VideoLoaderV2.vue b/src/components/VideoLoaderV2.vue
@@ -1,5 +1,4 @@
 <template>
-
 </template>
 
 <script setup>
@@ -20,6 +19,7 @@ onMounted(() => {
     if (newValue) {
       worker = new VideoProcessWorker()
       worker.postMessage({ src: newValue, defaultFps: preferenceStore.defaultFps })
+      annotationStore.cachedFrameList = []
       annotationStore.isCaching = true
       worker.onmessage = event => {
         if (event.data.videoTrackInfo) {

diff --git a/src/pages/annotation/CanvasPanel.vue b/src/pages/annotation/CanvasPanel.vue
@@ -8,7 +8,10 @@
         :width="CANVAS_WIDTH"
         :height="canvasHeight"
     />
-    <VideoPlayer v-if="position === 'left'" class="absolute-top"/>
+    <VideoPlayer
+        v-if="position === 'left'"
+        class="absolute-top"
+    />
     <canvas
         ref="canvas"
         style="inset: 0;"

diff --git a/src/pages/preference/Preference.vue b/src/pages/preference/Preference.vue
@@ -29,7 +29,7 @@
             >The number of pixels for border detection in Canvas.</q-tooltip></span>
           </q-item-label>
         </q-item-section>
-        <q-item-section avatar>
+        <q-item-section>
           <q-input
               dense
               outlined
@@ -53,7 +53,7 @@
             >The default frame(s) per second if not specified in config or annotation file.</q-tooltip></span>
           </q-item-label>
         </q-item-section>
-        <q-item-section avatar>
+        <q-item-section>
           <q-input
               dense
               outlined
@@ -77,7 +77,7 @@
             >The default frame(s) per keyframe if the keyframe list is not provided in annotation file.</q-tooltip></span>
           </q-item-label>
         </q-item-section>
-        <q-item-section avatar>
+        <q-item-section>
           <q-input
               dense
               outlined
@@ -89,6 +89,27 @@
           />
         </q-item-section>
       </q-item>
+      <q-item
+          tag="label"
+          v-ripple
+      >
+        <q-item-section>
+          <q-item-label>
+            <span>Video Decoder<q-tooltip
+                anchor="center right"
+                self="center left"
+            >Which video decoder is used to extract frames. Find more details in the documentation.</q-tooltip></span>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section>
+          <q-select
+              dense
+              outlined
+              v-model="decoder"
+              :options="['auto', 'v1', 'v2']"
+          />
+        </q-item-section>
+      </q-item>
       <q-item
           tag="label"
           v-ripple
@@ -249,6 +270,7 @@ const {
   sensitivity,
   defaultFps,
   defaultFpk,
+  decoder,
   objects,
   regions,
   skeletons,

diff --git a/src/store/preference.js b/src/store/preference.js
@@ -8,6 +8,7 @@ const DEFAULT_PREFERENCE = {
   sensitivity: Platform.has.touch ? 10 : 5,
   defaultFps: 10,
   defaultFpk: 50,
+  decoder: 'auto', // auto, v1, v2
   objects: true,
   regions: true,
   skeletons: true,