[FFmpeg-user] HTML5 live streaming

Tue May 7 17:06:41 CEST 2013

Ricardo, this complete working example may help:

The html5 page can be served by apache, lighttpd and probably more. It needs the file extensions set, but lighttpd and apache have this by default. The required HTML 5 page ("html5.html") in its simplest form is :

<!DOCTYPE html>
<html>
<head>
    <title>Live Cam</title>
</head>

<body>
    <div id="player">
        <video autoplay="true" controls="controls" width="640" height="480">
            <source src="http://YourIPAdress/live/mystream.m3u8" type="application/x-mpegURL" />
            Your browser does not support HTML5 streaming!
        </video>
    </div>
</body>
</html>

Just put it in the root folder of your website (/var/www/ in my case) and make a subsequent subdirectory (live), writeable by ffmpeg,  where the hls segments and index file can be written)

The command for starting ffmpeg, live streaming a webcam in the format that can be displayed by an ipad 1below is essentially derived from the x264 encoding guide, the hls settings from extensive googeling.

ffmpeg -v verbose -f video4linux2 -vcodec mjpeg -s 640x480 -r 10 -i /dev/video0 -c:v libx264 -crf 18 -profile:v baseline -maxrate 400k -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_wrap 6 /var/www/live/mystream.m3u8 

Point your ios device to http://YourIPAdress/html5.html after 30 seconds for the first two .ts files and the index file to be created.

Cheers