React

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 にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

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

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-React