Async WebRTC screensharing localStorage

by jib1

HTML

<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
<button id="capture">Capture screen!</button><br>
<video id="video" width="400" height="300" autoplay></video>
<canvas id="canvas" width="400" height="300"></canvas>
<div id="div"></div>

JavaScript

const ctx = canvas.getContext('2d');

capture.onclick = async () => {
  video.srcObject = await navigator.mediaDevices.getDisplayMedia();
  await new Promise(r => video.onloadedmetadata = r);
  requestAnimationFrame(function draw() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const {data} = canvas.getContext('2d').getImageData(0, 0,400, 300);
    localStorage.data = data;
    requestAnimationFrame(draw);
  });
};

const data = localStorage.data;
if (data) {
  const arr = Uint8ClampedArray.from(data.split(","));
  const imagedata = new ImageData(arr, 400, 300);
  ctx.putImageData(imagedata, 0, 0);
}