Compare commits
2 Commits
0d95b642cd
...
6cec9f506a
| Author | SHA1 | Date | |
|---|---|---|---|
| 6cec9f506a | |||
| 1b37a99a2b |
58
Dockerfile
Normal file
58
Dockerfile
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
# Based on https://github.com/vercel/next.js/tree/canary/examples/with-docker
|
||||||
|
|
||||||
|
FROM node:24-alpine AS base
|
||||||
|
|
||||||
|
# Install dependencies only when needed
|
||||||
|
FROM base AS deps
|
||||||
|
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
|
||||||
|
RUN apk add --no-cache libc6-compat
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Install dependencies based on the preferred package manager
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# Rebuild the source code only when needed
|
||||||
|
FROM base AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Next.js collects completely anonymous telemetry data about general usage.
|
||||||
|
# Learn more here: https://nextjs.org/telemetry
|
||||||
|
# Uncomment the following line in case you want to disable telemetry during the build.
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED 1
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production image, copy all the files and run next
|
||||||
|
FROM base AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
ENV NODE_ENV production
|
||||||
|
# Uncomment the following line in case you want to disable telemetry during runtime.
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED 1
|
||||||
|
|
||||||
|
RUN addgroup --system --gid 1001 nodejs
|
||||||
|
RUN adduser --system --uid 1001 nextjs
|
||||||
|
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
|
||||||
|
# Set the correct permission for prerender cache
|
||||||
|
RUN mkdir .next
|
||||||
|
RUN chown nextjs:nodejs .next
|
||||||
|
|
||||||
|
# Automatically leverage output traces to reduce image size
|
||||||
|
# https://nextjs.org/docs/advanced-features/output-file-tracing
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
ENV PORT=3000
|
||||||
|
|
||||||
|
# server.js is created by next build from the standalone output
|
||||||
|
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
|
||||||
|
CMD HOSTNAME="0.0.0.0" node server.js
|
||||||
@@ -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