PWAでカメラ機能を実装したいです。

実現したいこと

PWAでカメラ機能を実装したいです。
ご助言いただけたら幸いです。よろしくお願いいたします。

前提

nextjsでreact-webcamとnext-pwaを導入してアプリを開発しています。
stack overflowでも同一の質問がありましたが、まだ未回答の状況になっています。

発生している問題・エラーメッセージ

React-Webcam を使用したカメラビューのレンダリングはiPhoneのブラウザでは機能するのに、pwa としてダウンロードした後は機能しないです。

該当のソースコード

jsx
1const videoConstraints = {
2  width: 1280,
3  height: 720,
4  facingMode: "user"
5};
6
7const WebcamCapture = () => {
8  const webcamRef = React.useRef(null);
9  const capture = React.useCallback(
10    () => {
11      const imageSrc = webcamRef.current.getScreenshot();
12    },
13    [webcamRef]
14  );
15  return (
16    <>
17      <Webcam
18        audio={false}
19        height={720}
20        ref={webcamRef}
21        screenshotFormat="image/jpeg"
22        width={1280}
23        videoConstraints={videoConstraints}
24      />
25      <button onClick={capture}>Capture photo</button>
26    </>
27  );
28};```

試したこと

service workerのキャッシュが原因かと思い、next-pwaのオプション変更やsw.jsを書き換えてみたましたが、自分の知識不足もあるせいかうまく機能しませんでした。

補足情報（FW/ツールのバージョンなど）

httpsではないとカメラ機能は使えないため、ngrokを使って開発検証を行なっています。

行動規範の内容に同意します

回答1件

この回答はGPT-4による自動生成回答です

PWAでカメラ機能を実装する際には、getUserMedia APIを使用してカメラへのアクセスを許可する必要があります。また、PWAではHTTPS接続が必須です。

以下のコードは、getUserMedia APIを使用してカメラにアクセスし、ビデオストリームを表示する例です。

jsx
1import React, { useRef, useEffect } from 'react';
2
3const VideoStream = () => {
4  const videoRef = useRef(null);
5
6  useEffect(() => {
7    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
8      navigator.mediaDevices
9        .getUserMedia({ video: true })
10        .then((stream) => {
11          if (videoRef.current) {
12            videoRef.current.srcObject = stream;
13          }
14        })
15        .catch((err) => {
16          console.error('Error accessing camera:', err);
17        });
18    } else {
19      console.error('getUserMedia not supported');
20    }
21
22    return () => {
23      if (videoRef.current && videoRef.current.srcObject) {
24        videoRef.current.srcObject.getTracks().forEach((track) => {
25          track.stop();
26        });
27      }
28    };
29  }, []);
30
31  return <video ref={videoRef} autoPlay playsInline />;
32};
33
34export default VideoStream;

このコードを使用して、PWAでカメラ機能を実装できるはずです。ただし、iOSデバイスでは、PWAでカメラアクセスが制限されていることがあります。その場合、代替手段として、input type="file"を使用してカメラから画像を取得する方法があります。

jsx
1import React, { useState } from 'react';
2
3const ImageCapture = () => {
4  const [imageSrc, setImageSrc] = useState(null);
5
6  const handleCapture = (event) => {
7    const file = event.target.files[0];
8    const reader = new FileReader();
9
10    reader.onloadend = () => {
11      setImageSrc(reader.result);
12    };
13
14    if (file) {
15      reader.readAsDataURL(file);
16    }
17  };
18
19  return (
20    <>
21      <input type="file" accept="image/*" capture="camera" onChange={handleCapture} />
22      {imageSrc && <img src={imageSrc} alt="Captured" />}
23    </>
24  );
25};
26
27export default ImageCapture;