Hugging Face's logo

Spaces:
AyoubZolodick
/
sign_final
Sleeping

App Files Community
zolodickk commited on
Commit
330bf81
·
verified ·
1 Parent(s): daa1383

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +121 -9
templates/index.html CHANGED
@@ -3,16 +3,128 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LIVE STREAMING</title>
7
- <style>
8
- a {
9
- font-size: 30px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  }
11
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
  <body>
14
- <video id="remoteVideo" autoplay></video>
15
- <a href="{{ url_for('video_feed') }}" target="_self">Link to Video Feed</a>
16
- <script src="{{ url_for('static', filename='main.js') }}"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </body>
18
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
+ <title>HTML 5 Boilerplate</title>
8
+ </head>
9
+ <body>
10
+ <div id="container">
11
+ <canvas id="canvasOutput"></canvas>
12
+ <video autoplay="true" id="videoElement"></video>
13
+ </div>
14
+
15
+ <div class='video'>
16
+ <img id="image">
17
+ </div>
18
+
19
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js" integrity="sha512-9mpsATI0KClwt+xVZfbcf2lJ8IFBAwsubJ6mI3rtULwyM3fBmQFzj0It4tGqxLOGQwGfJdk/G+fANnxfq9/cew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
20
+ <script>
21
+ function capture(video, scaleFactor) {
22
+ if (scaleFactor == null) {
23
+ scaleFactor = 1;
24
  }
25
+ var w = video.videoWidth * scaleFactor;
26
+ var h = video.videoHeight * scaleFactor;
27
+ var canvas = document.createElement('canvas');
28
+ canvas.width = w;
29
+ canvas.height = h;
30
+ var ctx = canvas.getContext('2d');
31
+ ctx.drawImage(video, 0, 0, w, h);
32
+ return canvas;
33
+ }
34
+ var socket = io();
35
+ socket.on('connect', function () {
36
+ console.log("Connection has been successfully established with socket.", socket.connected)
37
+ });
38
+ const video = document.querySelector("#videoElement");
39
+ video.width = 500;
40
+ video.height = 375;
41
+ navigator.mediaDevices.getUserMedia({video: true})
42
+ .then(function (stream) {
43
+ video.srcObject = stream;
44
+ video.play();
45
+ })
46
+ .catch(function (error) {
47
+ console.log('getUserMedia error: ', error);
48
+ console.log("Permission denied or something went wrong!");
49
+ });
50
+ const FPS = 22;
51
+ setInterval(() => {
52
+ var type = "image/jpg"
53
+ var video_element = document.getElementById("videoElement")
54
+ var frame = capture(video_element, 1)
55
+ var data = frame.toDataURL(type);
56
+ //data = data.replace('data:' + type + ';base64,', '');
57
+ socket.emit('image', data);
58
+ }, 10000 / FPS);
59
+ socket.on('response_back', function (response) {
60
+ console.log(response);
61
+ // Handle response if needed
62
+ });
63
+ </script>
64
+ </body>
65
+ </html>
66
+ <!DOCTYPE html>
67
+ <html lang="en">
68
+ <head>
69
+ <meta charset="UTF-8">
70
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
71
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
72
+ <title>HTML 5 Boilerplate</title>
73
  </head>
74
  <body>
75
+ <div id="container">
76
+ <canvas id="canvasOutput"></canvas>
77
+ <video autoplay="true" id="videoElement"></video>
78
+ </div>
79
+
80
+ <div class='video'>
81
+ <img id="image">
82
+ </div>
83
+
84
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js" integrity="sha512-9mpsATI0KClwt+xVZfbcf2lJ8IFBAwsubJ6mI3rtULwyM3fBmQFzj0It4tGqxLOGQwGfJdk/G+fANnxfq9/cew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
85
+ <script>
86
+ function capture(video, scaleFactor) {
87
+ if (scaleFactor == null) {
88
+ scaleFactor = 1;
89
+ }
90
+ var w = video.videoWidth * scaleFactor;
91
+ var h = video.videoHeight * scaleFactor;
92
+ var canvas = document.createElement('canvas');
93
+ canvas.width = w;
94
+ canvas.height = h;
95
+ var ctx = canvas.getContext('2d');
96
+ ctx.drawImage(video, 0, 0, w, h);
97
+ return canvas;
98
+ }
99
+ var socket = io();
100
+ socket.on('connect', function () {
101
+ console.log("Connection has been successfully established with socket.", socket.connected)
102
+ });
103
+ const video = document.querySelector("#videoElement");
104
+ video.width = 500;
105
+ video.height = 375;
106
+ navigator.mediaDevices.getUserMedia({video: true})
107
+ .then(function (stream) {
108
+ video.srcObject = stream;
109
+ video.play();
110
+ })
111
+ .catch(function (error) {
112
+ console.log('getUserMedia error: ', error);
113
+ console.log("Permission denied or something went wrong!");
114
+ });
115
+ const FPS = 22;
116
+ setInterval(() => {
117
+ var type = "image/jpg"
118
+ var video_element = document.getElementById("videoElement")
119
+ var frame = capture(video_element, 1)
120
+ var data = frame.toDataURL(type);
121
+ //data = data.replace('data:' + type + ';base64,', '');
122
+ socket.emit('image', data);
123
+ }, 10000 / FPS);
124
+ socket.on('response_back', function (response) {
125
+ console.log(response);
126
+ // Handle response if needed
127
+ });
128
+ </script>
129
  </body>
130
+ </html>