Spaces:
Sleeping
Sleeping
Update templates/test_streaming_index.html
Browse files
templates/test_streaming_index.html
CHANGED
|
@@ -38,51 +38,39 @@
|
|
| 38 |
<html>
|
| 39 |
<head>
|
| 40 |
<title>Live Stream</title>
|
| 41 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 42 |
-
<style>
|
| 43 |
-
video, img {
|
| 44 |
-
max-width: 100%;
|
| 45 |
-
border: 1px solid black;
|
| 46 |
-
}
|
| 47 |
-
</style>
|
| 48 |
</head>
|
| 49 |
<body>
|
| 50 |
<h1>Live Camera Stream</h1>
|
| 51 |
-
<video id="video" autoplay muted playsinline></video>
|
| 52 |
-
<img id="serverStream" src="/video_feed">
|
| 53 |
|
| 54 |
<script>
|
| 55 |
const video = document.getElementById('video');
|
| 56 |
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
video.srcObject = stream;
|
| 63 |
-
const canvas = document.createElement('canvas');
|
| 64 |
-
const context = canvas.getContext('2d');
|
| 65 |
-
|
| 66 |
-
video.addEventListener('loadedmetadata', () => {
|
| 67 |
-
canvas.width = video.videoWidth;
|
| 68 |
-
canvas.height = video.videoHeight;
|
| 69 |
|
| 70 |
setInterval(() => {
|
|
|
|
|
|
|
| 71 |
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
| 72 |
const dataUrl = canvas.toDataURL('image/jpeg');
|
| 73 |
-
|
| 74 |
fetch('/upload_frame', {
|
| 75 |
method: 'POST',
|
| 76 |
headers: { 'Content-Type': 'application/json' },
|
| 77 |
body: JSON.stringify({ image: dataUrl })
|
| 78 |
});
|
| 79 |
-
}, 100);
|
|
|
|
|
|
|
|
|
|
|
|
|
| 80 |
});
|
| 81 |
-
}).catch(err => {
|
| 82 |
-
alert("Could not access the camera: " + err.message);
|
| 83 |
-
console.error("Camera error:", err);
|
| 84 |
-
});
|
| 85 |
</script>
|
| 86 |
</body>
|
| 87 |
</html>
|
| 88 |
|
|
|
|
|
|
| 38 |
<html>
|
| 39 |
<head>
|
| 40 |
<title>Live Stream</title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 41 |
</head>
|
| 42 |
<body>
|
| 43 |
<h1>Live Camera Stream</h1>
|
| 44 |
+
<video id="video" autoplay muted playsinline style="max-width: 80%; border: 1px solid black;"></video>
|
| 45 |
+
<img id="serverStream" src="/video_feed" style="max-width: 80%; border:1px solid black;">
|
| 46 |
|
| 47 |
<script>
|
| 48 |
const video = document.getElementById('video');
|
| 49 |
|
| 50 |
+
navigator.mediaDevices.getUserMedia({ video: true })
|
| 51 |
+
.then(stream => {
|
| 52 |
+
video.srcObject = stream;
|
| 53 |
+
const canvas = document.createElement('canvas');
|
| 54 |
+
const context = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
|
| 56 |
setInterval(() => {
|
| 57 |
+
canvas.width = video.videoWidth;
|
| 58 |
+
canvas.height = video.videoHeight;
|
| 59 |
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
| 60 |
const dataUrl = canvas.toDataURL('image/jpeg');
|
|
|
|
| 61 |
fetch('/upload_frame', {
|
| 62 |
method: 'POST',
|
| 63 |
headers: { 'Content-Type': 'application/json' },
|
| 64 |
body: JSON.stringify({ image: dataUrl })
|
| 65 |
});
|
| 66 |
+
}, 100); // ~10 FPS
|
| 67 |
+
})
|
| 68 |
+
.catch(err => {
|
| 69 |
+
alert('Camera access denied or unavailable.');
|
| 70 |
+
console.error(err);
|
| 71 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
</script>
|
| 73 |
</body>
|
| 74 |
</html>
|
| 75 |
|
| 76 |
+
|