Recherche avancée

Sur d’autres sites (9346)

• Read S3 video file, process it with ffmpeg and upload to S3

  28 avril 2020, par Dario Rusignuolo

  I have a video stored in s3 bucket with authenticated-read ACL.

  



  I need to read and make a trailer with ffmpeg (nodejs)

  



  Here's the code I use to generate the trailer

  



  exports.generatePreview = (req, res) => {
    const getParams = {
        Bucket: S3_CREDENTIALS.bucketName,
        Key: req.params.key
    }
    s3.getSignedUrl('getObject', getParams, (err, signedRequest) => {
        console.log(signedRequest, err, 'getSignedUrl')
        ffmpeg(new URL(signedRequest))
            .size('640x?')
            .aspect('4:3')
        .seekInput('3:00')
        .duration('0:30')
        .then(function (video) {
            s3.putObject({ Bucket: S3_CREDENTIALS.bucketName, key: 'preview_' + req.body.key, Body: video }, function (err, data) {
                console.log(err, data)
            })
        });
});


  



  }

  



  Unfortunately, the constructor path seems not to read remote url. If I try to execute an ffmpeg command line with the same signedurl (i.e. ffmpeg -i "https://[bucketname].s3.eu-west-1.amazonaws.com/[key.mp4]?[signedParams]" -vn -acodec pcm_s16le -ar 44100 -ac 2 video.wav)

  



  The error I get is that the signedRequest url 'The input file does not exist'

  



  It seems fs.readFileSync https is not supported even if I try the request with http with the same result. fs.readFileSync(signedurl) => gives the same result

  



  How to overcome this issue ?

  


• ffmpeg image watermark on video first half of video on Bottom left and next half of video on Top Right

  23 novembre 2020, par qedsl

  I was playing with this for several hours, I couldn't make so thought of reaching for help, Can you please help me in framing the ffmpeg command to display the watermark Image on the video, For the Initial half video the watermark should be on the bottom left and for the rest half video the watermark shop be on the right top.

  


  Bottom left : ffmpeg -i input.mp4 -i logo.png -filter_complex "overlay=(main_w-overlay_w)/2:(main_h-overlay_h)/2" -codec:a copy output.mp4

  


  Top right :
ffmpeg -i input.mp4 -i logo.png -filter_complex "overlay=main_w-overlay_w-5:5" -codec:a copy output.mp4

  


  Also, I had a look on this for Timeoverlay ffmpeg watermark first 30 second.

  


  How to merge all these and satisfy my requirements as mentioned above ?

  


• Video Seek Scroll (60FPS)

  9 avril 2022, par Enijar

  Trying to achieve an effect of seeking through a video when the page is scrolled. This has been achieved by exporting all frames of the video to JPEG images, pre-loading the images, and rendering them to a canvas. However, this approach uses a lot of bandwidth and takes a long time to load on slow networks.

  


  Trying to achieve the same effect by rendering a video to a canvas does not play as smoothly as the image-based approach.

  


  Here is a working demo with the video-based approach :

  


  https://codesandbox.io/s/infallible-chaum-grvi0r?file=/index.html

  


  Since HTMLMediaElement.fastSeek() doesn't have widespread browser coverage, how can one achieve a realtime playback rate of 30-60 FPS ?

  


  Here is the relevant code for the effect (see CSB link above for the full code) :

  


  const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

(function tick() {
  requestAnimationFrame(tick);

  const { scrollHeight, clientHeight, scrollTop } = document.body;
  const maxScroll = scrollHeight - clientHeight;
  const scrollProgress = scrollTop / maxScroll;

  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;

  // This is the line that causes the issue
  video.currentTime = video.duration * scrollProgress;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
})();