title: Decode and display an h264 stream in browser from websocket
body: <p>I am trying to display the stream from a live rtp camera in a browser but I am having problems with that.
  The signal have to be lossless so that's why I am using a ffmpeg pipe (H264 which can be lossless), streamed to a node script which serve the signal via websocket to the javascript client.
  This is the pipe:</p>
  <pre><code>ffmpeg -i rtsp://ipofthertsp -f rawvideo -b 800k -r 30 -framerate 10 -c:v libx264 -preset ultrafast -crf 0 http://127.0.0.1:8081/supersecret/
  </code></pre>
  <p>The flow is as follows:</p>
  <p>rtp -&gt; ffmpeg -&gt; (<a href="http://127.0.0.1:8081" rel="nofollow noreferrer">http://127.0.0.1:8081</a>) http-To-ws (ws://127.0.0.1:8082) &lt;- (ws) JavascriptClient</p>
  <p>The bytes gets to the client but I don´t know how to handle it.</p>
  <pre><code>    function opened() { 
     
          // set up the websocket
          var url = 'ws://127.0.0.1:8082';
          ws = new WebSocket(url);
          ws.binaryType = &quot;arraybuffer&quot;;
          ws.onmessage = function (event) {
  
          var view   = new Uint8Array(event.data);
          console.log('data \r\n', event.data);
  
              /* what to do from here to paint it*/
          };
      }
  </code></pre>
  <p>And then, I'd like to paint it either in canvas, video... whatever.</p>
  <p>Any clue???</p>