Kamera-View: Mehrere Fotos ohne Kamera-Neustart
All checks were successful
Deploy bericht / deploy (push) Successful in 2s
All checks were successful
Deploy bericht / deploy (push) Successful in 2s
Eigene Kamera-View mit getUserMedia() statt nativer Kamera-App: - Vollbild-Overlay mit Live-Stream - Auslöser, Vorschau, Speichern/Verwerfen - Kamera bleibt nach Speichern offen - Front/Back-Wechsel - Session-Counter [deploy] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eduard Wisch
parent
5fc6338ced
commit
04fdd87ffd
1 changed files with 348 additions and 12 deletions
|
|
@ -187,12 +187,142 @@ body {
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 100;
|
z-index: 2000;
|
||||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||||
animation: slideDown 0.2s;
|
animation: slideDown 0.2s;
|
||||||
}
|
}
|
||||||
.toast.error { background: #d9534f; }
|
.toast.error { background: #d9534f; }
|
||||||
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; } }
|
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; } }
|
||||||
|
|
||||||
|
/* Kamera-View Styles */
|
||||||
|
.camera-view {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: #000;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.camera-view.hidden { display: none; }
|
||||||
|
|
||||||
|
#camera-stream {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#camera-canvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 24px 20px 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(transparent, rgba(0,0,0,0.7));
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-btn-close,
|
||||||
|
.camera-btn-switch {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.camera-btn-close:active,
|
||||||
|
.camera-btn-switch:active {
|
||||||
|
background: rgba(255,255,255,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-shutter {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid #fff;
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.camera-shutter::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
transition: transform 0.1s;
|
||||||
|
}
|
||||||
|
.camera-shutter:active::after {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-counter {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
color: #5cb85c;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Foto-Vorschau */
|
||||||
|
.photo-preview {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: #000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.photo-preview.hidden { display: none; }
|
||||||
|
|
||||||
|
.photo-preview img {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-discard,
|
||||||
|
.btn-save {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-discard {
|
||||||
|
background: #444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-discard:active { background: #555; }
|
||||||
|
.btn-save {
|
||||||
|
background: #5cb85c;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-save:active { background: #4cae4c; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -204,13 +334,37 @@ body {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<label class="btn" for="camera-input">Foto aufnehmen</label>
|
<button class="btn" id="open-camera-btn">Foto aufnehmen</button>
|
||||||
<input type="file" id="camera-input" class="hidden-input" accept="image/*" capture="environment" multiple>
|
|
||||||
|
|
||||||
<label class="btn btn-secondary" for="gallery-input">Aus Galerie wählen</label>
|
<label class="btn btn-secondary" for="gallery-input">Aus Galerie wählen</label>
|
||||||
<input type="file" id="gallery-input" class="hidden-input" accept="image/*" multiple>
|
<input type="file" id="gallery-input" class="hidden-input" accept="image/*" multiple>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Kamera-View Overlay -->
|
||||||
|
<div id="camera-view" class="camera-view hidden">
|
||||||
|
<video id="camera-stream" autoplay playsinline muted></video>
|
||||||
|
<canvas id="camera-canvas"></canvas>
|
||||||
|
|
||||||
|
<!-- Kamera-Controls -->
|
||||||
|
<div class="camera-controls">
|
||||||
|
<button id="camera-close" class="camera-btn-close">✕</button>
|
||||||
|
<button id="camera-shutter" class="camera-shutter"></button>
|
||||||
|
<button id="camera-switch" class="camera-btn-switch">⟳</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Upload-Counter -->
|
||||||
|
<div id="camera-counter" class="camera-counter">0 Fotos</div>
|
||||||
|
|
||||||
|
<!-- Vorschau nach Foto -->
|
||||||
|
<div id="photo-preview" class="photo-preview hidden">
|
||||||
|
<img id="preview-image" src="">
|
||||||
|
<div class="preview-buttons">
|
||||||
|
<button id="preview-discard" class="btn-discard">✕ Verwerfen</button>
|
||||||
|
<button id="preview-save" class="btn-save">✓ Speichern</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="uploading-area"></div>
|
<div id="uploading-area"></div>
|
||||||
|
|
||||||
<div class="uploaded-list">
|
<div class="uploaded-list">
|
||||||
|
|
@ -223,22 +377,204 @@ const TOKEN = <?php print json_encode($token); ?>;
|
||||||
const URL_UPLOAD = window.location.pathname + '?token=' + encodeURIComponent(TOKEN);
|
const URL_UPLOAD = window.location.pathname + '?token=' + encodeURIComponent(TOKEN);
|
||||||
let uploadedCount = 0;
|
let uploadedCount = 0;
|
||||||
|
|
||||||
const cameraInput = document.getElementById('camera-input');
|
// DOM-Elemente
|
||||||
const galleryInput = document.getElementById('gallery-input');
|
const galleryInput = document.getElementById('gallery-input');
|
||||||
const uploadingArea = document.getElementById('uploading-area');
|
const uploadingArea = document.getElementById('uploading-area');
|
||||||
const uploadedList = document.getElementById('uploaded-list');
|
const uploadedList = document.getElementById('uploaded-list');
|
||||||
const uploadedCountEl = document.getElementById('uploaded-count');
|
const uploadedCountEl = document.getElementById('uploaded-count');
|
||||||
|
|
||||||
[cameraInput, galleryInput].forEach(inp => {
|
// Kamera-Elemente
|
||||||
inp.addEventListener('change', async () => {
|
const openCameraBtn = document.getElementById('open-camera-btn');
|
||||||
if (!inp.files || !inp.files.length) return;
|
const cameraView = document.getElementById('camera-view');
|
||||||
for (const file of inp.files) {
|
const cameraStream = document.getElementById('camera-stream');
|
||||||
|
const cameraCanvas = document.getElementById('camera-canvas');
|
||||||
|
const cameraClose = document.getElementById('camera-close');
|
||||||
|
const cameraShutter = document.getElementById('camera-shutter');
|
||||||
|
const cameraSwitch = document.getElementById('camera-switch');
|
||||||
|
const cameraCounter = document.getElementById('camera-counter');
|
||||||
|
const photoPreview = document.getElementById('photo-preview');
|
||||||
|
const previewImage = document.getElementById('preview-image');
|
||||||
|
const previewDiscard = document.getElementById('preview-discard');
|
||||||
|
const previewSave = document.getElementById('preview-save');
|
||||||
|
|
||||||
|
// Kamera-Status
|
||||||
|
let mediaStream = null;
|
||||||
|
let currentFacingMode = 'environment'; // 'environment' = Rückkamera, 'user' = Frontkamera
|
||||||
|
let currentPhotoBlob = null;
|
||||||
|
let cameraSessionCount = 0;
|
||||||
|
|
||||||
|
// Galerie-Input Handler
|
||||||
|
galleryInput.addEventListener('change', async () => {
|
||||||
|
if (!galleryInput.files || !galleryInput.files.length) return;
|
||||||
|
for (const file of galleryInput.files) {
|
||||||
await uploadFile(file);
|
await uploadFile(file);
|
||||||
}
|
}
|
||||||
inp.value = '';
|
galleryInput.value = '';
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// === KAMERA-FUNKTIONEN ===
|
||||||
|
|
||||||
|
// Kamera öffnen
|
||||||
|
openCameraBtn.addEventListener('click', openCameraView);
|
||||||
|
|
||||||
|
async function openCameraView() {
|
||||||
|
try {
|
||||||
|
const constraints = {
|
||||||
|
video: {
|
||||||
|
facingMode: currentFacingMode,
|
||||||
|
width: { ideal: 1920 },
|
||||||
|
height: { ideal: 1080 }
|
||||||
|
},
|
||||||
|
audio: false
|
||||||
|
};
|
||||||
|
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||||
|
cameraStream.srcObject = mediaStream;
|
||||||
|
cameraView.classList.remove('hidden');
|
||||||
|
cameraSessionCount = 0;
|
||||||
|
updateCameraCounter();
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Kamera-Fehler:', err);
|
||||||
|
toast('Kamera nicht verfügbar: ' + err.message, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Kamera schließen
|
||||||
|
cameraClose.addEventListener('click', closeCameraView);
|
||||||
|
|
||||||
|
function closeCameraView() {
|
||||||
|
if (mediaStream) {
|
||||||
|
mediaStream.getTracks().forEach(track => track.stop());
|
||||||
|
mediaStream = null;
|
||||||
|
}
|
||||||
|
cameraStream.srcObject = null;
|
||||||
|
cameraView.classList.add('hidden');
|
||||||
|
photoPreview.classList.add('hidden');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Foto aufnehmen
|
||||||
|
cameraShutter.addEventListener('click', takePhoto);
|
||||||
|
|
||||||
|
function takePhoto() {
|
||||||
|
if (!mediaStream) return;
|
||||||
|
|
||||||
|
const video = cameraStream;
|
||||||
|
const canvas = cameraCanvas;
|
||||||
|
|
||||||
|
// Canvas auf Video-Größe setzen
|
||||||
|
canvas.width = video.videoWidth;
|
||||||
|
canvas.height = video.videoHeight;
|
||||||
|
|
||||||
|
// Video-Frame auf Canvas zeichnen
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx.drawImage(video, 0, 0);
|
||||||
|
|
||||||
|
// Canvas zu Blob konvertieren
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (blob) {
|
||||||
|
currentPhotoBlob = blob;
|
||||||
|
showPreview(blob);
|
||||||
|
}
|
||||||
|
}, 'image/jpeg', 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vorschau anzeigen
|
||||||
|
function showPreview(blob) {
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
previewImage.onload = () => URL.revokeObjectURL(url);
|
||||||
|
previewImage.src = url;
|
||||||
|
photoPreview.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Foto verwerfen
|
||||||
|
previewDiscard.addEventListener('click', discardPhoto);
|
||||||
|
|
||||||
|
function discardPhoto() {
|
||||||
|
currentPhotoBlob = null;
|
||||||
|
photoPreview.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Foto speichern und Kamera offen lassen
|
||||||
|
previewSave.addEventListener('click', savePhoto);
|
||||||
|
|
||||||
|
async function savePhoto() {
|
||||||
|
if (!currentPhotoBlob) return;
|
||||||
|
|
||||||
|
// Vorschau schließen, zurück zur Kamera
|
||||||
|
photoPreview.classList.add('hidden');
|
||||||
|
|
||||||
|
// Upload im Hintergrund
|
||||||
|
const blob = currentPhotoBlob;
|
||||||
|
currentPhotoBlob = null;
|
||||||
|
|
||||||
|
const fname = 'foto_' + Date.now() + '.jpg';
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('token', TOKEN);
|
||||||
|
fd.append('file', blob, fname);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(URL_UPLOAD, { method: 'POST', body: fd });
|
||||||
|
const data = await r.json();
|
||||||
|
if (data.success) {
|
||||||
|
uploadedCount++;
|
||||||
|
cameraSessionCount++;
|
||||||
|
uploadedCountEl.textContent = '(' + uploadedCount + ')';
|
||||||
|
updateCameraCounter();
|
||||||
|
|
||||||
|
// Item zur Liste hinzufügen
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'uploaded-item';
|
||||||
|
item.innerHTML = '<span class="check">✓</span><span class="name">' + escapeHtml(data.filename) + '</span>';
|
||||||
|
uploadedList.prepend(item);
|
||||||
|
|
||||||
|
toast('Foto gespeichert');
|
||||||
|
} else {
|
||||||
|
toast('Fehler: ' + (data.error || 'unbekannt'), true);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
toast('Netzwerkfehler', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Kamera wechseln (Front/Back)
|
||||||
|
cameraSwitch.addEventListener('click', switchCamera);
|
||||||
|
|
||||||
|
async function switchCamera() {
|
||||||
|
currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
|
||||||
|
|
||||||
|
// Alten Stream stoppen
|
||||||
|
if (mediaStream) {
|
||||||
|
mediaStream.getTracks().forEach(track => track.stop());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Neuen Stream starten
|
||||||
|
try {
|
||||||
|
const constraints = {
|
||||||
|
video: {
|
||||||
|
facingMode: currentFacingMode,
|
||||||
|
width: { ideal: 1920 },
|
||||||
|
height: { ideal: 1080 }
|
||||||
|
},
|
||||||
|
audio: false
|
||||||
|
};
|
||||||
|
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||||
|
cameraStream.srcObject = mediaStream;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Kamera-Wechsel fehlgeschlagen:', err);
|
||||||
|
toast('Kamera-Wechsel fehlgeschlagen', true);
|
||||||
|
// Zurück zur anderen Kamera
|
||||||
|
currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCameraCounter() {
|
||||||
|
const text = cameraSessionCount === 1 ? '1 Foto' : cameraSessionCount + ' Fotos';
|
||||||
|
cameraCounter.textContent = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === UPLOAD-FUNKTIONEN ===
|
||||||
|
|
||||||
async function uploadFile(file) {
|
async function uploadFile(file) {
|
||||||
const blob = await resizeImage(file, 2000);
|
const blob = await resizeImage(file, 2000);
|
||||||
const fname = file.name || 'photo.jpg';
|
const fname = file.name || 'photo.jpg';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue