Sur d’autres sites (7657)

• Animation rendering using Nodejs on backend server side

  17 février 2019, par user9964622

  I have simple 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.

  Here is repo : video rendering demo.

  on folder public, I have demos eg test3.html and test3.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();
  
  }
  
  
  
  
  
    [1]: https://github.com/throne1986/video-rendering

  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.

• RTSP stream to ffmpeg problems

  14 octobre 2022, par maeek

  I'm writing a web application for managing and viewing streams from ONVIF ip-cameras.
  
It's written in nodejs. The idea is to run a child process in node and pipe output to node, then send the buffer to client and render it on canvas. I have a working solution for sending data to client and rendering it on canvas using websockets but it only works on one of my cameras.

  


  I own 2 IP cameras and both of them have rtsp server.
  
One of them(let's name it camX) kind of works with this ffmpeg command (sometimes it just stops, maybe due to packet losses) :

  


  ffmpeg -rtsp_transport tcp -re -i  -f mjpeg pipe:1


  


  But the other one(camY) returns Nonmatching transport in server reply and exits.

  


  I discovered that the camY transport is unicast but ffmpeg doesn't support this particular lower_transport as I read on ffmpeg forum.

  


  So I started looking for a solution. My first idea was to use openRTSP which works fine with both streams.
I looked at the documentation and came up with this command :
  
openRTSP -4 -c  | ffmpeg -re -i pipe:0 -f mjpeg pipe:1
  
-4 parameter returns stream to pipe in mp4 format
  
And here's another problem I ran into, ffmpeg returns :

  


  [mov,mp4,m4a,3gp,3g2,mj2 @ 0x559a4b6ba900] moov atom not found  
pipe:0: Invalid data found when processing input


  


  Is there any way to make this work ?
I tried various solutions I found, but none of them worked.

  


  EDIT

  


  As @Gyan suggested I used -i parameter instead of -4 but it didn't solve my problem.

  


  My command :

  


  openRTSP -V -i -c -K  | ffmpeg -loglevel debug -re -i pipe:0 -f mjpeg pipe:1
  
Created receiver for "video/H264" subsession (client ports 49072-49073)
Setup "video/H264" subsession (client ports 49072-49073)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
AVIFileSink::setWord(): SeekFile64 failed (err 29)
Outputting to the file: "stdout"
[avi @ 0x5612944268c0] Format avi probed with size=2048 and score=100
[avi @ 0x56129442f7a0] use odml:1
Started playing session
Receiving streamed data (signal with "kill -HUP 15028" or "kill -USR1 15028" to terminate)...
^C
[AVIOContext @ 0x56129442f640] Statistics: 16904 bytes read, 0 seeks
pipe:0: Invalid data found when processing input


  


  As you can see openRTSP command return err 29 but in meantime it outputs some data to pipe.
  
When I terminate the command ffmpeg shows that it read some data but couldn't process it.

  


  Here's the function that produces that error :

  


  void AVIFileSink::setWord(unsigned filePosn, unsigned size) {
  do {
    if (SeekFile64(fOutFid, filePosn, SEEK_SET) < 0) break;
    addWord(size);
    if (SeekFile64(fOutFid, 0, SEEK_END) < 0) break; // go back to where we were

    return;
  } while (0);

  // One of the SeekFile64()s failed, probable because we're not a seekable file
  envir() << "AVIFileSink::setWord(): SeekFile64 failed (err "
          << envir().getErrno() << ")\n";
}


  


  In my opinion it looks like it won't be able to seek file because it's a stream not a static file.
  
Any suggestion for a workaround ?

  


• Overwriting destination file in PowerShell

  2 mai 2019, par user10204157

  I am running the following script

  ffmpeg -i $Args[0] -vcodec copy -acodec copy -movflags +faststart $Args[1]

  Which essentially is overwriting the original file, how can I force this to override so my powershell script doesn’t error out ?

  File ’./cache/videos/1556749678654.mp4’ already exists. Overwrite ? [y/N] Not overwriting - exiting

  Edit
  I am executing this script as follows within node.js

   var spawn = require("child_process").spawn,
  
          child;
  
  
  
        response.data.pipe(file);
  
  
  
        child = spawn("powershell.exe", [
  
          "./script.ps1",
  
          `./cache/videos/${tempFileName + "."}${videoType}`,
  
          ` ./cache/converted_videos/${tempFileName + "."}${videoType}`
  
        ]);