How to capture the first frame of a video in react-konva

Question

I made a simple video player using react-konva and I want to display the first frame as a thumbnail before the video is played.

Here's my approach:

I'm using Konva.Image to display the video and Konva.Animation to update the image.

import Konva from "konva";
import React, { useState, useRef, useEffect } from "react";
import { Stage, Layer, Image, Text } from "react-konva";

function VideoPlayer({ width, height }) {
  const video = useRef();
  const image = useRef();
  const anim = useRef();
  const text = useRef();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    anim.current = new Konva.Animation(() => {
      image.current.image(video.current);
    }, image.current.getLayer());
  });

  return (
    <div>
      <button
        onClick={() => {
          text.current.destroy();
          video.current.play();
          anim.current.start();
        }}
      >
        PLAY
      </button>
      <button
        onClick={() => {
          video.current.pause();
          anim.current.stop();
        }}
      >
        PAUSE
      </button>
      <video
        style={{ display: "none" }}
        ref={video}
        onLoadedData={() => {
          setLoading(false);
        }}
        src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"
      />
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text
            ref={text}
            text={loading ? "Loading..." : "Press PLAY..."}
            {...{
              width: window.innerWidth,
              height: window.innerHeight,
              align: "center",
              verticalAlign: "middle"
            }}
          />
          <Image
            x={100}
            y={100}
            ref={image}
            width={width}
            height={height}
            stroke="black"
          />
        </Layer>
      </Stage>
    </div>
  );
}

export default VideoPlayer;

I have created a working demo of my implementation here.

Think I read somewhere that you can play frame 1 in an off-screen canvas, then grab an image of the canvas and put that into your preview holder, then destroy off-screen canvas. — Vanquished Wombat, Nov 06 '20 at 09:52
@VanquishedWombat I guess [this](https://jsfiddle.net/p42867ys/) is what you're suggesting. I'm trying to adapt it to react currently and having some trouble with the implementation — mplusr, Nov 06 '20 at 10:11

score 4 · Accepted Answer · answered Nov 09 '20 at 15:28

You can use a hook to:

create a canvas element for preview image
create a video element
wait for video load
draw the first frame into the canvas
when the video is not played, use preview canvas as source

const usePreview = (url) => {
  const [canvas, setCanvas] = useState(null);

  useEffect(() => {
    const video = document.createElement("video");
    video.src = url;
    const onLoad = () => {
      const canvas = document.createElement("canvas");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      video.currentTime = 1;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(video, 0, 0);
      setCanvas(canvas);
    };
    video.addEventListener("canplay", onLoad);
    return () => video.removeEventListener("load", onLoad);
  }, [url]);

  return canvas;
};

Full demo: https://codesandbox.io/s/react-konva-video-preview-0we9d?file=/src/index.js

Thank you very much. I tried something like [this](https://codesandbox.io/s/spring-glitter-42ke6?file=/src/App.js) and now I know where I went wrong — mplusr, Nov 10 '20 at 05:43
@lavrton Hello, I used your custom hook but here's what's going on when calling a hook to which I give a url Called endlessly and returns the canvas is there any solution? — songhee24, Jan 23 '23 at 06:01

How to capture the first frame of a video in react-konva

1 Answers1