title: canvas to ffmpeg - invalid data error
body: <p>I'm curently trying to pipe some raw data directly into ffmpeg. The data comes from a canvas. What I do is the following:</p>
  
  <pre><code>var imageData = ctx.getImageData(0,0,600,600);
  var dataArray = imageData.data;
  var rgbArray = [];
  for (var i = 0; i &lt; dataArray.length; i+=4) {
      rgbArray.push([dataArray[i], dataArray[i+1], dataArray[i+2]])
  }
  
  var rgb24Array = rgbArray.map(function(rgbList){
      return (rgbList[0] &lt;&lt; 16) | (rgbList[1] &lt;&lt; 8) | (rgbList[2])
  });
  </code></pre>
  
  <p>The ffmpegArgs are set like this:</p>
  
  <pre><code>var ffmpegArgs = [
      '-c:v', 'rawvideo' // input container
      '-f', 'rawvideo',
      '-pix_fmt', 'rgb24', // input pixel format
      '-s', '600x600' //input size
      '-i', 'pipe:0', // input source
      '-format', 'mp4', // output container format
      '-c:v', 'libx264', // output video codec
      '-b:v', '2m', // output bitrate
      'udp://239.255.123.46:1234' // output destination
  ];
  </code></pre>
  
  <p>So basically, the imageData I get from the canvas has 4 elements for each pixel (rgba), I first filter out the rgb values and then pack them to send them to ffmpeg, I directly pipe them in like <code>ffmpeg.stdin.write(rgb24Array)</code>.</p>
  
  <p>But I get a <code>TypeError: invalid data</code> and I'm not sure why... I also tried to leave data as it is and use <code>rgba</code> as <code>pix_fmt</code>, but same error.</p>
  
  <p>The stacktrace of the error is:</p>
  
  <pre><code>TypeError: invalid data
     at Socket.write (net.js:617:11)
     at null._repeat (....line with ffmpeg.stdin.write() in it)
     at wrapper [as_onTimeout] (timers.js:275:11)
     at Timer.listonTimeout (timers.js:92:15)
  </code></pre>
  
  <p>Does anybody have a idea where the problem could be?</p>
  
  <p><strong>Edit:</strong>
  changed some things, first, I now use a Uint8Array:</p>
  
  <pre><code>var imageData = ctx.getImageData(0,0,600,600);
              var srcArray = imageData.data;
              var dstArray = new Uint8Array(imageData.width * imageData.height * 3);
              for(var i = 0, p = 0; i &lt; srcArray.length; i++) { // i++ skips alpha
                dstArray[p++] = srcArray[i++];                   // red comp. and incr.
                dstArray[p++] = srcArray[i++];                   // green comp. and incr.
                dstArray[p++] = srcArray[i++];                   // blue comp. and incr.
              }
  
              ffmpeg.stdin.write(dstArray);
  </code></pre>
  
  <p>Also added <code>-video_size</code> parameter to the ffmpegArgs. But still it's not working and I get the same errors.</p>