Sur d’autres sites (4789)

• How to convert a javascript animation to video on the server-side using nodejs ?

  13 mai 2019, par user9964622

  I have a app where a user can create animations , I want to be able to convert these animations to video on server side, so user can save and share them eg YouTube, etc

  Here is what I have so far , animation created using create js and ffmpegserver.js.

  ffmpegserver.js.

  This is a simple node server and library that sends canvas frames to the server and uses FFmpeg to compress the video. It can be used standalone or with CCapture.js

  Test3.html

      
  
  
  
  
  
  
  
  <code class="echappe-js">&lt;body onload=&quot;init();&quot;&gt;
  
          
  Simple Tween Demo
      
  
  
  
  
  &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/1.0.0/createjs.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.js&quot;&gt;&lt;/script&gt;
  
  &lt;script src='http://stackoverflow.com/feeds/tag/test3.js'&gt;&lt;/script&gt;
  
  

  Test3.js

  /* eslint-disable eol-last */
  
  /* eslint-disable no-undef */
  
  /* eslint-disable quotes */
  
  var canvas, stage;
  
      function init() {
  
          var framesPerSecond = 60;
  
          var numFrames = framesPerSecond * 5; // a 5 second 60fps video
  
          var frameNum = 0;
  
  
  
          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("Download"));
  
            var container = document.getElementById("container").insertBefore(a, progressElem);
  
  
  
          }
  
  
  
          var capturer = new CCapture( {
  
            format: 'ffmpegserver',
  
            //workersPath: "3rdparty/",
  
            //format: 'gif',
  
            //verbose: true,
  
            framerate: framesPerSecond,
  
            onProgress: onProgress,
  
            //extension: ".mp4",
  
            //codec: "libx264",
  
          } );
  
          capturer.start();
  
  
  
  
  
          canvas = document.getElementById("testCanvas");
  
          stage = new createjs.Stage(canvas);
  
          var ball = new createjs.Shape();
  
          ball.graphics.setStrokeStyle(5, 'round', 'round');
  
          // eslint-disable-next-line quotes
  
          ball.graphics.beginStroke('#000000');
  
          ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
  
          ball.graphics.setStrokeStyle(1, 'round', 'round');
  
          ball.graphics.beginStroke('#000000');
  
          ball.graphics.moveTo(0, 0);
  
          ball.graphics.lineTo(0, 50);
  
          ball.graphics.endStroke();
  
          ball.x = 200;
  
          ball.y = -50;
  
          createjs.Tween.get(ball, {loop: -1})
  
              .to({x: ball.x, y: canvas.height - 55, rotation: -360}, 1500, createjs.Ease.bounceOut)
  
              .wait(1000)
  
              .to({x: canvas.width - 55, rotation: 360}, 2500, createjs.Ease.bounceOut)
  
              .wait(1000)
  
              .to({scaleX: 2, scaleY: 2}, 2500, createjs.Ease.quadOut)
  
              .wait(1000)
  
          stage.addChild(ball);
  
          createjs.Ticker.addEventListener("tick", stage);
  
  
  
  
  
          function render() {
  
              requestAnimationFrame(render);
  
              capturer.capture( canvas );
  
  
  
              ++frameNum;
  
              if (frameNum < numFrames) {
  
              progressNode.nodeValue = "rendered frame# " + frameNum + " of " + numFrames;
  
              } else if (frameNum === numFrames) {
  
              capturer.stop();
  
              capturer.save(showVideoLink);
  
              }
  
          }
  
  
  
          render();
  
  }

  Everything works fine, you can test it yourself if you want by cloning the repo.

  Right now animation rendering happens in client side, I would like this animation rendering to happen in the backend side

  What do I need to change to make this animation rendering in backend server side using Nodejs ? any help or suggestions will be appreciated.

