show error message if no camera is present
This commit is contained in:
@@ -138,138 +138,149 @@ export default function Scanner({ onScan }: ScannerProps) {
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto">
|
||||
<div className={getVideoContainerClass()}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-auto rounded-lg border-2 border-gray-300 cursor-pointer"
|
||||
playsInline
|
||||
muted
|
||||
onClick={isScanning ? stopScanner : startScanner}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-2 space-y-2">
|
||||
<div className="text-center">
|
||||
{!hasStartedOnce && (
|
||||
<p className="text-white-600 mb-4">
|
||||
Trykk på området over for å skru av og på kameraet.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
{showControls && (
|
||||
<>
|
||||
<div className="mt-0 space-y-2">
|
||||
{/* Start/Stop Toggle Button */}
|
||||
<div className="flex gap-2 justify-center">
|
||||
<button
|
||||
onClick={isScanning ? stopScanner : startScanner}
|
||||
className={`px-2 py-2 text-white rounded-lg transition-colors ${
|
||||
isScanning
|
||||
? "bg-red-500 hover:bg-red-600"
|
||||
: "bg-green-500 hover:bg-green-600"
|
||||
}`}
|
||||
>
|
||||
{isScanning ? "Stopp" : "Start"}
|
||||
</button>
|
||||
</div>
|
||||
{/* Flash Toggle */}
|
||||
{hasFlash && (
|
||||
<button
|
||||
onClick={toggleFlash}
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
|
||||
>
|
||||
📸 Flash: {isFlashOn ? "on" : "off"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Settings */}
|
||||
<div className="mt-2 space-y-2 text-left">
|
||||
{/* Camera Selection */}
|
||||
{cameras.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Camera:
|
||||
</label>
|
||||
<select
|
||||
value={selectedCamera}
|
||||
onChange={(e) => handleCameraChange(e.target.value)}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="environment">
|
||||
Environment Facing (Back Camera)
|
||||
</option>
|
||||
<option value="user">User Facing (Front Camera)</option>
|
||||
{cameras.map((camera) => (
|
||||
<option key={camera.id} value={camera.id}>
|
||||
{camera.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Highlight Style */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Highlight Style:
|
||||
</label>
|
||||
<select
|
||||
value={highlightStyle}
|
||||
onChange={(e) => setHighlightStyle(e.target.value)}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="default-style">Default style</option>
|
||||
<option value="example-style-1">Custom style 1</option>
|
||||
<option value="example-style-2">Custom style 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Show Scan Region */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="show-scan-region"
|
||||
type="checkbox"
|
||||
checked={showScanRegion}
|
||||
onChange={(e) => setShowScanRegion(e.target.checked)}
|
||||
className="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="show-scan-region"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Show scan region canvas
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Information */}
|
||||
<div className="mt-6 space-y-2 text-sm text-gray-600">
|
||||
<div>
|
||||
<span className="font-medium">Device has camera:</span>{" "}
|
||||
{hasCamera !== null
|
||||
? hasCamera
|
||||
? "Yes"
|
||||
: "No"
|
||||
: "Checking..."}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Camera has flash:</span>{" "}
|
||||
{hasFlash ? "Yes" : "No"}
|
||||
</div>
|
||||
{error && (
|
||||
<div className="text-red-600 font-medium">
|
||||
<span className="font-medium">Error:</span> {error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{hasCamera === false ? (
|
||||
<div className="p-4 text-center">
|
||||
<p className="text-red-600 text-lg">
|
||||
Denne nettsiden krever tilgang til et kamera.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={getVideoContainerClass()}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-auto rounded-lg border-2 border-gray-300 cursor-pointer"
|
||||
playsInline
|
||||
muted
|
||||
onClick={isScanning ? stopScanner : startScanner}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-2 space-y-2">
|
||||
<div className="text-center">
|
||||
{!hasStartedOnce && (
|
||||
<p className="text-white-600 mb-4">
|
||||
Trykk på området over for å skru av og på kameraet.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
{showControls && (
|
||||
<>
|
||||
<div className="mt-0 space-y-2">
|
||||
{/* Start/Stop Toggle Button */}
|
||||
<div className="flex gap-2 justify-center">
|
||||
<button
|
||||
onClick={isScanning ? stopScanner : startScanner}
|
||||
className={`px-2 py-2 text-white rounded-lg transition-colors ${
|
||||
isScanning
|
||||
? "bg-red-500 hover:bg-red-600"
|
||||
: "bg-green-500 hover:bg-green-600"
|
||||
}`}
|
||||
>
|
||||
{isScanning ? "Stopp" : "Start"}
|
||||
</button>
|
||||
</div>
|
||||
{/* Flash Toggle */}
|
||||
{hasFlash && (
|
||||
<button
|
||||
onClick={toggleFlash}
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
|
||||
>
|
||||
📸 Flash: {isFlashOn ? "on" : "off"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Settings */}
|
||||
<div className="mt-2 space-y-2 text-left">
|
||||
{/* Camera Selection */}
|
||||
{cameras.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Camera:
|
||||
</label>
|
||||
<select
|
||||
value={selectedCamera}
|
||||
onChange={(e) => handleCameraChange(e.target.value)}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="environment">
|
||||
Environment Facing (Back Camera)
|
||||
</option>
|
||||
<option value="user">User Facing (Front Camera)</option>
|
||||
{cameras.map((camera) => (
|
||||
<option key={camera.id} value={camera.id}>
|
||||
{camera.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Highlight Style */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Highlight Style:
|
||||
</label>
|
||||
<select
|
||||
value={highlightStyle}
|
||||
onChange={(e) => setHighlightStyle(e.target.value)}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="default-style">Default style</option>
|
||||
<option value="example-style-1">Custom style 1</option>
|
||||
<option value="example-style-2">Custom style 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Show Scan Region */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="show-scan-region"
|
||||
type="checkbox"
|
||||
checked={showScanRegion}
|
||||
onChange={(e) => setShowScanRegion(e.target.checked)}
|
||||
className="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="show-scan-region"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Show scan region canvas
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Information */}
|
||||
<div className="mt-6 space-y-2 text-sm text-gray-600">
|
||||
<div>
|
||||
<span className="font-medium">Device has camera:</span>{" "}
|
||||
{hasCamera !== null
|
||||
? hasCamera
|
||||
? "Yes"
|
||||
: "No"
|
||||
: "Checking..."}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Camera has flash:</span>{" "}
|
||||
{hasFlash ? "Yes" : "No"}
|
||||
</div>
|
||||
{error && (
|
||||
<div className="text-red-600 font-medium">
|
||||
<span className="font-medium">Error:</span> {error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
/* Responsive video container for mobile portrait */
|
||||
@media (max-width: 768px) and (orientation: portrait) {
|
||||
|
||||
Reference in New Issue
Block a user