{"id":394,"date":"2016-03-13T04:27:45","date_gmt":"2016-03-13T02:27:45","guid":{"rendered":"http:\/\/log.or.cz\/?p=394"},"modified":"2016-03-13T04:28:59","modified_gmt":"2016-03-13T02:28:59","slug":"live-streaming-to-html5","status":"publish","type":"post","link":"https:\/\/log.or.cz\/?p=394","title":{"rendered":"Live Streaming to HTML5?"},"content":{"rendered":"<p>We have our <a href=\"http:\/\/log.or.cz\/?p=309\">mice TV<\/a> now streaming our colony of mus minutoides at the canonical URL <code>http:\/\/mice.or.cz\/<\/code> but it would be nice if you could watch them in your web browser (without flash) instead of having to open a media player for the purpose.<\/p>\n<p>I gave that some serious prodding.  We still use vlc with the same config as in the original post (mp4v codec + mpegts container).  Our video source is an IP cam producing mp4v via rtsp and an important constraint is CPU usage as it runs on my many-purpose server (current setup consumes 10% of one CPU core).  We&#8217;d like things to work in Debian&#8217;s chromium and iceweasel, primarily.<\/p>\n<p>It seems that in the HTML5 world, you have these basic options:<\/p>\n<ul>\n<li> <b>MP4\/H264 in MP4<\/b> &#8211; this *does not work* with live streaming because you need to make sure the browser receives a correct header with metadata which normally occurs only at the top of the file; it might work with some horrible custom code hacks but nothing off-the-shelf\n<li> <b>VP80\/VP90 in webm<\/b> &#8211; this works, but encoding consumes between 150%-250% CPU! even with low bitrates; this may be okay for dedicated streaming servers but completely out of the question for me\n<li> <b>Theora in Ogg<\/b> &#8211; this almost works, but the stream stutters every few seconds (or slips into endless buffering), making it pretty hard to watch; apparently some keyframes are lost and Theora homepage gives a caveat that Ogg encoding is broken in VLC; the CPU usage is about 30%, which would have been acceptable\n<\/ul>\n<p>That&#8217;s it for the stock video tag formats, apparently.  There are two more alternatives:<\/p>\n<ul>\n<li> HTTP Live Stream <b>(HLS)<\/b> has no native support in browsers outside of mobile, might work with a hack like https:\/\/github.com\/RReverser\/mpegts but you may as well use MSE then\n<li> Media Source Extensions <b>(MSE)<\/b> seem to allow basically implementing decoding custom containers (in javascript) for any codecs, which sounds hopeful if we&#8217;d just like to pass mp4v (or h264) through. The most popular such container is DASH, which seems to be all about fragmenting video to smaller HTTP requests with per-fragment bitrate negotiation, but still completely codec agnostic.  Re Firefox, needs almost latest version.  Media players support DASH too.\n<\/ul>\n<p>So far, the best looking courses seem to be:<\/p>\n<ul>\n<li> Media server <a href=\"https:\/\/github.com\/arut\/nginx-rtmp-module\">nginx-rtmp-module<\/a> (in my case with pull directive towards the ipcam&#8217;s rtsp) with mpeg-dash output and dash.js based webpage.  I might have misunderstood something but it might actually just work (assuming that the bitrate negotiation could always end up just choosing the ipcam&#8217;s fixed bitrate; something very low is completely sufficient anyway).\n<li> Debug libogg + libtheora to find out why it produces corrupted streams &#8211; have fun!\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We have our mice TV now streaming our colony of mus minutoides at the canonical URL http:\/\/mice.or.cz\/ but it would be nice if you could watch them in your web browser (without flash) instead of having to open a media player for the purpose. I gave that some serious prodding. We still use vlc with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[159,21,116,28],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-linux","category-software","tag-html5","tag-mouse","tag-video","tag-vlc"],"_links":{"self":[{"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/log.or.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=394"}],"version-history":[{"count":2,"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/log.or.cz\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/log.or.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/log.or.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/log.or.cz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}