How to display video on Canvas

To draw a video on a canvas we can use <video> DOM element similar to <img> element, but we have to frequently redraw the layer. For the purpose we can use Konva.Animation. As alternative you can use requestAnimationFrame and just call layer.draw().

Also take a look into this post for additional information: https://lavrton.com/case-study-video-editor-for-stream/

Instructions: click “play” button. You can drag&drop the image.

Konva Video Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva GIF Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <button id="play">Play</button><button id="pause">Pause</button>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var video = document.createElement('video');
      video.src =
        'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm';

      var image = new Konva.Image({
        image: video,
        draggable: true,
        x: 50,
        y: 20,
      });
      layer.add(image);

      var text = new Konva.Text({
        text: 'Loading video...',
        width: stage.width(),
        height: stage.height(),
        align: 'center',
        verticalAlign: 'middle',
      });
      layer.add(text);

      var anim = new Konva.Animation(function () {
        // do nothing, animation just need to update the layer
      }, layer);

      // update Konva.Image size when meta is loaded
      video.addEventListener('loadedmetadata', function (e) {
        text.text('Press PLAY...');
        image.width(video.videoWidth);
        image.height(video.videoHeight);
      });

      document.getElementById('play').addEventListener('click', function () {
        text.destroy();
        video.play();
        anim.start();
      });
      document.getElementById('pause').addEventListener('click', function () {
        video.pause();
        anim.stop();
      });
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.