ホーム 技術ログ

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

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

 

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="http://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 でも試せるよ

 

Pocket
LinkedIn にシェア

-ホーム, 技術ログ
-, , , , , , ,

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.