蓋速計測器をリリースしました

蓋速計測器をリリースしました

• ブラウザから蓋速が出せる蓋速計測器

基本的に動画から蓋速を算出する場合はコマ送りできるソフト(aviutlなど)を使ってフレーム数から到達時間を計算しているのですが、aviutlはwindows専用なので、誰でも同じように簡単に速度を算出できる仕組みがあれば便利だと思い、reactから動画を扱えるコンポーネントを使って、コマ送り機能と、リリースの瞬間とキャッチの瞬間の時間を記録すれば誰でも速度を計算できる機能を実装しました。

実装

video-reactはtypescriptの型がないようだったので少し面倒でした。

9.22*3.6/(cTime-rTime)
9.22mを(「キャッチした時間」-「リリースした時間」)の差で割って3.6(秒速から時速への変換)をかけます。

import React, { createRef, useEffect, useState, useMemo } from "react";
import { Player, ControlBar, ForwardControl } from "video-react";

const calcSpeed = () => {
  const playerRef = createRef();
  const [fileURL, setFileURL] = useState(null);
  const [rTime, setRTime] = useState(null);
  const [cTime, setCTime] = useState(null);

  return (
    <>
      <Player
        fluid={false}
        height={400}
        width={'95vw'}
        ref={playerRef}
        autoPlay
        src={fileURL}
      ></Player>
      <input
        onChange={(e) => {
          if (e.target.files.length > 0) {
            const url = URL.createObjectURL(e.target.files[0]);
            setFileURL(url);
          }
        }}
        type="file"
        multiple={false}
        accept=".mp4"
      />
      <button
        onClick={() => {
          const player = playerRef.current.getState();
          playerRef.current.seek(player.player.currentTime + 0.03);
          console.log(player.player.currentTime);
        }}
      >
        +0.03s
      </button>
      <button
        onClick={() => {
          const player = playerRef.current.getState();
          playerRef.current.seek(player.player.currentTime - 0.03);
          console.log(player.player.currentTime);
        }}
      >
        -0.03s
      </button>
      <button
        onClick={()=>{
          const player = playerRef.current.getState();
          setRTime(player.player.currentTime);
        }}
      >リリース</button>
      <button
        onClick={()=>{
          const player = playerRef.current.getState();
          setCTime(player.player.currentTime);
        }}
      >キャッチ</button>
      <br/>リリース:{rTime}
      <br/>キャッチ:{cTime}
      <br/>蓋速:{cTime && rTime && (cTime - rTime > 0) ? (9.22*3.6/(cTime-rTime)).toFixed(2)+'km/h':''}
    </>
  );
};

export default calcSpeed;