기기 선택 추가

hada0127 · Jun 28, 2023 · 2b4ba41 · 2b4ba41
1 parent 2ad119a
commit 2b4ba41
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "svelte-electron",
+  "name": "videogameinput",
   "version": "0.1.0",
-  "description": "svelte-electron",
+  "description": "videogameinput",
   "author": "hada0127",
   "private": true,
   "main": "src/index.js",
@@ -16,7 +16,7 @@
   },
   "buildDependenciesFromSource": true,
   "build": {
-    "productName": "svelte-electron",
+    "productName": "videogameinput",
     "appId": "com.yourdomain.app",
     "asar": true,
     "mac": {
@@ -38,9 +38,9 @@
       "perMachine": true,
       "language": 1042,
       "installerIcon": "build/icons/iconKiosk.ico",
-      "shortcutName": "svelte-electron v${version}",
-      "artifactName": "svelte-electron v${version}.${ext}",
-      "uninstallDisplayName": "svelte-electron v${version}"
+      "shortcutName": "videogameinput v${version}",
+      "artifactName": "videogameinput v${version}.${ext}",
+      "uninstallDisplayName": "videogameinput v${version}"
     },
     "directories": {
       "buildResources": "./build/",

diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>svelte-electron</title>
+	<title>videogameinput</title>
 
 	<link rel='icon' type='image/png' href='asset/images/ui/favicon.png'>
 	<link rel='stylesheet' href='asset/reset.css'>

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>svelte-electron</title>
+    <title>videogameinput</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte
@@ -7,23 +7,53 @@
   /**
    * https://stackoverflow.com/questions/75718090/getusermedia-issue-with-permissions-and-domexception-could-not-start-video-so
    */
+  let cursor: boolean;
   let timer: boolean;
   let timerEvent: number;
 
   const setTimer = () => {
-    timer = false;
+    cursor = false;
     if (timerEvent) clearTimeout(timerEvent);
     timerEvent = window.setTimeout(() => {
-      timer = true;
-    }, 5000);
+      // timer = true;
+      cursor = true;
+    }, 3000);
   };
 
   document.addEventListener('mousemove', setTimer);
   document.addEventListener('mousedown', setTimer);
+
+  let video: HTMLVideoElement;
+  let deviceId: string | undefined;
+
+  $: if (deviceId) {
+    console.log(deviceId);
+    navigator.mediaDevices
+      .getUserMedia({
+        video: {
+          deviceId: {
+            exact: deviceId
+          }
+        },
+        audio: false
+      })
+      .then(function (stream) {
+        video.srcObject = stream;
+      })
+      .catch(function () {
+        console.log('Something went wrong!');
+      });
+  }
 </script>
 
-<main>
-  <img src="asset/temp.png" alt="" />
-  <Effect bind:effect={$settingUI.effect} bind:veffect={$settingUI.veffect} />
-  <Menu bind:effect={$settingUI.effect} bind:veffect={$settingUI.veffect} bind:timer />
+<main class:hidden={cursor === true}>
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video bind:this={video} autoplay muted id="videoElement" />
+  <Effect bind:effect={$settingUI.effect} bind:veffect={$settingUI.veffect} bind:timer />
+  <Menu
+    bind:effect={$settingUI.effect}
+    bind:veffect={$settingUI.veffect}
+    bind:timer
+    bind:deviceId
+  />
 </main>
diff --git a/src/renderer/src/Effect.svelte b/src/renderer/src/Effect.svelte
@@ -2,6 +2,7 @@
   import './Effect.scss';
   export let effect: string;
   export let veffect: string;
+  export let timer: boolean;
 </script>
 
 <div
@@ -12,11 +13,15 @@
   class:scanline40={veffect === 'scanline40'}
   class:scanline50={veffect === 'scanline50'}
 />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="effect"
   class:scanline10={effect === 'scanline10'}
   class:scanline20={effect === 'scanline20'}
   class:scanline30={effect === 'scanline30'}
   class:scanline40={effect === 'scanline40'}
   class:scanline50={effect === 'scanline50'}
+  on:click={() => {
+    timer = !timer;
+  }}
 />
diff --git a/src/renderer/src/Menu.svelte b/src/renderer/src/Menu.svelte
@@ -3,9 +3,51 @@
   export let effect: string;
   export let veffect: string;
   export let timer: boolean;
+
+  export let deviceId: string | undefined;
+
+  type MediaDevice = {
+    deviceId: string;
+    kind: string;
+    label: string;
+  };
+  let devices: {
+    deviceId: string;
+    label: string;
+  }[] = [];
+
+  function gotDevices(mediaDevices: MediaDevice[]) {
+    let i = 0;
+    mediaDevices.forEach((mediaDevice: MediaDevice) => {
+      if (mediaDevice.kind === 'videoinput') {
+        let tmp = {
+          deviceId: mediaDevice.deviceId,
+          label: mediaDevice.label
+        };
+        if (i === 0) {
+          deviceId = mediaDevice.deviceId;
+          i++;
+        }
+        devices.push(tmp);
+      }
+    });
+    devices = devices;
+    console.log(devices);
+  }
+  navigator.mediaDevices.enumerateDevices().then(gotDevices);
 </script>
 
 <div class="menu" class:hidden={timer === true}>
+  <label>
+    <p>Device</p>
+    {#key devices}
+      <select bind:value={deviceId}>
+        {#each devices as device}
+          <option value={device.deviceId}>{device.label}</option>
+        {/each}
+      </select>
+    {/key}
+  </label>
   <label>
     <p>Horizontal Effect</p>
     <select bind:value={effect}>

diff --git a/src/renderer/src/main.scss b/src/renderer/src/main.scss
@@ -2,9 +2,13 @@ main {
   position:relative;
   width:100vw;
   height:100vh;
-  > img {
+  background-color: #000;
+  &.hidden {
+    cursor:none;
+  }
+  > video {
     width:100vw;
     height:100vh;
-    object-fit: cover;
+    object-fit: contain;
   }
 }