Recherche avancée

Sur d’autres sites (8974)

• how to capture html5 video programmatically (headless)

  25 octobre 2019, par ygk

  I am trying to capture html5 video with js/css effects on it programmatically. I tried a couple of methods ;

  1. First I find this great blog post and implemented it. Everything was perfect till I found that phantomjs is not supporting html5 video tag so can not capture the video.

  2. Second option was to use headless chrome to take continuous screenshots and feed these screenshots into ffmpeg to create the video. Although it worked to some level headless chromes screenshots was taking some time.. I couldn’t create a smooth video..

  3. On my third try I gave a chance to chrome’s Page.startScreencast api. It could get video capture but frame rates was really problematic. The reason is that..

  4. Now I am working on xvfb + chrome/firefox + ffmpeg combination for capturing video as mentioned on that comment. Theoretically it is promising but I couldn’t managed to capture a video. Instead I have black screen..

  My setup is below :

  • light-http server having a simple video (web) within html5 video tag ; on localhost
  • start xvfb with Firefox and navigate to localhost/index.html ( video is there )
    xvfb-run --listen-tcp --server-num 44 --auth-file /tmp/xvfb.auth -s "-ac -screen 0 1440x685x24" firefox --headless http://localhost

  • start ffmpeg with x11grab parameter to grab frames from xvfb

    ffmpeg -f x11grab -video_size 1440x685 -i :44 -codec:v libx264 -r 12 ./output.mp4

  • the result is black video :)

  what should be the problem, how can I debug the problem ?

  ---

  ps : there is one more possible solution which I didn’t tried yet. As phantomjs has capability to capture canvas ; it may be possible to

  • put video into canvas
  • then capture the canvas

  It seems like a dirty workaround that is why not tried yet..

  ---

  UPDATE-1

  Tried to get screenshot with xwd -root -silent -display :44 -out screen.xwdand than convert to jpeg convert screen.xwd shot.jpg the result is black jpg..

• Best way to record a HTML Canvas/WebGL animation server-side into a video ?

  19 novembre 2022, par Abhinav

  I have a set of animations which I can make in Canvas (fabric.js) or WebGL (three.js). I need to record them automatically, server-side, through a script and output a video file.

  



  The animations include :
  

  



  

  1. Pictures
     

  


  2. Videos (with audio)
     

  


  3. Other animations/effects

  


  



  I have researched a lot during last few months on this.

  



  Results
  
1. Use PhantomJS + FFMPEG
  
Run HTML Canvas animations on headless browser(PhantomJS) and record with FFMPEG. Here the issue is PhantomJS supports neither WebGL nor Video element. http://phantomjs.org/supported-web-standards.html

  
2. Use Websockets to send data back to server using DataURL
  
Here again, we will need to run the animations on browser (which we can't because we have to do everything on server).

  
3. Use node-canvas
  
This is a library by TJ Holowaychuk which allows rendering HTML Canvas on Node.js. But it has its own limitations plus I haven't really explored this field much. 
(If someone could shed more light on this library)

  



  If anyone has done it before or can guide me somewhere useful.
  
All we need to do is use some data to create animations and record it into a video, everything on server side.

  


• Haskell - Converting multiple images into a video file - ffmpeg-lights' frameWriter-function fails

  26 octobre 2017, par oRole

  Situation
  Currently I am working on an application for image-processing that uses ffmpeg-light to fetch all the frames of a given video-file so that the program afterwards can apply grayscaling, as well as edge detection alogrithms to each of the frames.

  With the help of friendly stackoverflowers I was able to set up a method capable of converting several images into one video file using ffmpeg-lights’ frameWriter function.

  Problem
  The application runs fine to the moment it hits the frameWriterfunction and I don’t really know why as there are no errors or exception-messages thrown. (OS : Win 10 64bit)

  What did I try ?
  I tried..
  
   different versions of ffmpeg (from 3.2 to 3.4).
  
   ffmpeg.exe using the command line to test if there are any codecs missing, but any conversion I tried worked.
  
   different EncodingParams-combinations : like.. EncodingParams width height fps (Nothing) (Nothing) "medium"
  

  Question
  Unfortunately, none of above worked and the web lacks on information to that specific case. Maybe I missed something essential (like ghc flags or something) or made a bigger mistake within my code. That is why I have to ask you : Do you have any suggestions/advice for me ?

  Haskell Packages
  
   ffmpeg-light-0.12.0
  
   JuicyPixels-3.2.8.3
  

  Code
  

  {--------------------------------------------------------------------------------------------
  
   Applies "juicyToFFmpeg'" and "getFPS" to a list of images and saves the output-video
  
   to a user defined location.
  
  ---------------------------------------------------------------------------------------------}     
  
  saveVideo :: String -> [Image PixelYA8] -> Int -> IO ()
  
  saveVideo path imgs fps = do
  
           -- program stops after hitting next line --
  
           frame <- frameWriter ep path
  
           ------------------------------------------------
  
           Prelude.mapM_ (frame . Just) ffmpegImgs 
  
           frame Nothing
  
           where ep = EncodingParams width height fps (Just avCodecIdMpeg4) (Just avPixFmtGray8a) "medium"
  
                 width      = toCInt $ imageWidth  $ head imgs
  
                 height     = toCInt $ imageHeight $ head imgs
  
                 ffmpegImgs = juicyToFFmpeg' imgs
  
                 toCInt x   = fromIntegral x :: CInt
  
  
  
  {--------------------------------------------------------------------------------------------
  
   Converts a single image from JuicyPixel-format to ffmpeg-light-format. 
  
  ---------------------------------------------------------------------------------------------}      
  
  juicyToFFmpeg :: Image PixelYA8 -> (AVPixelFormat, V2 CInt, Vector CUChar)
  
  juicyToFFmpeg img = (avPixFmtGray8a, V2 (toCInt width) (toCInt height), ffmpegData)
  
                    where toCInt   x   = fromIntegral x :: CInt
  
                          toCUChar x   = fromIntegral x :: CUChar
  
                          width        = imageWidth img
  
                          height       = imageHeight img
  
                          ffmpegData   = VS.map toCUChar (imageData img)
  
  
  
  {--------------------------------------------------------------------------------------------
  
   Converts a list of images from JuicyPixel-format to ffmpeg-light-format. 
  
  ---------------------------------------------------------------------------------------------}                        
  
  juicyToFFmpeg' :: [Image PixelYA8] -> [(AVPixelFormat, V2 CInt, Vector CUChar)]
  
  juicyToFFmpeg' imgs = Prelude.foldr (\i acc -> acc++[juicyToFFmpeg i]) [] imgs
  
  
  
  {--------------------------------------------------------------------------------------------
  
   Simply calculates the FPS for image-to-video conversion.
  
   -> frame :: (Double, DynamicImage) where Double is a timestamp of when it got extracted 
  
  ---------------------------------------------------------------------------------------------}
  
  getFPS :: [(Double, DynamicImage)] -> Int
  
  getFPS frames = div (ceiling $ lastTimestamp - firstTimestamp) frameCount :: Int
  
                where firstTimestamp = fst $ head frames
  
                      lastTimestamp  = fst $ last frames
  
                      frameCount     = length frames