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

2020年4月24日2021年2月9日

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);