Feature/camera

src/components/Recorder.vue

@@ -5,6 +5,7 @@ import { onMounted, ref } from "vue";
 import { useToast } from '@/components/ui/toast/use-toast';
 import { Play, StopCircle, Trash, Mic } from "lucide-vue-next";
 import { useVideo } from '@/composables/videoStore';
+import { Switch } from "@/components/ui/switch";
 import {
     Tooltip,
     TooltipContent,
@@ -24,6 +25,21 @@ const { video: selectedVideo } = useVideo();
 const isRecording = ref<boolean>(false);
 const mediaRecorder = ref<MediaRecorder | null>(null);
 const recordedType = ref<'scr' | 'scr_mic'>('scr');
+const enableCameraView = ref<boolean>(false);
+const allowCameraView = ref<boolean>(false);
+const webcamStream = ref<MediaStream | null>(null);
+const webcamSrc = ref<HTMLVideoElement | null>(null);
+
+const checkCameraAvailability = async () => {
+    try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const hasWebcam = devices.some(device => device.kind === 'videoinput');
+        allowCameraView.value = hasWebcam;
+    } catch (err) {
+        console.error('Error accessing media devices.', err);
+        allowCameraView.value = false;
+    }
+};
 
 // get media screen recorder
 const audioConstraints:MediaTrackConstraints = {
@@ -54,6 +70,7 @@ async function captureAudio() {
 
 const startRecordingWithAudioMic = async () => {
     try {
+        await streamWebcam();
         recordedType.value = 'scr_mic';
         const audioStream = await captureAudio();
         const screenStream = await captureScreen();
@@ -72,12 +89,14 @@ const startRecordingWithAudioMic = async () => {
             const recordedBlob = new Blob(recordedChunks, { type: 'video/webm' });
             const tracks = stream.getTracks();
             tracks.forEach((tr) => tr.stop());
+            stopWebCam();
             saveToIndexedDB(recordedBlob, true);
         };
 
         mediaRecorder.value.start(200);
         isRecording.value = true;
     } catch (error: any) {
+        stopWebCam();
         toast({
             title: 'Failed',
             description: error?.message,
@@ -86,7 +105,7 @@ const startRecordingWithAudioMic = async () => {
     }
 }
 
-const startRecordingAudioMic = async () => {
+const startRecordingOnlyAudioMic = async () => {
     try {
         recordedType.value = 'scr_mic';
         const audioStream = await captureAudio();
@@ -121,6 +140,7 @@ const startRecordingAudioMic = async () => {
 
 const startRecording = async() => {
     try {
+        await streamWebcam();
         recordedType.value = 'scr';
         const stream = await captureScreen(true);
         mediaRecorder.value = new MediaRecorder(stream);
@@ -143,12 +163,14 @@ const startRecording = async() => {
                 };
                 tr.stop();
             });
+            stopWebCam();
             saveToIndexedDB(recordedBlob, audioEnable);
         };
 
         mediaRecorder.value.start(200);
         isRecording.value = true;
     } catch (error: any) {
+        stopWebCam();
         toast({
             title: 'Failed',
             description: error?.message,
@@ -157,6 +179,36 @@ const startRecording = async() => {
     }
 };
 
+async function streamWebcam() {
+    if (!enableCameraView.value) {
+        return;
+    }
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+    webcamStream.value = stream;
+    if (webcamSrc.value) {
+        webcamSrc.value.srcObject = stream;
+        if (document.pictureInPictureElement) {
+            await document.exitPictureInPicture();
+        } else {
+            await webcamSrc.value.play();
+            await webcamSrc.value.requestPictureInPicture();
+        }
+    }
+}
+
+function stopWebCam() {
+    if (webcamStream.value) {
+        const tracks = webcamStream.value.getTracks();
+        tracks.forEach(tr => tr.stop());
+    }
+    if (webcamSrc.value) {
+        webcamSrc.value.srcObject = null;
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        }
+    }
+}
+
 // Function to save the recorded video to IndexedDB
 const saveToIndexedDB = async (blob: Blob, audio: boolean = false) => { 
     try {
@@ -222,31 +274,40 @@ const deleteData = async (video: VideoSaved) => {
 
 onMounted(() => {
     getRecordedVideosFromIndexedDB();
+    checkCameraAvailability();
 });
 </script>
 <template>
 <div class="relative flex-col items-start gap-8 md:flex md:w-[310px]" :class="{ 'hidden': !mobile }">
     <div class="flex flex-col w-full items-start gap-6">
         <div class="w-full grid gap-2">
             <template v-if="!isRecording">
-                <TooltipProvider v-if="!mobile">
-                    <Tooltip>
-                        <TooltipTrigger as-child>
-                            <Button @click="startRecording()">
-                                <Play class="size-5 mr-4 fill-white dark:fill-black"></Play>
-                                Start Recording Screen Only
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" :side-offset="5" :class="{ 'hidden': mobile }">
-                            Audio only available on chrome tab.
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-                <Button v-if="!mobile" @click="startRecordingWithAudioMic()">
-                    <Mic class="size-5 mr-4"></Mic>
-                    Start Recording with Mic
-                </Button>
-                <Button v-if="mobile" @click="startRecordingAudioMic()">
+                <template v-if="!mobile">
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger as-child>
+                                <Button @click="startRecording()">
+                                    <Play class="size-5 mr-4 fill-white dark:fill-black"></Play>
+                                    Start Recording Screen Only
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom" :side-offset="5" :class="{ 'hidden': mobile }">
+                                Audio only available on chrome tab.
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                    <Button @click="startRecordingWithAudioMic()">
+                        <Mic class="size-5 mr-4"></Mic>
+                        Start Recording with Mic
+                    </Button>
+                    <div class="flex items-center gap-2">
+                        <Switch v-model:checked="enableCameraView" id="enable-camera" :disabled="!allowCameraView" />
+                        <label for="enable-camera" class="text-sm">
+                            {{ allowCameraView ? 'Enable Camera View' : 'Camera Not Found' }}
+                        </label>
+                    </div>
+                </template>
+                <Button v-if="mobile" @click="startRecordingOnlyAudioMic()">
                     <Mic class="size-5 mr-4"></Mic>
                     Start Recording audio
                 </Button>
@@ -277,4 +338,6 @@ onMounted(() => {
         </fieldset>
     </div>
 </div>
+<!-- video webcam stream -->
+<video ref="webcamSrc" :class="{ 'hidden': !isRecording }" class="fixed bottom-10 right-10 w-[200px] h-[200px] z-[100] rounded-lg" autoplay />
 </template>

src/components/ui/switch/Switch.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    />
+  </SwitchRoot>
+</template>

src/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'