Skip to content

Commit

Permalink
Update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
baku89 committed Jun 9, 2024
1 parent b2329cb commit 0952c1c
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 37 deletions.
81 changes: 71 additions & 10 deletions demo/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,45 @@
<template v-if="camera">
<h2>Actions</h2>
<dl>
<template v-if="configs.canTakePhoto.value">
<template
v-if="
configs.canTakePhoto.value || configs.canStartBulbCapture.value
"
>
<dt>saveFolder</dt>
<dd>
<button @click="setupSaveFolder">
{{ folderHandler ? folderHandler.name : '(None)' }}
</button>
</dd>
<dt>takePhoto</dt>
<dd><button class="red" @click="takePhoto">Shutter</button></dd>
<template v-if="configs.canTakePhoto.value">
<dt>takePhoto</dt>
<dd><button class="red" @click="takePhoto">Shutter</button></dd>
</template>
<template v-if="configs.canStartBulbCapture.value">
<dt>bulbCapture</dt>
<dd>
<button class="red" @click="toggleBulbShutter">
{{
configs.status.value === 'capturing' ? 'Stop' : 'Shutter'
}}
</button>
</dd>
</template>
</template>
<template v-if="configs.canRecordVideo.value">
<dt>recordVideo</dt>
<dd>
<button class="red" @click="toggleVideoRecording">
{{
configs.status.value === 'recording' ? 'Stop' : 'Recording'
}}
</button>
</dd>
</template>
<template v-if="configs.canRunAutoFocus.value">
<dt>autoFocus</dt>
<dd><button @click="runAutoFocus">Run</button></dd>
<dd><button @click="camera?.runAutoFocus()">Run</button></dd>
</template>
<template v-if="configs.canRunManualFocus.value">
<dt>manualFocus</dt>
Expand Down Expand Up @@ -99,7 +125,7 @@
v-if="config.value !== null"
:key="name"
:label="name"
:config="(config as any)"
:config="config"
/>
</template>
</dl>
Expand All @@ -111,11 +137,14 @@
<script lang="ts" setup>
import {saveAs} from 'file-saver'
import {TethrObject} from 'tethr'
import {ref} from 'vue'
import {ref, watchEffect} from 'vue'
import TethrConfig from './TethrConfig.vue'
import {useTethr} from './useTethr'
const TransparentPng =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
const folderHandler = ref<FileSystemDirectoryHandle | null>(null)
async function setupSaveFolder() {
Expand All @@ -136,6 +165,31 @@ async function setupSaveFolder() {
folderHandler.value = handler
}
const photoURL = ref(TransparentPng)
async function takePhoto() {
if (!camera.value) return
const result = await camera.value.takePhoto()
if (result.status !== 'ok') return
for (const object of result.value) {
if (object.format !== 'raw') {
photoURL.value = URL.createObjectURL(object.blob)
}
onSave(object)
}
}
async function toggleBulbShutter() {
if (!camera.value) return
if (configs.status.value === 'capturing') {
camera.value.stopBulbCapture()
} else if (configs.status.value === 'idle') {
camera.value.startBulbCapture()
}
}
async function onSave(object: TethrObject) {
if (folderHandler.value) {
// Use File System Access API
Expand All @@ -155,12 +209,19 @@ const {
camera,
configs,
liveviewMediaStream,
photoURL,
runAutoFocus,
toggleCameraConnection,
toggleLiveview,
takePhoto,
} = useTethr(onSave)
} = useTethr()
function toggleVideoRecording() {
if (!camera.value) return
if (configs.status.value === 'recording') {
camera.value.stopVideoRecording()
} else {
camera.value.startVideoRecording()
}
}
// Expose camera object to the global scope for debugging
watchEffect(() => {
Expand Down
31 changes: 4 additions & 27 deletions demo/src/useTethr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import {
ConfigType,
detectCameras,
Tethr,
TethrObject,
} from 'tethr'
import {onUnmounted, reactive, readonly, Ref, ref, shallowRef, watch} from 'vue'

const TransparentPng =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='

export interface TethrConfig<T> {
writable: boolean
value: T | null
Expand Down Expand Up @@ -60,13 +56,11 @@ export function useTethrConfig<N extends ConfigName>(
return readonly(config)
}

export function useTethr(onSave: (object: TethrObject) => void) {
export function useTethr() {
const camera = shallowRef<Tethr | null>(null)

const liveviewMediaStream = ref<null | MediaStream>(null)

const photoURL = ref(TransparentPng)

async function toggleCameraConnection() {
if (camera.value && camera.value.opened) {
await camera.value.close()
Expand Down Expand Up @@ -98,23 +92,6 @@ export function useTethr(onSave: (object: TethrObject) => void) {
}
}

async function takePhoto() {
if (!camera.value) return
const result = await camera.value.takePhoto()
if (result.status === 'ok') {
for (const object of result.value) {
if (object.format !== 'raw') {
photoURL.value = URL.createObjectURL(object.blob)
}
onSave(object)
}
}
}

async function runAutoFocus() {
await camera.value?.runAutoFocus()
}

async function toggleLiveview() {
if (!camera.value) return
const enabled = await camera.value.get('liveviewEnabled')
Expand Down Expand Up @@ -168,18 +145,18 @@ export function useTethr(onSave: (object: TethrObject) => void) {
liveviewSize: useTethrConfig(camera, 'liveviewSize'),
destinationToSave: useTethrConfig(camera, 'destinationToSave'),
batteryLevel: useTethrConfig(camera, 'batteryLevel'),
canRecordVideo: useTethrConfig(camera, 'canRecordVideo'),
canTakePhoto: useTethrConfig(camera, 'canTakePhoto'),
canRunAutoFocus: useTethrConfig(camera, 'canRunAutoFocus'),
canRunManualFocus: useTethrConfig(camera, 'canRunManualFocus'),
canStartBulbCapture: useTethrConfig(camera, 'canStartBulbCapture'),
canStartLiveview: useTethrConfig(camera, 'canStartLiveview'),
manualFocusOptions: useTethrConfig(camera, 'manualFocusOptions'),
shutterSound: useTethrConfig(camera, 'shutterSound'),
status: useTethrConfig(camera, 'status'),
},
liveviewMediaStream,
photoURL,
runAutoFocus,
toggleCameraConnection,
toggleLiveview,
takePhoto,
}
}

0 comments on commit 0952c1c

Please sign in to comment.