title: Display RTSP live stream in the web browser using java and Web Socket
body: <p>I want to write a java program that decodes an RTSP live stream, coming from an Ip camera and sends it to an HTML5 web client over web Sockets.
  I can do that when it comes to a simple mp4 file on my pc. My code looks like this: </p>
  
  <p>JAVA</p>
  
  <pre><code>@ServerEndpoint("/echo")
  public class EchoEndPoint {
  
  @OnMessage
  public byte[] echo(String message) {
      File file = new File("/home/maher/devTools/video/testVideo.mp4");
      byte[] data = new byte[(int) file.length()];
      DataInputStream stream = null;
      try {
          stream = new DataInputStream(new FileInputStream(file));
      } catch (FileNotFoundException e1) {
          // TODO Auto-generated catch block
          e1.printStackTrace();
      }
      if (stream != null) {
          try {
              stream.readFully(data);
          } catch (IOException e) {
              // TODO Auto-generated catch block
              e.printStackTrace();
          }
          try {
              stream.close();
          } catch (IOException e) {
              // TODO Auto-generated catch block
              e.printStackTrace();
          }
      }
      return data;
      }
    }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test streaming over WebSockets&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
      var wsUri = "ws://localhost:7070/serverWs/echo";
      function init() {
          websocket = new WebSocket(wsUri);
          websocket.onmessage = function (evt) {
              readFile(evt.data);
          };
      }
      function readFile(fileData) {
          var video = document.getElementById('area');
          video.src = window.URL.createObjectURL(fileData);
      }
      function createObjectURL(file) {
          if (window.webkitURL) {
              return window.webkitURL.createObjectURL(file);
          } else if (window.URL &amp;&amp; window.URL.createObjectURL) {
              return window.URL.createObjectURL(file);
          } else {
              return null;
          }
      }
      function startVideo() {
          var message = "startVideo";
          websocket.send(message);
      }
      window.addEventListener("load", init, false);
  &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;h2 style="text-align: center;"&gt;Client WebSocket Echo&lt;/h2&gt;
  &lt;div style="text-align: center;"&gt;
  &lt;input onclick="startVideo()" value="Start video" type="button"&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;video id='area' controls="controls" autoplay&gt;&lt;/video&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But when it comes to a live RTSP streaming URL, I cannot find a way to decode the stream and send it over WS then display that stream in my web page.</p>