show error message if no camera is present
This commit is contained in:
@@ -138,138 +138,149 @@ export default function Scanner({ onScan }: ScannerProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-2xl mx-auto">
|
<div className="w-full max-w-2xl mx-auto">
|
||||||
<div className={getVideoContainerClass()}>
|
{hasCamera === false ? (
|
||||||
<video
|
<div className="p-4 text-center">
|
||||||
ref={videoRef}
|
<p className="text-red-600 text-lg">
|
||||||
className="w-full h-auto rounded-lg border-2 border-gray-300 cursor-pointer"
|
Denne nettsiden krever tilgang til et kamera.
|
||||||
playsInline
|
</p>
|
||||||
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>
|
||||||
</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>{`
|
<style jsx>{`
|
||||||
/* Responsive video container for mobile portrait */
|
/* Responsive video container for mobile portrait */
|
||||||
@media (max-width: 768px) and (orientation: portrait) {
|
@media (max-width: 768px) and (orientation: portrait) {
|
||||||
|
|||||||
Reference in New Issue
Block a user