Recherche avancée

Sur d’autres sites (4853)

• How to render animated content in backend using nodejs ?

  29 novembre 2018, par user9964622

  I have created animation using tweenjs and createjs libraries createjs and tweenjs, now, I’d like to convert these animations to video files (MPEG4, or other, doesn’t matter) or how can I render it in the backend using nodejs ?

  I have animation looking like this : Animated

  Here is solution I have tried so far using nodejs and ffmpeg module

  var express = require('express');
  
  var cors = require('cors')
  
  var path = require('path');
  
  var app = express();
  
  var ffmpeg = require('ffmpeg');
  
  //Cors Middleware
  
  app.use(cors());
  
  // Body Parser Middleware
  
  app.use(bodyParser.json())
  
  // Port Number
  
  const port = process.env.PORT || 8000;
  
  //video processing
  
  
  
  try {
  
      var process = new ffmpeg('/path/to/your_movie.mp4');
  
      process.then(function (video) {
  
  
  
          video
  
          .setVideoSize('640x?', true, true, '#fff')
  
          .audioCodec('libmp3lame')
  
          .videoCodec('libx264')
  
          .setAudioCodec('libfaac')
  
          .setAudioChannels(2)
  
          .save('/path/to/save/your_movie.mp4', function (error, file) {
  
              if (!error)
  
                  console.log('Video file: ' + file);
  
          });
  
  
  
      }, function (err) {
  
          console.log('Error: ' + err);
  
      });
  
  } catch (e) {
  
      console.log(e.code);
  
  
  
  
  
  
  
  app.use('/video', video);
  
  app.get('/', (req, res) => {
  
    res.send('invaild endpoint');
  
  });
  
  
  
  app.get('*', (req, res) => {
  
    res.sendFile(path.join(__dirname + '/video-client/dist/video-client/index.html'));
  
  });
  
  
  
  // Start Server
  
  app.listen(port, () => {
  
    console.log('Server started on port '+port);
  
  });

  Here is tutorial of what I want to achieve but its written in js and PHP , I want the same but in nodejs html canvas animations to video

  I am new to nodejs and backend stuff in general, unfortunately, my solution does not work so far, and I am stuck. I need help

  Is this the right way to create video from animation if not what is the best way ? ,

  please help, any suggestion or tutorials will be appreciated, thanks

• Seek function of HTML5 video and Maximum Keyframe Interval in video encoding compression

  20 décembre 2019, par Sanxofon

  This is a very specific question about how the seek function (of an HTML5 video element) interprets a video, in this case one in WEBM format and what specific relationship it has with the Maximum Keyframe Interval in the process of coding of said video.

  I’ve made this fiddle to show what I mean :

  https://jsfiddle.net/sanxofon/hctuxo3e/

  What it does : The idea is to control the position of a paused video with the scroll wheel of the mouse ... in addition, each frame of the video is copied to a canvas element, but I think that has no relation. I mention it just in case.

  What to watch : In Chrome (v66) and slightly less in Firefox (v59) the scrolling looks pretty good when the video is encoded with a Maximum Keyframe Interval of 6 or less, but jumps are appreciated when the interval is every 24 frames or more. This is noticeable in the video and even more on the canvas.

  FFMPEG : When encoding a video with FFMPEG this is achieved with the option -g6 or -g24 of Maximum Keyframe Interval. However, the file becomes heavier as we decrease the interval. It can be seen that there is no difference between both formats when the video is in play.

  You can switch the video in the snippet with the buttons.

  • Case 1 : When we use the video encoded with -g 6 the video scrolling is acceptable but the size increases : 6.229 Mb.

  FFMPEG string used :

   ffmpeg -i INPUT.MOV -c: v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b: v 100K -g 6 test / video_g6.webm

  • Case 2 : When we use the video encoded with -g 24 the displacement is not smooth and suffers from jumps but the size decreases : 4,477 Mb.

  FFMPEG string used :

   ffmpeg -i INPUT.MOV -c: v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b: v 100K -g 24 test / video_g24.webm

  Why does this happen ?

  What about -keyint_min or -force_key_frames ? Do they have any positive effect ? Is it better to use something like cgop (closed gop) ?

  I would appreciate some reference of consultation on this subject or a more or less detailed explanation of this relationship for both the WEBM container and for MP4 and OGG video.

  I am not looking so much for a magical ffmpeg chain (although I would appreciate it) but rather an explanation of how this relationship between the keyframes and the seek of a javascript video works.

  Thank you very much for reading here.

  P.S. One more thing, if the seek function only stops in a keyframe, is it possible that this frame has more quality than the others so that the quality increases when the video stops ?

• I need to take a live video stream from wowza and convert it to a JPEG Push for display in HTML5

  10 septembre 2015, par scott m gardner

  I have a live video feed that currently is served by a Wowza server as an RMTP stream. I need to create an Motion JPEG, or JPEG push stream to HTML5. I have FFMpeg, and have used it to generate individual frames from a video file, but do not know how to put it all together. Or how to package the frames together for transmission to the client.

  I am guessing that I will have to do some coding on the server side to package everything up. I will do this in Java or Scala. And on the client to handle the un packaging and display to the canvas in JavaScript.