
Reactでビデオからサムネイル画像を作る方法 | hook とuseRefを使えば実現できます
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 でも試せるよ