HTML5 Game - Video Video Manipulation

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Description

Video Manipulation

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <body>
    <video autoplay controls>
       <source src='http://java2s.com/style/demo/your.ogv' type='video/ogg;'>
       <source src='http://java2s.com/style/demo/your.mp4' type='video/mp4'>
       <source src='http://java2s.com/style/demo/your.webm' type='video/webm'>
    </video>
    <canvas>Your browser does not support Canvas.</canvas>
    <script>
// Pollyfill for RequestAnimationFrame
(function() {//  w ww.  j av a  2 s .  com
  let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
  let canvasEle = document.querySelector('canvas');
  let canvasCtx = canvasEle.getContext('2d');

  let videoEle = document.querySelector('video');
  let w = videoEle.clientWidth;
  let h = videoEle.clientHeight;

  canvasEle.width = w;
  canvasEle.height = h;

  drawInvertedFrame();

  function drawInvertedFrame()  {
    canvasCtx.drawImage(videoEle, 0, 0, w, h);
    let manip = canvasCtx.getImageData(0, 0, w, h);
    let data = manip.data;

    // Iterate through each pixel, inverting it
    for (let i = 0; i < data.length; i += 4) {
      let r = data[i],
        g = data[i+1],
        b = data[i+2];
      data[i] = 255 - r;
      data[i+1] = 255 - g;
      data[i+2] = 255 - b;
    }

    canvasCtx.putImageData(manip, 0, 0);

    requestAnimationFrame(drawInvertedFrame);
  }
})();      
      </script>
  </body>
</html>

Related Topic