Сохранить данные изображения холста в JavaScript

Question

Я пытаюсь захватить изображение с веб-камеры на холст и хотел бы сохранить эти данные изображения в виде массива пикселей. Как я могу сохранить его, пожалуйста?

Вот так я рисую картинку с веб-камеры в контексте:

context = canvas.getcontext('2d');
captureButton.addEventListerner('click', ()=> {
context.drawImage(player, 0, 0, canvas.width. canvas.height);}

игрок определен в html как <video id='player' controls autoplay></video>

С наилучшими пожеланиями

Answer 1

Это то, что я уже сделал в своей библиотеке jsia , поэтому я расширю это для вас здесь:

Это не работает на Stack Exchange из-за безопасности ограничения, но вы можете увидеть это работает на https://mellen.github.io/jsiaExamples/barcodeReader

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var vid = document.getElementById('vid');

function setupVideoCallback(videoElement, callbackCapture, callbackError, timeBetweenFrames)
{
  var localMediaStream = null;

  navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia );

  var um = navigator.mediaDevices.getUserMedia({video: true}).then(handleVid).catch(vidErr);
		
  if(!um)
  {
    um = navigator.getUserMedia({video: true}, handleVid, vidErr);
  }

  function handleVid(stream)
  {
    videoElement.srcObject = stream;
    localMediaStream = stream;
  }
		
  function vidErr(e)
  {
    callbackError(e)
  }

  function capture()
  {
    if(localMediaStream)
    {
      callbackCapture();
    }
  }

  setInterval(capture, timeBetweenFrames);
}

function drawVideoOnCanvas()
{
	 canvas.width = vid.clientWidth;
	 canvas.height = vid.clientHeight;
	     
	 ctx.drawImage(vid, 0, 0);
}

setupVideoCallback(vid, drawVideoOnCanvas, e => console.log(e), 10);

<canvas id="canvas"></canvas>
<video autoplay style="visibility:hidden" id="vid"></video>