草野球のライブ配信を補助するツールを作った話

Nextjs canvas

草野球放送局

https://baseball-broadcast.vercel.app/

仕組み

「ツイキャスゲームズ」などのスクリーン配信に対応したサービスで、
スマホの画面を直接ストリーミング配信できることを利用して、
スマホ側でカメラを起動して画面を合成したらいいじゃないかという発想に。
react-webcamというライブラリ(canvasで描画している)とNextJSを組み合わせました。

使い方

使った技術

NextJS

最低でもQA画面と設定画面、合成画面が必要になると思っていたので、
NextJSを選択しました。

Vercel

デプロイ用のプラットフォーム

react-webcam

苦労したこと

カメラのデバッグ

セキュリティ的にカメラの起動条件がlocalhostか、https通信下だったので、最初はvercelに上げながら動作確認していましたが、途中からcodesandboxを使っていました。

iPhone/Chromeではカメラが起動しないとか。

スマホの向きを変えたときの描画

縦横の向きを変えたときにリサイズする処理を色々試したのですが、

addEventListener('resize')
再描画回避のためにuseRefを使う
縦横のサイズを入れ替える

どれも結局上手くいかず、stackoverflowなどを見ながら最終的にたどり着いたのはCSSでの表示制御でした。えぇぇぇぇぇ.....。

UI詰め過ぎ問題

スコアボードのUIを詰め過ぎてタップしづらいという問題が発生。
transform: scale(1.3)でコンポーネントごと1.3倍にして逃げました。
秘伝のたれを思いついた瞬間

import Webcam from "react-webcam";
import NHKBoard from "./NHKBoard";

const Home = () => {
  const videoConstraints = {
    facingMode: { exact: "environment" },
    aspectRatio: 1.78
  };
  return (
    <div
      style={{
        width:'95vw',
        height:'95vh',
        position:'relative'
      }}
    >
      <Webcam
        style={{
          position:'absolute',
          top:0,
          left:0,
          width:'95vw',
          height:'95vh',
        }}
        videoConstraints={videoConstraints}
      />
      <div
        style={{
          transform:'scale(1.3)',
          position:'absolute',
          bottom:0,
          right:0
        }}
      >
      <NHKBoard/>
      </div>
    </div>
      )
}
export default Home;