docs: camera picker for torch demo

Add camera picker to Torch demo, so users can select a different
camera, if the default choice does not support torch.

See: #380

.eslintrc.cjs

@@ -10,7 +10,7 @@ module.exports = {
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
-  ignore: ['dist'],
+  ignorePatterns: ['dist/'],
   parserOptions: {
     ecmaVersion: 11
   }

docs/.vitepress/components/demos/Torch.vue

@@ -1,47 +1,65 @@
 <template>
   <div>
+    <p>
+      Pick camera:
+      <select v-model="selected">
+        <option v-for="device in devices" :key="device.label" :value="device">
+          {{ device.label }}
+        </option>
+      </select>
+    </p>
+
     <p v-if="torchNotSupported" class="error">Torch not supported for active camera</p>
 
-    <qrcode-stream :torch="torchActive" @camera-on="onCameraOn" @error="onError">
+    <qrcode-stream 
+      :torch="torchActive" 
+      :constraints="{ deviceId: selected.deviceId }" 
+      v-if="selected !== null"       
+      @error="console.error"
+      @camera-on="onCameraOn" 
+    >
       <button @click="torchActive = !torchActive" :disabled="torchNotSupported">
         <img :src="withBase(icon)" alt="toggle torch" />
       </button>
     </qrcode-stream>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
 import { withBase } from 'vitepress'
-
 import { QrcodeStream } from '../../../../src'
 
-export default {
-  components: { QrcodeStream },
-
-  data() {
-    return {
-      torchActive: false,
-      torchNotSupported: false
-    }
-  },
+const selected = ref(null)
+const devices = ref([])
 
-  computed: {
-    icon() {
-      if (this.torchActive) return '/flash-off.svg'
-      else return '/flash-on.svg'
-    }
-  },
+onMounted(async () => {
+  devices.value = (await navigator.mediaDevices.enumerateDevices())
+    .filter(({ kind }) => kind === 'videoinput')
 
-  methods: {
-    onCameraOn(capabilities) {
-      console.log(capabilities)
-      this.torchNotSupported = !capabilities.torch
-    },
+	if (devices.value.length > 0) {
+		selected.value = devices.value[0]	
+	}
+})
 
-    onError: console.error,
+const torchActive = ref(false)
+const torchNotSupported = ref(false)
 
-    withBase
+const icon = computed(() => {
+  if (torchActive.value) { 
+    return '/flash-off.svg'
+  } else { 
+    return '/flash-on.svg'
   }
+})
+
+function onCameraOn(capabilities) {
+  console.log(capabilities)
+  torchNotSupported.value = !capabilities.torch
+}
+
+function onError(err) { 
+  console.error(err)
 }
 </script>