Spaces:
Runtime error
Runtime error
File size: 2,241 Bytes
2485dd8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import * as THREE from 'three';
import {Button} from '@mui/material';
import {useCallback, useEffect, useState} from 'react';
import {BufferedSpeechPlayer} from '../createBufferedSpeechPlayer';
type Props = {
bufferedSpeechPlayer: BufferedSpeechPlayer;
renderer: THREE.WebGLRenderer | null;
onARVisible?: () => void;
onARHidden?: () => void;
};
export default function ARButton({
bufferedSpeechPlayer,
renderer,
onARVisible,
onARHidden,
}: Props) {
const [session, setSession] = useState<XRSession | null>(null);
const [supported, setSupported] = useState<boolean>(true);
useEffect(() => {
if (!navigator.xr) {
setSupported(false);
return;
}
navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
setSupported(supported);
});
}, []);
const resetBuffers = useCallback(
(event: XRSessionEvent) => {
const session = event.target;
if (!(session instanceof XRSession)) {
return;
}
switch (session.visibilityState) {
case 'visible':
console.log('Restarting speech player, device is visible');
bufferedSpeechPlayer.stop();
bufferedSpeechPlayer.start();
onARVisible?.();
break;
case 'hidden':
console.log('Stopping speech player, device is hidden');
bufferedSpeechPlayer.stop();
bufferedSpeechPlayer.start();
onARHidden?.();
break;
}
},
[bufferedSpeechPlayer],
);
async function onSessionStarted(session: XRSession) {
setSession(session);
session.onvisibilitychange = resetBuffers;
session.onend = onSessionEnded;
await renderer.xr.setSession(session);
}
function onSessionEnded() {
setSession(null);
}
const onClick = () => {
if (session === null) {
navigator.xr!.requestSession('immersive-ar').then(onSessionStarted);
} else {
session.end();
}
};
return (
<Button
variant="contained"
onClick={onClick}
disabled={!supported || renderer == null}
sx={{mt: 1}}>
{supported
? renderer != null
? 'Enter AR'
: 'Initializing AR...'
: 'AR Not Supported'}
</Button>
);
}
|