feat: move example

examples/api/src/App.svelte

@@ -17,6 +17,7 @@
   import Updater from './views/Updater.svelte'
   import Clipboard from './views/Clipboard.svelte'
   import WebRTC from './views/WebRTC.svelte'
+  import Camera from './views/Camera.svelte'
   import App from './views/App.svelte'
 
   import { onMount } from 'svelte'
@@ -110,7 +111,12 @@
       label: 'WebRTC',
       component: WebRTC,
       icon: 'i-ph-broadcast'
-    }
+    },
+    isMobile && {
+      label: 'Camera',
+      component: Camera,
+      icon: 'i-codicon-clippy'
+    },
   ]
 
   let selected = views[0]

examples/api/src/views/Camera.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { getPhoto, ResultType, Source } from "tauri-plugin-camera-api";
+
+  let source = Source.Camera;
+  let imageSrc = "";
+
+  const sources = [
+    {
+      value: Source.Camera,
+      label: "Camera",
+    },
+    {
+      value: Source.Photo,
+      label: "Photo",
+    },
+    {
+      value: Source.Prompt,
+      label: "Prompt",
+    },
+  ];
+
+  async function get() {
+    try {
+      const image = await getPhoto({
+        resultType: ResultType.Base64,
+        source,
+      });
+      imageSrc = `data:image/png;base64, ${image.data}`;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+</script>
+
+<div>
+  {#if imageSrc}
+    <img src={imageSrc} alt="Selected" />
+  {/if}
+  <div class="flex">
+    <select class="input" id="dir" bind:value={source}>
+      {#each sources as source}
+        <option value={source.value}>{source.label}</option>
+      {/each}
+    </select>
+    <button class="btn" on:click={get}> Get photo </button>
+  </div>
+</div>
+
+<style>
+  img {
+    max-width: 100vw;
+    max-height: 80vh;
+  }
+</style>