| 1 | <script setup lang="ts"> |
| 2 | import type { SelectionItem } from './types' |
| 3 | import { computed } from 'vue' |
| 4 | import { |
| 5 | cameras, |
| 6 | ensureDevicesListPermissions, |
| 7 | microphones, |
| 8 | mimeExtMap, |
| 9 | mimeType, |
| 10 | supportedMimeTypes, |
| 11 | } from '../logic/recording' |
| 12 | import { currentCamera, currentMic } from '../state' |
| 13 | import SelectList from './SelectList.vue' |
| 14 | |
| 15 | const camerasItems = computed<SelectionItem<string>[]>(() => [ |
| 16 | { |
| 17 | value: 'none', |
| 18 | display: 'None', |
| 19 | }, |
| 20 | ...cameras.value.map(i => ({ |
| 21 | value: i.deviceId, |
| 22 | display: i.label, |
| 23 | })), |
| 24 | ]) |
| 25 | |
| 26 | const microphonesItems = computed<SelectionItem<string>[]>(() => [ |
| 27 | { |
| 28 | value: 'none', |
| 29 | display: 'None', |
| 30 | }, |
| 31 | ...microphones.value.map(i => ({ |
| 32 | value: i.deviceId, |
| 33 | display: i.label, |
| 34 | })), |
| 35 | ]) |
| 36 | |
| 37 | const mimeTypeItems = supportedMimeTypes.map(mime => ({ |
| 38 | value: mime, |
| 39 | display: mimeExtMap[mime].toUpperCase(), |
| 40 | })) |
| 41 | |
| 42 | ensureDevicesListPermissions() |
| 43 | </script> |
| 44 | |
| 45 | <template> |
| 46 | <div text-sm flex="~ col gap-2"> |
| 47 | <SelectList |
| 48 | v-model="currentCamera" |
| 49 | title="Camera" |
| 50 | :items="camerasItems" |
| 51 | /> |
| 52 | <div class="h-1px opacity-10 bg-current w-full" /> |
| 53 | <SelectList |
| 54 | v-model="currentMic" |
| 55 | title="Microphone" |
| 56 | :items="microphonesItems" |
| 57 | /> |
| 58 | <div class="h-1px opacity-10 bg-current w-full" /> |
| 59 | <SelectList |
| 60 | v-if="mimeTypeItems.length" |
| 61 | v-model="mimeType" |
| 62 | title="Video Format" |
| 63 | :items="mimeTypeItems" |
| 64 | /> |
| 65 | </div> |
| 66 | </template> |
| 67 |