57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { SelectionItem } from './types'
|
|
import { computed } from 'vue'
|
|
import {
|
|
cameras,
|
|
ensureDevicesListPermissions,
|
|
microphones,
|
|
mimeExtMap,
|
|
mimeType,
|
|
supportedMimeTypes,
|
|
} from '../logic/recording'
|
|
import { currentCamera, currentMic } from '../state'
|
|
import SelectList from './SelectList.vue'
|
|
|
|
const camerasItems = computed<SelectionItem<string>[]>(() => [
|
|
{
|
|
value: 'none',
|
|
display: 'None',
|
|
},
|
|
...cameras.value.map(i => ({
|
|
value: i.deviceId,
|
|
display: i.label,
|
|
})),
|
|
])
|
|
|
|
const microphonesItems = computed<SelectionItem<string>[]>(() => [
|
|
{
|
|
value: 'none',
|
|
display: 'None',
|
|
},
|
|
...microphones.value.map(i => ({
|
|
value: i.deviceId,
|
|
display: i.label,
|
|
})),
|
|
])
|
|
|
|
const mimeTypeItems = supportedMimeTypes.map(mime => ({
|
|
value: mime,
|
|
display: mimeExtMap[mime].toUpperCase(),
|
|
}))
|
|
|
|
ensureDevicesListPermissions()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-sm">
|
|
<SelectList v-model="currentCamera" title="Camera" :items="camerasItems" />
|
|
<SelectList v-model="currentMic" title="Microphone" :items="microphonesItems" />
|
|
<SelectList
|
|
v-if="mimeTypeItems.length"
|
|
v-model="mimeType"
|
|
title="mimeType"
|
|
:items="mimeTypeItems"
|
|
/>
|
|
</div>
|
|
</template>
|