• Handling an arbitrary number of start and stop time pairings to cut a movie file down

  9 juin 2019, par Kieran

  I am writing a function that takes a list of tuples and a file path string as arguments and outputs a cut down video that only includes the frames that fall inside the start/stop pairings provided.

  I’m getting stuck because I am not sure whether the .trim() method of the ’infile’ object is altering the existing object or or creating a new one or doing something else entirely.

  the list of start/stop frame pairings can be arbitrarily long, every example I have found has been for a specific number of start and stop pairings and I can’t find anything describing what data structure needs to be passed back to ffmpeg.concat().

  My code is displayed below :

  import ffmpeg
  
  
  
  frameStamps = [(50,75),(120,700),(1250,1500)]
  
  videoFilePath = 'C:/Users/Kieran/Videos/testMovie.mp4'
  
  outputFolder = 'C:/Users/Kieran/Videos/'
  
  
  
  def slice_video(frameStamps, videoFilePath, outputFolder):
  
  
  
      originalFile = ffmpeg.input(videoFilePath)
  
  
  
      for stamp in frameStamps:
  
          ffmpeg.concat(originalFile.trim(start_frame=stamp[0], end_frame=stamp[1]))
  
  
  
  
  
      ffmpeg.output(outputFolder + 'testoutput.mp4')
  
      ffmpeg.run() 
  
  
  
  slice_video(frameStamps, videoFilePath, outputFolder)

  Now I am able to get the following when I individually print out originalFile.trim() which are getting recognised in the console as "FilterableStream" objects

  trim(end_frame=75, start_frame=50)[None] <29b4fb0736ec>
  
  trim(end_frame=700, start_frame=120)[None] <c66c4e1a48f5>
  
  trim(end_frame=1500, start_frame=1250)[None] &lt;13e0697a5288>  
  
  </c66c4e1a48f5>

  and I have tried passing them back as a list, dictionary and tuple and haven’t been able to get it working

  Output Errors :

    File "C:/Users/Kieran/Example.py", line 21, in slice_video
  
  ffmpeg.output(outputFolder + 'testoutput.mp4')
  
  
  
    File "C:\ProgramData\Anaconda3\lib\site-packages\ffmpeg\_ffmpeg.py", line 94, in output
  
  return OutputNode(streams, output.__name__, kwargs=kwargs).stream()
  
  
  
    File "C:\ProgramData\Anaconda3\lib\site-packages\ffmpeg\nodes.py", line 282, in __init__
  
  kwargs=kwargs
  
  
  
    File "C:\ProgramData\Anaconda3\lib\site-packages\ffmpeg\nodes.py", line 170, in __init__
  
  self.__check_input_len(stream_map, min_inputs, max_inputs)
  
  
  
    File "C:\ProgramData\Anaconda3\lib\site-packages\ffmpeg\nodes.py", line 149, in __check_input_len
  
  raise ValueError('Expected at least {} input stream(s); got {}'.format(min_inputs, len(stream_map)))
  
  
  
  ValueError: Expected at least 1 input stream(s); got 0

• How to change reference frame value ?

  31 mai 2019, par Sasidharan S

  Hi I am trying to change reference frames from 4 to 3 but it didn’t work.

  Have tried to change gop, b frames with reference frames but didn’t work

  ffmpeg8 -report -ss 00:00:00.000 -t 00:04:47.000 -i /input1 -ss 00:04:47.001 -t 00:04:00.000 -i /input2 -filter_complex "[0:v:0]crop=out_h=576:y=32,yadif=1:-1:0[part1crop]; [1:v:0]crop=out_h=576:y=32,yadif=1:-1:0[part2crop]; [0:a:0]pan=stereo|c0=c0|c1=c1[part1audioStereo]; [1:a:0]pan=stereo|c0=c0|c1=c1[part2audioStereo]; [part1crop][part1audioStereo][part2crop][part2audioStereo]concat=n=2:v=1:a=1[vconcat][aconcat]" -map '[vconcat]' -codec:v libx264 -profile:v high -level 4.1 -coder 1 -pix_fmt yuv420p -g 50 -bf 3 -b:v 1500k -video_track_timescale 25 -r 25 -s:v 1024x768 -aspect 4:3 -x264opts keyint=50:ref=4:bframes=3:subq=6:trellis=2:8x8dct=1:b-pyramid=0:vbv-bufsize=1500:nal-hrd=cbr -map '[aconcat]' -codec:a libfdk_aac -ar 48000 -ac 2 -b:a 128K -write_tmcd off output.mp4

  result :

  Video
  ID : 226 (0xE2)
  Format : AVC
  Format/Info : Advanced Video Codec
  Format profile : High@L4.1
  Format settings : 4 Ref Frames
  Format settings, CABAC : No
  Format settings, RefFrames : 4 frames
  Duration : 35 s 80 ms
  Nominal bit rate : 15.0 Mb/s
  Width : 1 024 pixels
  Height : 576 pixels
  Display aspect ratio : 16:9
  Frame rate mode : Variable
  Color space : YUV
  Chroma subsampling : 4:2:0
  Bit depth : 8 bits
  Scan type : Progressive
  Writing library : x264 core 148