import { SimliClient } from "simli-client";
function YourComponent() {
const videoRef = useRef < HTMLVideoElement > null;
const audioRef = useRef < HTMLAudioElement > null;
return (
<div>
<video ref={videoRef} autoPlay playsInline></video>
<audio ref={audioRef} autoPlay></audio>
</div>
);
}
async function startSimliConnection() {
const simliClient = new SimliClient();
const simliConfig = {
faceID: "YOUR_FACE_ID",
handleSilence: true, // keep the face moving while in idle
maxSessionLength: 3600, // in seconds
maxIdleTime: 600, // in seconds
videoRef: videoRef.current,
audioRef: audioRef.current,
enableConsoleLogs: true, // enables Simli console logs
};
const session_token = await fetch(
"http://localhost:8000/myAudioToVideoSession",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
faceId: simliConfig.faceID,
handleSilence: simliConfig.handleSilence,
maxSessionLength: simliConfig.maxSessionLength,
maxIdleTime: simliConfig.maxIdleTime,
}),
}
);
simliConfig.session_token = (await session_token.json()).session_token;
const iceConfig = await (
await fetch("http://localhost:8000/myIceServer", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
})
).json();
simliClient.Initialize(simliConfig);
simliClient.start(iceConfig);
}