Recherche avancée

Sur d’autres sites (12893)

• Inconsistent crop and overflay ffmpeg result with drawImage canvas

  21 juin 2022, par yuno saga

  i try to encode the video block frame to specific pattern order, then in front-end it decode back to normal. I test it in back-end by decode back with same function, it back to normal. but in front-end with canvas the order of block not in right position. if you look into front-end function. it have same pattern. i try to check output from for generate, it equal to for in backend overlay builder command.
  
whats wrong with this ?

  


  ffmpeg config

  


  const { spawn } = require('child_process');

function hflip(width) {
    const sizeBlock = 16;
    let filterCommands = '';
    const length = Math.floor(width / sizeBlock);

    for (let i=0; i < length; i++) { 
        filterCommands += `[0]crop=${sizeBlock}:480:${(i*sizeBlock)}:0[c${i}];`;
    }
    
    for (let i=0; i < length; i++) {
        if (i == 0) filterCommands += '[0]';
        if (i != 0) filterCommands += `[o${i}]`;
    
        filterCommands += `[c${i}]overlay=x=${(width - sizeBlock)-(i*sizeBlock)}:y=0`;
    
        if (i != (length - 1)) filterCommands += `[o${i+1}];`;
    }

    return filterCommands;
}

const crops = spawn('ffmpeg', [
    '-i',
    'C:/Software Development/project/blackpink.mp4',
    '-filter_complex',
    hflip(854),
    '-c:a',
    'copy',
    '-c:v',
    'libx264',
    '-crf',
    '30',
    '-preset',
    'ultrafast',
    '-pix_fmt',
    'yuv420p',
    'C:/Software Development/project/hflip.mp4',
    '-y'
], {
    cwd: 'C:/Software Development/ffmpeg'
})


  


  front-end

  


  


  


  &#xA;&#xA;    &#xA;    &#xA;        <button>play</button>&#xA;        <code class="echappe-js">&lt;script&gt;&amp;#xA;            const canvas = document.createElement(&amp;#x27;canvas&amp;#x27;);&amp;#xA;            document.body.appendChild(canvas)&amp;#xA;            const context = canvas.getContext(&amp;#x27;2d&amp;#x27;);&amp;#xA;            const video = document.createElement(&amp;#x27;video&amp;#x27;);&amp;#xA;            video.src = &amp;#x27;https://drive.google.com/uc?export=download&amp;amp;id=1Z0aFg_N3kP0SUO_xOFB0UBjTRH6_mSmb&amp;amp;confirm=t&amp;#x27;&amp;#xA;&amp;#xA;&amp;#xA;            function hflip(video) {&amp;#xA;                const widthBlock = 16;&amp;#xA;                const heightBlock = 480;&amp;#xA;                const length = Math.floor(video.videoWidth / widthBlock);&amp;#xA;&amp;#xA;                for (let i=0; i &lt; length; i&amp;#x2B;&amp;#x2B;) {&amp;#xA;                    console.log({&amp;#xA;                        cX: (i*widthBlock),&amp;#xA;                        oX: (video.videoWidth - widthBlock) - (i*widthBlock)&amp;#xA;                    });&amp;#xA;&amp;#xA;                    context.drawImage(video, (i*widthBlock), 0, widthBlock, heightBlock,  (video.videoWidth - widthBlock) - (i*widthBlock), 0, widthBlock, heightBlock)&amp;#xA;                }&amp;#xA;            }&amp;#xA;&amp;#xA;            video.onloadedmetadata = () =&gt; {&amp;#xA;                context.canvas.width = video.videoWidth;&amp;#xA;                context.canvas.height = video.videoHeight;&amp;#xA;            }&amp;#xA;&amp;#xA;            video.onplay = () =&gt; {&amp;#xA;                const updateCanvas = () =&gt; {&amp;#xA;                    hflip(video);            &amp;#xA;&amp;#xA;                    video.requestVideoFrameCallback(updateCanvas);&amp;#xA;                }&amp;#xA;&amp;#xA;                updateCanvas();&amp;#xA;            }&amp;#xA;&amp;#xA;            function play() { video.play() }&amp;#xA;        &lt;/script&gt;&#xA;    &#xA;

  


  


  



• Resources for learning Metal for Video Editing [on hold]

  28 septembre 2019, par Andrew Sawyer

  I am trying to build a video editing system in Swift for my iOS app. I assume that Metal would be the best system for this as it is extremely powerful. I am unsure where to start learning about Metal because most resources are related to game development.

  In V1 of my app I have used AVFoundation and an AVMutableComposition. However, in this version I need something more complex where I am able to do more effects, layering, etc.

  Is Metal the best way to do this or would another method (FFMpeg, Open GL, etc.) be better ?
  If so, what are the best resources to learn how to use Metal for this application ?

  Thank You !

• HTML5 multi-track audio or video

  2 juin 2012, par silvia

  In the last months, we’ve been working hard at the WHATWG and W3C to spec out new HTML markup and a JavaScript interface for dealing with audio or video content that has more than just one audio and video track. This is particularly relevant when a Web page author wants to add a sign language (...)