title: How can I convert a stream of ArrayBuffer to a video?
body: <p>I am generating a video stream from my webcam using <code>ffmpeg</code> from my Raspberry Pi, by using the following command:</p>
  <pre><code>ffmpeg -nostats -loglevel level+info -f v4l2 -video_size 640x480 -i /dev/video0 -f mpegts -codec:v mpeg1video -s 640x480 -b:v 500k -bf 0 http://192.168.10.6:3030/stream
  </code></pre>
  <p>My API server receives the stream data and send it through <code>socket.io</code> to my (React) client. I can receive the data on my client, but it's a flux of <code>ArrayBuffer</code>; I'm not sure how to transform this data to display an actual video on canvas. Any idea?</p>
  <p>The API route that handles the stream:</p>
  <pre><code>import logger from '@src/startup/logging'
  import { Router } from 'express'
  import { io } from '@src/index'
  
  const stream = Router()
  
  stream.post('/', (req, res) =&gt; {
    logger.info('received')
  
    req.on('data', (chunk: string) =&gt; {
      logger.info(chunk.length)
      io.sockets.emit('data', chunk)
    })
  
    req.on('end', () =&gt; {
      logger.info('Stream Terminated')
      res.end()
    })
  
    // res.status(200).send('video')
  })
  
  export default stream
  </code></pre>
  <p>The client page that should transform the data in images (doesn't work):</p>
  <pre><code>import { useEffect, useState } from 'react'
  import socketIoClient from './socketIoClient'
  
  export default function App(): JSX.Element {
    const [srcBlob, setSrcBlob] = useState(null)
  
    useEffect(() =&gt; {
      const handleSocketIo = async () =&gt; {
        const socket = await socketIoClient()
  
        socket.on('greeting', (data: string) =&gt; {
          console.log(data)
        })
  
        socket.on('data', (data: ArrayBuffer) =&gt; {
          console.log(data)
          // I just copied this from another example, but it does not display anything
          const arrayBufferView = new Uint8Array(data)
          const blob = new Blob([arrayBufferView], { type: 'image/jpeg' })
          const urlCreator = window.URL || window.webkitURL
          setSrcBlob(urlCreator.createObjectURL(blob))
        })
  
        socket.emit('greeting', 'hello from client')
      }
  
      handleSocketIo()
    }, [])
  
    if (!srcBlob) {
      return &lt;div&gt;Loading...&lt;/div&gt;
    }
  
    return &lt;img src={srcBlob} /&gt;
  }
  </code></pre>
  <p>This is part of the output I get when I use <code>ffmpeg</code>:</p>
  <pre><code>[info] Input #0, video4linux2,v4l2, from '/dev/video0':
  [info]   Duration: N/A, start: 174842.704640, bitrate: 147456 kb/s
  [info]     Stream #0:0: Video: rawvideo (YUY2 / 0x32595559), yuyv422, 640x480, 147456 kb/s, 30 fps, 30 tbr, 1000k tbn, 1000k tbc
  [info] Stream mapping:
  [info]   Stream #0:0 -&gt; #0:0 (rawvideo (native) -&gt; mpeg1video (native))
  [info] Press [q] to stop, [?] for help
  [info] Output #0, mpegts, to 'http://192.168.10.6:3030/stream':
  [info]   Metadata:
  [info]     encoder         : Lavf58.20.100
  [info]     Stream #0:0: Video: mpeg1video, yuv420p, 640x480, q=2-31, 500 kb/s, 30 fps, 90k tbn, 30 tbc
  [info]     Metadata:
  [info]       encoder         : Lavc58.35.100 mpeg1video
  [info]     Side data:
  [info]       cpb: bitrate max/min/avg: 0/0/500000 buffer size: 0 vbv_delay: -1
  </code></pre>
  <p>This is an example of the data received by the client (console.log):</p>
  <p><a href="https://i.stack.imgur.com/3VTFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3VTFi.png" alt="enter image description here" /></a></p>