examples/webcam.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Cast</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
<body>
<div class="wsBar">
  <div class="brightness">
    Matrix brightness:
    <small>0%</small>
    <input id="matrix-brightness" type="range" min="0" max="255" step="1" value="127" >
    <small>100%</small>
  </div>

  <h4><a href="https://github.com/owenmcateer/canvas-cast" target="_blank">Canvas Cast</a></h4>
  <div class="status"></div>
  <div class="statusTxt"></div>
  <div class="statusIP"></div>
</div>
<script src="../src/App.js"></script>
<script>
// Config
const matrix = {
  // Matrix IP & port
  ip: '192.168.1.94:81',
  // Matrix pixel size
  width: 15,
  height: 15,
  // Matrix brightness 0-255
  brightness: 127,
  // Context type (2d/webgl)
  type: '2d',
};

// Start WS Matrix
canvasCast.init(matrix);


// Create Canvas
const canvas = document.createElement('canvas');
canvas.width = matrix.width;
canvas.height = matrix.height;
document.body.appendChild(canvas);
context = canvas.getContext('2d');

/**
 * Webcam test
 */
const video = document.createElement('video');
document.body.appendChild(video);
function getVideo() {
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      try {
        video.srcObject = localMediaStream;
      } catch (error) {
        video.src = window.URL.createObjectURL(localMediaStream);
      }
      video.play();
    })
    .catch(err => {
      console.error(`No access to webcam`, err);
    });
}

function paintToCanvas() {
  // Add video
  context.drawImage(video, 0, 0, matrix.width, matrix.height);

  // Cast data
  canvasCast.cast(canvas);
}

// Get video
getVideo();
video.addEventListener('canplay', () => {
  setInterval(paintToCanvas, 1000 / 30);
});
</script>
</body>
</html>