Go初心者でもNext.jsとGoでWebアプリを作りたい！その2

カメラ機能

今回はreact-webcamを使ってカメラを起動させていきます。
詳細は以下のサイトをご覧ください
https://www.npmjs.com/package/react-webcam

1.　react-webcamのインストール

npm install react-webcam @types/react-webcam

2.　page.tsxを変更する

"use client";

import { useRef, useState } from "react";
import Webcam from "react-webcam";
import Image from "next/image";

const videoConstraints = {
  width: 500,
  height: 500,
  facingMode: "user",
};

const Page = () => {
  const webcamRef = useRef<Webcam>(null);
  const [url, setUrl] = useState<string | null>(null);

  const capture = () => {
    const imageSrc = webcamRef.current?.getScreenshot() ?? null;
    setUrl(imageSrc);
  };

  return (
    <div>
      <Webcam
        audio={false}
        width={500}
        height={500}
        ref={webcamRef}
        mirrored={true}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>撮影</button>
      {url && (
        <Image
          src={url}
          width={500}
          height={500}
          alt="description of the image"
        />
      )}
    </div>
  );
};

export default Page;

これで、パソコンのカメラで撮影し、その写真がカメラの下の部分にプレビューとして表示できるようになりました。
(ちなみにこの実装では、facing modeをuserとしているので内カメラになっています。）

3.　http://localhost:3000/ にアクセスし、カメラを起動

上部分がうちカメラになっており、下部分が直前に撮影した写真が表示されるようになっていたら、成功です！

参考サイト