feat: canvas_to_mp4

src/view/canvasToMp4/mp4Util.ts

@@ -36,16 +36,16 @@ class CountdownClip implements IClip {
     }> {
       if (time > 1e6 * 10) return { state: 'done' };
 
-      console.log(canvasEl.currentTime)
-      console.log(canvasEl.width)
-      console.log(canvasEl.height)
+      // console.log(canvasEl.currentTime)
+      // console.log(canvasEl.width)
+      // console.log(canvasEl.height)
       this.#ctx.drawImage(canvasEl, 0, 0);
-      const c = document.createElement('canvas')
-      c.width = 720
-      c.height = 1280
-      const cc = c.getContext('2d')
-      cc?.drawImage(canvasEl, 0,0)
-      document.body.append(c)
+      // const c = document.createElement('canvas')
+      // c.width = 720
+      // c.height = 1280
+      // const cc = c.getContext('2d')
+      // cc?.drawImage(canvasEl, 0,0)
+      // document.body.append(c)
       // console.log('data', this.#ctx.getImageData(0, 0, WIDTH, HEIGHT))
     //   this.#ctx.fillStyle = '#333';
     //   this.#ctx.fillRect(0, 0, this.#cvsEl.width, this.#cvsEl.height);
@@ -58,7 +58,7 @@ class CountdownClip implements IClip {
     //     this.#cvsEl.width / 2 - 100,
     //     this.#cvsEl.height / 2,
     //   );
-
+      console.log('time', time)
       return {
         state: 'success',
         video: new VideoFrame(this.#cvsEl, {

src/view/canvas_to_mp4.vue

@@ -3,7 +3,7 @@
 <div class="content">
     <h2>canvas 导出为视频</h2>      
     <div class="video-list">
-      <canvas id="webgl"></canvas>
+      <canvas ref="canvasRef" id="webgl"></canvas>
       <video
         class="videoCon"
         v-if="videoSrc"
@@ -34,6 +34,7 @@ let gl:any = null
 let video: HTMLVideoElement
 
 const videoSrc = ref(null)
+const canvasRef = ref(null)
 
 const vertexShaderSource = `
     attribute vec2 a_Position;
@@ -105,21 +106,32 @@ const play = () => {
   state.value = 1;
   let startTime = performance.now();
   video.play();
+  const c = document.createElement('canvas')
+  c.width = 360
+  c.height = 640
   const start = () => {
-        requestAnimationFrame(() => {
-            if(state.value) {
-                let time = performance.now()
-                currentTime.value = (time - startTime) / 1000
-                if(currentTime.value < 1 ) {
-                    const progress = gl.getUniformLocation(gl.program, 'progress');
-                    // console.log(currentTime.value)
-                    let rate = currentTime.value
-                    let p = rate > 1 ? 1 : rate
-                    gl.uniform1f(progress, p);
+    requestAnimationFrame(() => {
+        if(state.value) {
+            let time = performance.now()
+            currentTime.value = (time - startTime) / 1000
+            if(currentTime.value < 1 ) {
+                const progress = gl.getUniformLocation(gl.program, 'progress');
+                let rate = currentTime.value
+                let p = rate > 1 ? 1 : rate
+                gl.uniform1f(progress, p);
+
+                const cc = c.getContext('2d')
+                if(canvasRef.value) {
+                  cc?.drawImage(canvasRef.value, 0, 0,)
+                  const url = c.toDataURL('image/png')
+                  const img = document.createElement('img')
+                  img.src = url
+                  document.body.append(img)
                 }
-                start()
-                render()
             }
+            start()
+            render()
+        }
     })
    }
    start()
@@ -132,27 +144,26 @@ const pause = () => {
 const build = async (com) => {
   const timeStart = performance.now();
   const srcBlob = await new Response(com?.output()).blob();
-  console.log(URL.createObjectURL(srcBlob))
   const url = URL.createObjectURL(srcBlob)
   videoSrc.value = url
   console.log(`合成耗时: ${Math.round(performance.now() - timeStart)}ms`);
 }
 const generate = async () => {
-  let el = document.createElement('canvas')
-  el.width = 720
-  el.height = 1280
+  // let el = document.createElement('canvas')
+  // el.width = 360
+  // el.height = 640
   // const ctx = el.getContext('2d')
+  play()
   const dom = document.getElementById('webgl')
   // const dataUrl = dom?.toDataURL('image/png')
   // const img = document.createElement('img')
   // img.src = dataUrl
   // // document.append(el)
   // document.body.append(img)
-    const spr = new OffscreenSprite(new CountdownClip(dom, 5));
-    const com = new Combinator({ width: 720, height: 1280 });
-    await com.addSprite(spr, { main: true });
-    play()
-    await build(com)
+  const spr = new OffscreenSprite(new CountdownClip(dom, 10));
+  const com = new Combinator({ width: 360, height: 640 });
+  await com.addSprite(spr, { main: true });
+  await build(com)
 }
 
 onMounted(() => {

src/view/clip.vue

@@ -17,6 +17,7 @@ import { ref, onMounted } from 'vue';
 import { MP4Clip } from '@webav/av-cliper';
 
 
+// /video/test1.mp4 // 这个视频的色彩空间是， bt2020 使用截帧出出现偏亮或者偏暗的问题
 const videos = {
     'output': '/video/output.mp4'
 }

src/view/crop.vue

@@ -119,7 +119,7 @@ onMounted(() => {
    gl.uniform1i(u_Sampler, 0);
    /* 建立video对象 */
    video = document.createElement('video')
-   video.src = '/video/output.mp4';
+   video.src = '/video/test1.mp4';
    video.autoplay = false;
    video.loop = false;
    video.setAttribute("crossOrigin", 'Anonymous');

src/view/index.vue

@@ -27,15 +27,27 @@
             <a-button type="primary" @click="toUrl('canvasToVideo')">canvas 导出为视频</a-button>
             <a-button type="primary" @click="toUrl('canvasToMp4')">canvas导出为视频1</a-button>
         </div>
+
+        <video ref="videoRef" class="v" src="https://mogic-creative.oss-cn-hangzhou.aliyuncs.com/algorithm_qn/process/20241014/1040g00g318j0t73hjk004a5e4kih2s3nm3jst6g_mute.mp4" controls/>
+        <canvas width="360" height="720"  ref="canvasRef" />
+
+        <a-button @click="start">绘制</a-button>
       </div>
    </div>
 </template>
 <script type="ts" setup>
+import { ref } from 'vue'
 import { router } from '../router';
 
+const canvasRef = ref(null)
+const videoRef = ref(null)
 const toUrl = (name) => {
     router.push({ name })
 }
+const start = () => {
+    const ctx = canvasRef.value.getContext('2d')
+    ctx.drawImage(videoRef.value, 0, 0, 360, 720)
+}
 </script>
 <style lang="css" scoped>
 .container{
@@ -50,4 +62,8 @@ const toUrl = (name) => {
     display: flex;
     gap: 8px;
 }
+.v{
+    width: 360px;
+    height: 720px;
+}
 </style>