Update Component.svelte

README.md

@@ -1,4 +1,4 @@
-# Budibase Camera (beta)
+# Budibase Camera - Rear camera (beta)
 
 ![budibase camera demo](https://user-images.githubusercontent.com/110921612/209187286-58d8ae54-1275-4ed6-b7de-6cedf15a80ec.gif)
 
@@ -7,6 +7,8 @@
 
 Take pictures in Budibase! This component allows you to snap a photo directly into an Attachment field in a Budibase DB data source. It's a form field  component and it saves the captured image files directly to the attachment column you configure.
 
+I added a code such that it looks for rear camera when loading. So you can take a picture with your phone rear camera.
+
 ## Todos
 
 - add camera selection

src/Component.svelte

@@ -52,27 +52,33 @@
     unsubscribe?.();
   });
 
-  const openPreview = async () => {
-    loading = true;
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-      });
-      const track = stream.getVideoTracks()[0];
-      imageCapture = new ImageCapture(track);
+const openPreview = async () => {
+  loading = true;
+  try {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+    const rearCamera = videoDevices.find(device => device.label.toLowerCase().includes('back')) || videoDevices[0];
 
-      videoSource.srcObject = stream;
-      videoSource.play();
-      videoSource = videoSource;
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { deviceId: rearCamera.deviceId }
+    });
+
+    const track = stream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+
+    videoSource.srcObject = stream;
+    videoSource.play();
+    videoSource = videoSource;
+
+    await imageCapture.takePhoto();
+    previewEnabled = true;
+  } catch (error) {
+    console.log(error);
+    previewEnabled = false;
+  }
+  loading = false;
+};
 
-      imageCapture.takePhoto();
-      previewEnabled = true;
-    } catch (error) {
-      console.log(error);
-      previewEnabled = false;
-    }
-    loading = false;
-  };
 
   const capture = async () => {
     blob = await imageCapture.takePhoto();