{
+ if (cameraStream === null) {
+ camera = true;
+ await tick();
+ try {
+ const video = document.getElementById('camera-feed');
+ if (video) {
+ cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
+ video.srcObject = cameraStream;
+ await video.play();
+ }
+ } catch (err) {
+ console.error('Error accessing webcam: ', err);
+ }
+ }
+ };
+
+ const takeScreenshot = () => {
+ const video = document.getElementById('camera-feed');
+ const canvas = document.getElementById('camera-canvas');
+
+ if (!canvas) {
+ return;
+ }
+
+ const context = canvas.getContext('2d');
+ // Make the canvas match the video dimensions
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+ // Draw the flipped image from the video onto the canvas
+ context.save();
+ context.scale(-1, 1); // Flip horizontally
+ context.drawImage(video, 0, 0, video.videoWidth * -1, video.videoHeight);
+ context.restore();
+
+ // Convert the canvas to a data base64 URL and console log it
+ const dataURL = canvas.toDataURL('image/png');
+ console.log(dataURL);
+
+ return dataURL;
+ };
+
+ const stopCamera = () => {
+ if (cameraStream) {
+ const tracks = cameraStream.getTracks();
+ tracks.forEach((track) => track.stop());
+ }
+
+ cameraStream = null;
+ camera = false;
+ };
+
$: if ($showCallOverlay) {
startRecording();
+ } else {
+ stopCamera();
}
@@ -329,65 +399,154 @@
class="absolute w-full h-full bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
>
-
-
-
+ {#if camera}
+
+ {#if loading}
+
+ {:else}
+
+ {/if}
+
+
+ {/if}
-
- {#if loading}
-
+ @keyframes spinner_8HQG {
+ 0%,
+ 57.14% {
+ animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+ transform: translate(0);
+ }
+ 28.57% {
+ animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+ transform: translateY(-6px);
+ }
+ 100% {
+ transform: translate(0);
+ }
+ }
+
+ {:else}
+
+ {/if}
{:else}
-
+
+
+
+
+
+
+
+
+
{/if}
-
-