React+TypeScriptなWebアプリで、カメラ起動の最初の一歩。

Abstract

やっと分かった。React+Typescriptでカメラ起動の方法。
分かれば簡単。

成果物はココ↓
https://github.com/aaaa1597/React-WebCamera.git

前提

• React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
• 空っぽプロジェクト生成。React+TypeScriptのプロジェクト雛形をgithubに置いとく話。
• VSCodeで開く。Githubに登録したReact+TypeScriptのプロジェクトを開始する。
• ホストPC(Windows)のカメラ設定も忘れずに。
  • [環境構築]VirtualBox上のLinux22.04でカメラを使う。
    • 3.Windowsで設定
    • 4.HD Web Cameraにチェック

手順

1.App.tsxを開く

2.変更

App.tsx

-import React from 'react';
+import React, { useEffect, useRef } from 'react';
import './App.css';

+const constraints: MediaStreamConstraints = {
+ audio: false,
+ video: {
+   width:  { min: 1280, ideal: 1920, max: 2560 },
+   height: { min: 720 , ideal: 1080, max: 1440 } ,
+   frameRate: {
+     max: 30,
+   }//,
+   // facingMode: {
+   //   exact: 'environment',
+   // },
+ },
+};
  
function App() {
+ const videoRef    = useRef<HTMLVideoElement>(null);

+ useEffect(() => {
+   const openCamera = async () => {
+     const video = videoRef.current;
+     if (video) {
+       const stream = await navigator.mediaDevices.getUserMedia(constraints);
+       video.srcObject = stream;
+     }
+   };
+   openCamera();
+ }, [])

  return (
    <div className="App">
-     hello world!!
+     <p>Web Camera Sample</p>
+     <div style={{ display: 'grid' }}>
+       <div>
+         <video autoPlay playsInline={true} ref={videoRef} style={{ width: '100%' }}/>
+       </div>
+     </div>
    </div>
  );
}

export default App;

これで実行する。

出来た!!
videoサイズも1920x1080が取れているのが分かる。