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 (
|
||||
<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