HTML5 <audio>/<video> and live transcoding with FFMPEG
So from my web server, I would like to use FFMPEG to transcode a media file for use with an HTML <audio> or <video> tag. Easy enough right?
The conversion would need to take place in real-time, when an HTTP client requested the converted file. Ideally the file would be streamed back to the HTTP client as it is being transcoded (and not afterwards at the end, since that would potentially take a while before any data starts being sent back).
This would be fine, except that in today's browsers, an HTML5 audio or video tag requests the media file in multiple HTTP requests with the Range header. See this question for details.
In that question linked above, you can see that Safari requests weird chunks of the file, including the ending few bytes. This poses a problem in that the web server WOULD have to wait for the conversion to finish, in order to deliver the final bytes of the file to conform to the Range request.
So my question is, is my train of thought right? Is there a better way to deliver transcoding content to an <audio> or <video> tag that wouldn't involve waiting for the entire conversion to finish? Thanks in advance!
Answer
I recently run into the same issue since I want to serve my library to browsers. Surprisingly, the idea to send the stream through ffmpeg and deliver on the fly works quite well. The primary problem was to support seeking...
Following, you find code sniplets in Python using Flask to solve the problem:
We need a function to stream the content:
@app.route('/media/<path:path>.ogv')
def media_content_ogv(path):
d= os.path.abspath( os.path.join( config.media_folder, path ) )
if not os.path.isfile( d ): abort(404)
start= request.args.get("start") or 0
def generate():
cmdline= list()
cmdline.append( config.ffmpeg )
cmdline.append( "-i" )
cmdline.append( d );
cmdline.append( "-ss" )
cmdline.append( str(start) );
cmdline.extend( config.ffmpeg_args )
print cmdline
FNULL = open(os.devnull, 'w')
proc= subprocess.Popen( cmdline, stdout=subprocess.PIPE, stderr=FNULL )
try:
f= proc.stdout
byte = f.read(512)
while byte:
yield byte
byte = f.read(512)
finally:
proc.kill()
return Response(response=generate(),status=200,mimetype='video/ogg',headers={'Access-Control-Allow-Origin': '*', "Content-Type":"video/ogg","Content-Disposition":"inline","Content-Transfer-Enconding":"binary"})
Then we need a function to return the duration:
@app.route('/media/<path:path>.js')
def media_content_js(path):
d= os.path.abspath( os.path.join( config.media_folder, path ) )
if not os.path.isfile( d ): abort(404)
cmdline= list()
cmdline.append( config.ffmpeg )
cmdline.append( "-i" )
cmdline.append( d );
duration= -1
FNULL = open(os.devnull, 'w')
proc= subprocess.Popen( cmdline, stderr=subprocess.PIPE, stdout=FNULL )
try:
for line in iter(proc.stderr.readline,''):
line= line.rstrip()
#Duration: 00:00:45.13, start: 0.000000, bitrate: 302 kb/s
m = re.search('Duration: (..):(..):(..)\...', line)
if m is not None: duration= int(m.group(1)) * 3600 + int(m.group(2)) * 60 + int(m.group(3)) + 1
finally:
proc.kill()
return jsonify(duration=duration)
And finally, we hack that into HTML5 using videojs:
<!DOCTYPE html>
<html>
<head>
<link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.5/video.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
</video>
<script>
var video= videojs('video');
video.src("media/testavi.avi.ogv");
// hack duration
video.duration= function() { return video.theDuration; };
video.start= 0;
video.oldCurrentTime= video.currentTime;
video.currentTime= function(time)
{
if( time == undefined )
{
return video.oldCurrentTime() + video.start;
}
console.log(time)
video.start= time;
video.oldCurrentTime(0);
video.src("media/testavi.avi.ogv?start=" + time);
video.play();
return this;
};
$.getJSON( "media/testavi.avi.js", function( data )
{
video.theDuration= data.duration;
});
</script>
</body>
A working example can be found at https://github.com/derolf/transcoder .
dero