I am trying to capture html5 video with js/css effects on it programmatically. I tried a couple of methods;
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.
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..
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..
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..
If you don't need the "live video output" I would suggest capturing video frame by frame. Here is the speech about some existing application https://vimeo.com/342829825
Otherwise, if life stream is required, you may go with the way that obs-linuxbrowser is doing. So cef + ffmpeg.
Related
On a website we have developed, we are using react player and have come across a strange issue.
Videos which are 4K quality at 50 Frames a second do not play on Chrome on Desktop/Laptop or mobiles. The videos do play on Chromium edge and Safari, albeit do take a while to buffer.
We have tried to use alternates to react player, but are not able to find a solution here, the issue is clearly something that Chrome is not liking but obviously we cannot ask all our clients to make individual changes to their browsers.
The only error we see on the Laravel backend is ERR_CACHE_OPERATION_NOT_SUPPORTED, but not sure if this is related.
Has anyone got any ideas and any possible solution?
Thanks
Jit
Thanks to the comment by VC.One, a solution to this is identify the codec type using some Javascript like this example code, then run a conversion using free tool ffmpeg to h.264, parameters we used to convert was:
-i <input_video> -vcodec libx264 -preset slow -crf 22 -movflags +faststart <output_video>
There is no apparent drop off in quality to the naked eye, so this solution works for until Chrome will support h.265
I am using Savedeo APIs to get to youtube audio files and trying to play the audio on a browser.
When I try to play an audio only file (.m4a) on regular browser, everything works fine. But, when I test it on a mobile browser on my iphone (safari and chrome), the audio file's duration is doubled. Basically after the end of the audio, there is a padding added.
Why is this happening? Is there any work around for this. If you need more info, will be happy to provide.
Thanks
I ran into this issue with a MP3 with a sample rate of 44100 Hz and a 128kb bitrate. The solution is to change the sample rate with ffmpeg:
ffmpeg -i your.mp3 -ar 22050 your_fixed.mp3
You can retrieve critical information about an MP3 by using ffprobe:
ffprobe your.mp3
iTunes also reports the wrong duration when calculating the duration with the actual MP3 file. That's embarrassing since you would expect iTunes to get something like that correct. This indicates a bug exists in some library that Apple uses for MP3 duration calculations.
Hello :)
I need to be able to display any popular video format (MKV, FLV, MP4,...) inside a browser WHILE converting. To do this I've turned to FFMPEG to convert any video to .ovg and spent hours on Google, forums and in documentation but I can't find a way to play the converted video real-time.
Does anyone know how you can play a video in HTML while FFMPEG is still converting it?
You can't use a single format, especially if you want your videos played on iOS. HLS is a good compromise but you'll need a player on desktop browsers. You can find HTML5/Media Source Extension (MSE) solutions like hls.js
With ffmpeg you can generate a HLS EVENT playlist which is something like a combination of live and VOD: media segments are appended to the playlist as they get converted and when the input ends it remains available as VOD. It can be served via HTTP with any web server.
ffmpeg -i <input> [...] -f hls -hls_playlist_type event /path/to/html/dir/playlist.m3u8
ffmpeg supports multiple outputs and you can convert the video to other formats at the same time if you want:
ffmpeg -i <input> [...] -f hls -hls_playlist_type event /path/to/html/dir/playlist.m3u8 \
[...] -f <format2> <output2>
Im wondering why my mp4 html5 video is not "streaming" and instead waits till it is fully downloaded before it starts playing in safari.
www.pija.se
I have tried QTIndexSwapper but it says the index is in the right position.
Any help appreciated.
looks like the MOOV atom isn't at the beginning of the file.
I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner
./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4
(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)
FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case
HTML5 video takes quite awhile to begin playing from Chrome/Safari (latest and Chrome Canary). It appears that the entire video file needs to download before playback begins.
In Firefox 18.0.2 (HTML5) and IE 8,9,10 (Flash), the playback is almost instant.
In Chrome, I've seen the issue while using:
chrome native player
VideoJS http://videojs.com/
MediaElementJS http://mediaelementjs.com/
I find that even opening a local mp4 (h264) file in Chrome takes quite awhile to load: the developer network tools show that the video is loading/pending which takes 10-15 seconds on a large file.
For reference, here is a video:
http://mediaelementjs.com/
The full video file (5MB) is downloaded before playback begins. Not so bad with this small video, but quite a pain with a large file.
I have two questions:
Does Webkit support progressive download/playback?
If not, is there a known workaround?
Thanks
As Foaster said, the metadata block needs to be early in the video so that the video doesn't have to load up to it (which may entail loading in the entire video if it's placed at the end).
But you don't need some black-box .exe file from a product website to move the metadata block. Here's how to do it with just good old ffmpeg:
ffmpeg \
-i input.mp4 \
-codec copy \
-movflags faststart \
-f mp4 output.mp4
This will:
-i input.mp4: Take input.mp4 as input.
-codec copy: Copy the stream as-is (with no encode/decode step).
-movflags faststart: Move the metadata block to the start.
-f mp4 output.mp4: Format as an MP4 file and output with the name output.mp4.
Link to full ffmpeg documentation here. Installation instructions for various platforms here (a simple brew install ffmpeg is sufficient for Mac users).
The problem is neither the codec nor the browser...
The problem is the meta-block in your video-file!
Most browsers can only play the video when they have downloaded the metadata. Some encoding-tools put this meta-block at the end of the output-file, thus the browser has to load the whole file to "see" the metadata.
Solution:
http://rndware.info/products/metadata-mover.html (dead site) → Archived copy here
Get this little tool, open your video and let the MetaData Mover do its magic.
Doesn't take that long and your file is ready to stream!