File size: 2,756 Bytes
a9f61e8
7b107a3
 
 
 
 
 
a80a58b
7b107a3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a9f61e8
 
 
 
 
 
 
 
 
6754f55
 
a9f61e8
 
 
 
6754f55
 
 
 
 
a9f61e8
 
6754f55
 
a9f61e8
 
 
 
 
 
 
6754f55
 
 
 
 
a9f61e8
 
 
7b107a3
a9f61e8
6754f55
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
<!-- <!DOCTYPE html>
<html>
<head>
    <title>Live Stream</title>
</head>
<body>
    <h1>Live Camera Stream</h1>
    <video id="video" autoplay muted playsinline style="max-width: 80%; border: 1px solid black;"></video>
    <img id="serverStream" src="/video_feed" style="max-width: 80%; border:1px solid black;">
    <script>
        const video = document.getElementById('video');

        // Access webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');

                // Capture and send frames
                setInterval(() => {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                    const dataUrl = canvas.toDataURL('image/jpeg');
                    fetch('/upload_frame', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ image: dataUrl })
                    });
                }, 100); // Send every 100ms (~10 FPS)
            });
    </script>
</body>
</html> -->

<!DOCTYPE html>
<html>
<head>
    <title>Live Stream</title>
</head>
<body>
    <h1>Live Camera Stream</h1>
    <video id="video" autoplay muted playsinline style="max-width: 80%; border: 1px solid black;"></video>
    <img id="serverStream" src="/video_feed" style="max-width: 80%; border:1px solid black;">

    <script>
        const video = document.getElementById('video');

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');

                setInterval(() => {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                    const dataUrl = canvas.toDataURL('image/jpeg');
                    fetch('/upload_frame', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ image: dataUrl })
                    });
                }, 100); // ~10 FPS
            })
            .catch(err => {
                alert('Camera access denied or unavailable.');
                console.error(err);
            });
    </script>
</body>
</html>