From 05d4fa7ca84836e24c6cd5f41c7313aa4a6e0f97 Mon Sep 17 00:00:00 2001
From: saulhuang <xing.hx@mogic.ai>
Date: Fri, 18 Oct 2024 14:19:32 +0800
Subject: [PATCH] feat: frame

---
 src/view/web_av_frame.vue | 60 ++++++++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/view/web_av_frame.vue b/src/view/web_av_frame.vue
index 1357d6f..044d9a9 100644
--- a/src/view/web_av_frame.vue
+++ b/src/view/web_av_frame.vue
@@ -1,15 +1,19 @@
 <template>
-    <div>使用webAV 实现视频解码帧序列图</div>
-    
-    <div class="img-list">
-        <div class="item" v-for="(item, idx) in imgList" :key="idx">
-            <div className="text-center">{{ (item.ts / 1e6).toFixed(2) }}s</div>
-            <img :src="item.img"/>
+   <div class="content">
+        <div>使用webAV 实现视频解码帧序列图</div>
+        
+        <div class="img-list">
+            <div class="item" v-for="(item, idx) in imgList" :key="idx">
+                <div className="text-center">{{ (item.ts / 1e6).toFixed(2) }}s</div>
+                <img :src="item.img"/>
+            </div>
         </div>
-    </div>
-    <div class="flex">
-        <button @click="play">截帧</button>
-    </div>
+        <p>运行时间：{{ time }}s</p>
+        <div class="flex">
+            <a-button type="primary" @click="play">本地视频截帧</a-button>
+            <a-button type="primary" @click="originPlay">远程视频截帧</a-button>
+        </div>
+   </div>
 </template>
 
 
@@ -17,9 +21,10 @@
 import { ref } from 'vue';
 import { MP4Clip } from '@webav/av-cliper';
 
-
+const time:any = ref(0)
 const videos = {
-    'output': '/video/output.mp4'
+    'output': '/video/output.mp4',
+    'origin': 'https://mogic-creative.oss-cn-hangzhou.aliyuncs.com/algorithm_qn/process/20240723/1721715464214_mute.mp4'
 }
 const imgList = ref<any[]>([{
     img: 'https://mogic-static.oss-cn-hangzhou.aliyuncs.com/app-sass/dddd.png',
@@ -42,15 +47,38 @@ const play = async () => {
         it.img = URL.createObjectURL(it.img)
         return it
     })
+    time.value = cost
+    console.log('imgList', imgList.value)
+    console.log('cost', cost)
+}
 
+const originPlay = async () => {
+    const resp1 = await fetch(videos['origin']);
+    clip = new MP4Clip(resp1.body!);
+    await clip.ready;
+    let t = performance.now();
+    const list = await clip.thumbnails(200, {
+        start: 10e6,
+        end: 20e6,
+        step: 1e6,
+    });
+    const cost = ((performance.now() - t) / 1000).toFixed(2);
+    imgList.value = list.map((it) => {
+        it.img = URL.createObjectURL(it.img)
+        return it
+    })
+    time.value = cost
     console.log('imgList', imgList.value)
     console.log('cost', cost)
 }
 
 </script>
 
-<style lang="css">
-
+<style lang="css" scoped>
+.content{
+    width: 800px;
+    margin: 30px auto;
+}
 .img-list{
     display: flex;
     height: 300px;
@@ -64,5 +92,9 @@ const play = async () => {
     width: 200px;
     height: 200px;
 }
+.flex{
+    display: flex;
+    gap: 12px;
+}
 </style>