iOS Wakelock w/ captureStream

by juberti

HTML

<input type="button" value="Enable Wakelock">
<canvas id="foo"></canvas>
<video id="bar" playsinline></video>

JavaScript

var button = document.querySelector('input');
var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
var ms = null;
var timer = null;
var frameNum = 0;

paint = () => {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = (frameNum % 2) ? 'white' : 'black';
  ctx.fillRect(0, 0, 320, 240);
  frameNum++;
}

button.onclick = () => {
  if (!video.srcObject) {
    button.value = "Disable Wakelock";
    ms = canvas.captureStream(1);  
    timer = setInterval(paint, 1000);
    video.srcObject = ms;
    video.play();
  } else {
    clearInterval(timer);
    timer = null;
    button.value = "Enable Wakelock";
    ms.getTracks()[0].stop();
    video.stop();
    video.srcObject = ms = null;
  }
}