Reactでビデオからサムネイル画像を作る方法 | hook とuseRefを使えば実現できます

https://www.youtube.com/watch?v=eSxpzFY1T2s&feature=youtu.be

useRefとcanvasを使うと動画からサムネイルを作ることができます

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  let nameRef2 = useRef();

  const submitButton = () => {
    var canvas = document.getElementById("c");
    canvas.getContext("2d").drawImage(nameRef2.current, 0, 0, 480, 270);
  };

  return (
    <div className="App">
      <video
        ref={nameRef2}
        controls
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
        width="480px"
        height="270px"
      />
      <canvas id="c" width="480px" height="275px" />
      <div>
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codesandbox でも試せるよ

関連

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！