165 lines
3.0 KiB
Svelte
165 lines
3.0 KiB
Svelte
<script>
|
|
import { onMount, onDestroy } from 'svelte';
|
|
import { arStore } from '$lib/stores/arStore.js';
|
|
|
|
let { lat, lng } = $props();
|
|
|
|
let videoElement;
|
|
let cameraStream = null;
|
|
let cameraError = '';
|
|
|
|
async function startCamera() {
|
|
try {
|
|
cameraStream = await navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
facingMode: { ideal: 'environment' }
|
|
},
|
|
audio: false
|
|
});
|
|
|
|
if (videoElement) {
|
|
videoElement.srcObject = cameraStream;
|
|
await videoElement.play();
|
|
}
|
|
} catch (error) {
|
|
console.error('Camera error:', error);
|
|
cameraError = 'Camera could not be started.';
|
|
}
|
|
}
|
|
|
|
function stopCamera() {
|
|
if (cameraStream) {
|
|
cameraStream.getTracks().forEach((track) => track.stop());
|
|
cameraStream = null;
|
|
}
|
|
}
|
|
|
|
function exitARMode() {
|
|
stopCamera();
|
|
|
|
arStore.update((state) => ({
|
|
...state,
|
|
isARMode: false,
|
|
selectedScreenPoint: null,
|
|
composing: false,
|
|
focusedMessage: null
|
|
}));
|
|
}
|
|
|
|
onMount(() => {
|
|
startCamera();
|
|
});
|
|
|
|
onDestroy(() => {
|
|
stopCamera();
|
|
});
|
|
</script>
|
|
|
|
<div class="ar-view">
|
|
<video
|
|
bind:this={videoElement}
|
|
class="camera-video"
|
|
autoplay
|
|
playsinline
|
|
muted
|
|
></video>
|
|
|
|
<div class="ar-overlay">
|
|
<button class="back-button" onclick={exitARMode}>
|
|
Back
|
|
</button>
|
|
|
|
{#if cameraError}
|
|
<div class="camera-error">
|
|
<p>{cameraError}</p>
|
|
<p class="small">Please check camera permission in your browser.</p>
|
|
</div>
|
|
{:else}
|
|
<div class="ar-status">
|
|
<p>AR Mode</p>
|
|
<p class="small">Move your camera slowly.</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.ar-view {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #000;
|
|
color: white;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.camera-video {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
background: #000;
|
|
}
|
|
|
|
.ar-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.back-button {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 16px;
|
|
z-index: 10;
|
|
padding: 10px 14px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #111;
|
|
font-weight: 600;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.ar-status {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 36px;
|
|
transform: translateX(-50%);
|
|
padding: 12px 18px;
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(8px);
|
|
text-align: center;
|
|
}
|
|
|
|
.ar-status p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.small {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.camera-error {
|
|
position: absolute;
|
|
left: 20px;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
padding: 20px;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
color: #111;
|
|
text-align: center;
|
|
}
|
|
|
|
.camera-error p {
|
|
margin: 0;
|
|
}
|
|
</style> |