title: Modern way of displaying RTSP H264 stream in a browser (HTML5)
body: <p>Yes, this topic keeps popping up from time to time also here on SO.</p>
  
  <p>I've read a lot about this topic and also tried some solutions but I have some constraints:</p>
  
  <ol>
  <li>browser-independency (most browsers should work)</li>
  <li>platform-independent (major platforms should be supported)</li>
  <li>work out-of-the-box (no plugins!)</li>
  <li>low latency (preferred under 1 sec)</li>
  <li>bandwidth is limited (MJPEG is not an option)</li>
  <li><strong>no transcode!</strong></li>
  </ol>
  
  <p>So going forward: an H264 stream seems perfect for constraints 1 and 2.</p>
  
  <p>Also my source produce a live H264 (to be exact: <strong>MPEG-4 AVC, part 10</strong>) into an RTSP container.</p>
  
  <p>But RTSP is still not supported in browser.</p>
  
  <p>What I've checked:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/48588485/how-to-embed-streaming-rtsp-media-into-an-html5-page">How to embed streaming rtsp media into an html5 page</a></li>
  <li><a href="https://stackoverflow.com/questions/2245040/how-can-i-display-an-rtsp-video-stream-in-a-web-page">How can I display an RTSP video stream in a web page?</a></li>
  <li><a href="https://stackoverflow.com/questions/42598475/stream-rtsp-to-html-website">stream RTSP to HTML website</a></li>
  <li><a href="https://stackoverflow.com/questions/39643437/displaying-rtsp-on-website">Displaying RTSP on website</a></li>
  <li><a href="https://stackoverflow.com/questions/42598475/stream-rtsp-to-html-website">stream RTSP to HTML website</a></li>
  <li><a href="https://stackoverflow.com/questions/47476862/how-to-get-rtsp-stream-over-web-application">How to get RTSP stream over web application</a></li>
  <li><a href="https://stackoverflow.com/questions/24440265/rtsp-solution-for-javascript-html5">RTSP solution for JavaScript/HTML5</a></li>
  <li><a href="https://stackoverflow.com/questions/1735933/streaming-via-rtsp-or-rtp-in-html5">Streaming via RTSP or RTP in HTML5</a></li>
  </ul>
  
  <p>All the posts above are related to this question, and a lot of valuable information was there.</p>
  
  <p>Also I've read a very <a href="http://sam.cs.lth.se/ExjobGetFile?id=687" rel="noreferrer">good article</a> from 2014 (!) which is detailed and quite forward-looking.</p>
  
  <p><strong>So, as of today, the best solution would be this:</strong></p>
  
  <ol>
  <li>parse the RTSP and extract the h264 stream</li>
  <li>restructure the stream (convert it to fragmented MP4)</li>
  <li>websocket (see later)</li>
  <li>fMP4 can be easily played by HTML5 video if the browser has the <a href="https://en.wikipedia.org/wiki/Media_Source_Extensions" rel="noreferrer">MSE</a> (alternative is to use <a href="https://github.com/mbebenita/Broadway" rel="noreferrer">broadway.js</a> that is cool but CPU intensive)</li>
  </ol>
  
  <p>There are solutions where the step 1 and 2 happens on server side, then the fMP4 is pushed into a websocket. The client consumes the data from websocket and pass it to MSE components for displaying.</p>
  
  <p>The article from 2014 shows that step2 can also happen on client side. In this case only step 1 happens on the server, then h264 is pushed into the websocket, and on the client side there is the restructuring and displaying of course.</p>
  
  <p><a href="https://github.com/Streamedian/html5_rtsp_player" rel="noreferrer">Streamedian</a> seemed a good solution for the first sight, but they doesn't publish their server side codes, and also their site returned with 502 error for a day.</p>
  
  <p><strong>I don't want to use <a href="https://gstreamer.freedesktop.org/" rel="noreferrer">GStreamer</a> or <a href="https://www.ffmpeg.org/" rel="noreferrer">ffmpeg</a></strong>, they are both too heavy.</p>
  
  <p>However there are nice items which can help:</p>
  
  <ul>
  <li><a href="https://gpac.github.io/mp4box.js" rel="noreferrer">MP4Box.js</a> - segment an MP4 file for use with the Media Source Extension API</li>
  <li><a href="https://github.com/videojs/mux.js" rel="noreferrer">mux.js</a> - inspection and manipulation tools for video files</li>
  </ul>
  
  <p>Going back to my list, <strong>step2</strong> can be done with MP4Box - at least I believe / hope.</p>
  
  <p><strong>Step3</strong> and <strong>step4</strong> are straightforward, there are tons of howtos on these ones.</p>
  
  <p>However I'm a bit puzzled with <strong>step1</strong>. It shall be done on server side, preferably in a language which can interact with websockets easily (like java). </p>
  
  <p><strong>That is the point of my question: I need to extract the h264 stream from RTSP in java, how can I do it simple but without calling external programs?</strong></p>