Recherche avancée

Sur d’autres sites (3909)

• Revision 7059 : On ne tient pas compte de modifier l’objet pour gérer les signalements ...

  3 novembre 2012, par kent1 — Log

  On ne tient pas compte de modifier l’objet pour gérer les signalements car ce n’est pas à l’auteur de les gérer, juste les admins du site
  $fluxargs ?quoi ? sur le pipeline des destinataires et pas $fluxquoi ?
  Un peu de phpdoc

• How to record an HTML animation and save it as a video, in an automated manner in the backend

  14 mai 2022, par frizurd

  I need to record a webpage and save it as a video, in an automated manner, without human interaction.

  


  I am creating a NodeJS app that generates MP4 videos on the request of the user. The user provides an MP3 file, the app generates animated waveforms for the sound file on top of an illustration.

  


  What I came up with so far is a system that opens a generated web page in the backend, plays the audio file, and shows audio visualization for the audio file on an HTML canvas element. On top of another canvas with mainly static components, such as images, that do not animate. The system records this, the output will be a video file. Finally, I will merge the video file with the sound file to create the final file for the user.

  


  I came up with 2 possible solutions but both of them have problems which I am not able to solve at the moment.

  


  ---

  


  Solution #1

  


  Use a headless browser API such as Phantomjs or Puppeteer to snatch a screenshot x time every second and pipe it to FFmpeg.

  


  The problem

  


  The problem with this is that the process is not realtime. It would work fine if it's JUST an animation but mine is dependant on the audio file. The audio file will play-on during the render which results in a glitchy 1FPS-esque video.

  


  Possible solution ?

  


  Don't play the audio file live but convert the audio file into raw data. Animate the audio visualization based on the raw data instead.
Not sure how to do this and if it's even possible.

  


  ---

  


  Solution #2

  


  Play, record, and save the animation, all in the frontend.
Could use ccapture.js to record and save a canvas.
Use a headless browser to open the page and save it to disk when it's done playing.
Doesn't sound like it's the best solution.

  


  The problem(s)

  


  I have more than 1 canvas.
It takes a while, especially when the audio file is longer than 10 minutes.
Making users wait for a long time can be a deal-breaker.

  


  Possible solution ?

  


  Merge canvases into one.

  


  No idea how to speed up the rendering time and I doubt it's possible this way.

  


• Animation with createjs and tweenjs not working

  29 novembre 2018, par user9964622

  I have simple animation in my app using createjs and tween js get started and ffmpeg server as backend.

  But unfortunately my code is not working shows the blank page without animation on it not only that but also there is no error whatsoever.

  Here is what I have done so far
  test.js

  (function() {
  
      "use strict";
  
  
  
      var framesPerSecond = 60;
  
      var numFrames = 20; //framesPerSecond * 60 * 2;
  
      var thickness = 100;
  
      var speed = 4;
  
      var frameNum = 0;
  
  
  
      var canvas = document.getElementById("demoCanvas");
  
      var ctx = canvas.getContext("2d");
  
      canvas.width = 1280;
  
      canvas.height = 720;
  
  
  
      var progressElem = document.getElementById("progress");
  
      var progressNode = document.createTextNode("");
  
      progressElem.appendChild(progressNode);
  
  
  
      function onProgress(progress) {
  
        progressNode.nodeValue = (progress * 100).toFixed(1) + "%";
  
      }
  
  
  
      function showVideoLink(url, size) {
  
        size = size ? (" [size: " + (size / 1024 / 1024).toFixed(1) + "meg]") : " [unknown size]";
  
        var a = document.createElement("a");
  
        a.href = url;
  
        var filename = url;
  
        var slashNdx = filename.lastIndexOf("/");
  
        if (slashNdx >= 0) {
  
          filename = filename.substr(slashNdx + 1);
  
        }
  
        a.download = filename;
  
        a.appendChild(document.createTextNode(url + size));
  
        document.body.appendChild(a);
  
      }
  
  
  
      var capturer = new CCapture( {
  
        format: 'ffmpegserver',
  
        //workersPath: "3rdparty/",
  
        //format: 'gif',
  
        verbose: false,
  
        framerate: framesPerSecond,
  
        onProgress: onProgress,
  
        //extension: ".mp4",
  
        //codec: "libx264",
  
      } );
  
      capturer.start();
  
  
  
      var stage = new createjs.Stage("demoCanvas");
  
          var circle = new createjs.Shape();
  
          circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
  
          circle.x = 100;
  
          circle.y = 100;
  
          stage.addChild(circle);
  
          createjs.Tween.get(circle, {loop: true})
  
            .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
  
            .to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
  
            .to({alpha: 0, y: 125}, 100)
  
            .to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
  
            .to({x: 100}, 800, createjs.Ease.getPowInOut(2));
  
          createjs.Ticker.setFPS(60);
  
          createjs.Ticker.addEventListener("tick", stage);
  
    }());

  here is test.html

    
  
  
  
  
  
      
  
      
  
  
  
  
  
  
  
      <canvas width="300" height="300">
  
          alternate content
  
      </canvas>
  
      <div>-</div>
  
  
  
  <code class="echappe-js">&lt;script src=&quot;http://localhost:8081/ffmpegserver/CCapture.js&quot;&gt;&lt;/script&gt;
    
  &lt;script src=&quot;http://localhost:8081/ffmpegserver/ffmpegserver.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src=&quot;https://code.createjs.com/easeljs-0.8.2.min.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src=&quot;https://code.createjs.com/1.0.0/createjs.min.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src='http://stackoverflow.com/feeds/tag/test.js'&gt;&lt;/script&gt;
  
  

  I am using nodejs as backend, so when I run the app, displays only a frame without animation on it,

  Unfortunately, no error whatsoever.is displayed on the console,

  What am I doing wrong in my code ?? any help will be apreciated