Spaces:
Runtime error
Runtime error
File size: 2,201 Bytes
c8120da b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 c8120da 016003c b1da0c5 016003c 066cfb1 b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c b1da0c5 016003c c8120da 016003c b1da0c5 016003c b1da0c5 c8120da b1da0c5 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>LiveKit Object Detection</title>
<script src="https://cdn.livekit.io/livekit-client.min.js"></script>
<style>
body {
background: #191731;
color: white;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
video {
width: 500px;
height: 500px;
background: #222;
}
.controls {
margin-top: 20px;
}
input[type="range"] {
width: 300px;
}
</style>
</head>
<body>
<h1>Real-Time Detection with LiveKit</h1>
<video id="video-output" autoplay muted playsinline></video>
<div class="controls">
<label>Confidence Threshold: <span id="conf-value">0.3</span></label><br />
<input type="range" min="0" max="1" step="0.01" value="0.3" id="conf-threshold" />
</div>
<script>
const token = "wss://myvoiceassistant-h4f2cbzj.livekit.cloud"; // Replace with server-side injection or hardcode for dev
const confSlider = document.getElementById("conf-threshold");
const confValue = document.getElementById("conf-value");
const videoOutput = document.getElementById("video-output");
async function startLiveKit() {
const room = new Livekit.Room();
await room.connect("wss://your-livekit-server-url", token);
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const track = await Livekit.createLocalVideoTrack({ deviceId: mediaStream.getVideoTracks()[0].getSettings().deviceId });
await room.localParticipant.publishTrack(track);
videoOutput.srcObject = new MediaStream([track.mediaStreamTrack]);
confSlider.addEventListener("input", (e) => {
confValue.textContent = e.target.value;
fetch("/input_hook", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
webrtc_id: "livekit_user", // Static ID for now
conf_threshold: parseFloat(e.target.value),
}),
});
});
}
startLiveKit();
</script>
</body>
</html>
|