Spaces:
Sleeping
Sleeping
Update templates/test_streaming_index.html
Browse files
templates/test_streaming_index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<title>Live Stream</title>
|
|
@@ -32,4 +32,57 @@
|
|
| 32 |
});
|
| 33 |
</script>
|
| 34 |
</body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
</html>
|
|
|
|
|
|
| 1 |
+
<!-- <!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<title>Live Stream</title>
|
|
|
|
| 32 |
});
|
| 33 |
</script>
|
| 34 |
</body>
|
| 35 |
+
</html> -->
|
| 36 |
+
|
| 37 |
+
<!DOCTYPE html>
|
| 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 |
+
// Try accessing rear camera
|
| 58 |
+
navigator.mediaDevices.getUserMedia({
|
| 59 |
+
video: { facingMode: { ideal: "environment" } }, // back camera
|
| 60 |
+
audio: false
|
| 61 |
+
}).then(stream => {
|
| 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 |
+
|