title: Decoding H.264 video from h264_v4l2m2m on Raspberry Pi 4
body: <h2>Problem Summary</h2>
  <p>I am trying to live-stream video from my Raspberry Pi 4 using the <code>h264_v4l2m2m</code> codec (HWA). At the receiving end, I am using the <a href="https://github.com/vuquangtrong/pi_streaming" rel="nofollow noreferrer">Broadway</a> decoder. For lower resolutions (320x320 @ 60fps) the decoded video quality is fine. However, when I increase the resolution I start to notice a strange tessellation effect as in the following captures:</p>
  <p><a href="https://i.stack.imgur.com/wWD2w.png" rel="nofollow noreferrer">Tessellation effect on higher resolution (960x960)</a></p>
  <p>I tried other codecs and players (mpeg1video and <a href="https://github.com/phoboslab/jsmpeg" rel="nofollow noreferrer">jsmpeg</a> as a decoder), but at higher resolutions only the hardware accelerated H.264 reaches an acceptable frame rate. For my particular application I do not need audio.</p>
  <h2>Things tried</h2>
  <p>I am running the following command to launch <code>ffmpeg</code> on a separate process:</p>
  <pre><code>ffmpeg -hide_banner -fflags nobuffer -f rawvideo -pixel_format yuv420p -s 960x960  \
  -i tcp://127.0.0.1:15000?listen=1 -f h264 -codec:v h264_v4l2m2m -s 960x960 -profile:v 66 \
  -level 4.2 -coder 0 -bf 0 -an -b:v 4M tcp://0.0.0.0:15001?listen=1
  </code></pre>
  <p>I then send the H.264 NAL Units using a WebSocket.</p>
  <p>The following snippet is my adjusted example application for decoding the received frames.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset='utf-8'&gt;
    &lt;title&gt;PiCamera H264 Streaming&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;PiCamera H264 Streaming&lt;/h1&gt;
    &lt;div id='viewer'&gt;&lt;/div&gt;
    &lt;script src='Decoder.js'&gt;&lt;/script&gt;
    &lt;script src='YUVCanvas.js'&gt;&lt;/script&gt;
    &lt;script src='Player.js'&gt;&lt;/script&gt;
    &lt;script&gt;
      // player
      window.player = new Player({ useWorker: true, webgl: false })
      var playerElement = document.getElementById('viewer')
      playerElement.appendChild(window.player.canvas)
      // Websocket
      var wsUri = window.location.protocol.replace(/http/, 'ws') + '//' + window.location.hostname + ':20000'
      var ws = new WebSocket(wsUri)
      ws.binaryType = 'arraybuffer'
      ws.onopen = function (e) {
        console.log('Client connected')
        ws.onmessage = function (msg) {
          // decode stream
          let data = new Uint8Array(msg.data);
          console.log(data);
          window.player.decode(data);
        }
      }
      ws.onclose = function (e) {
        console.log('Client disconnected')
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <h2>Question</h2>
  <p>What am I missing? Is it some option on ffmpeg, or could it be, that the decoder is not able to fully process the received frames. I have tried multiple bitrate settings to no avail.</p>