Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>HTML 5 Boilerplate</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <canvas id="canvasOutput"></canvas> | |
| <video autoplay="true" id="videoElement"></video> | |
| </div> | |
| <div class='video'> | |
| <img id="image"> | |
| </div> | |
| <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> | |
| <script> | |
| function capture(video, scaleFactor) { | |
| if (scaleFactor == null) { | |
| scaleFactor = 1; | |
| } | |
| var w = video.videoWidth * scaleFactor; | |
| var h = video.videoHeight * scaleFactor; | |
| var canvas = document.createElement('canvas'); | |
| canvas.width = w; | |
| canvas.height = h; | |
| var ctx = canvas.getContext('2d'); | |
| ctx.drawImage(video, 0, 0, w, h); | |
| return canvas; | |
| } | |
| var socket = io(); | |
| socket.on('connect', function () { | |
| console.log("Connection has been successfully established with socket.", socket.connected) | |
| }); | |
| const video = document.querySelector("#videoElement"); | |
| video.width = 500; | |
| video.height = 375; | |
| navigator.mediaDevices.getUserMedia({video: true}) | |
| .then(function (stream) { | |
| video.srcObject = stream; | |
| video.play(); | |
| }) | |
| .catch(function (error) { | |
| console.log('getUserMedia error: ', error); | |
| console.log("Permission denied or something went wrong!"); | |
| }); | |
| const FPS = 22; | |
| setInterval(() => { | |
| var type = "image/jpg" | |
| var video_element = document.getElementById("videoElement") | |
| var frame = capture(video_element, 1) | |
| var data = frame.toDataURL(type); | |
| //data = data.replace('data:' + type + ';base64,', ''); | |
| socket.emit('image', data); | |
| }, 10000 / FPS); | |
| socket.on('response_back', function (response) { | |
| console.log(response); | |
| // Handle response if needed | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>HTML 5 Boilerplate</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <canvas id="canvasOutput"></canvas> | |
| <video autoplay="true" id="videoElement"></video> | |
| </div> | |
| <div class='video'> | |
| <img id="image"> | |
| </div> | |
| <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> | |
| <script> | |
| function capture(video, scaleFactor) { | |
| if (scaleFactor == null) { | |
| scaleFactor = 1; | |
| } | |
| var w = video.videoWidth * scaleFactor; | |
| var h = video.videoHeight * scaleFactor; | |
| var canvas = document.createElement('canvas'); | |
| canvas.width = w; | |
| canvas.height = h; | |
| var ctx = canvas.getContext('2d'); | |
| ctx.drawImage(video, 0, 0, w, h); | |
| return canvas; | |
| } | |
| var socket = io(); | |
| socket.on('connect', function () { | |
| console.log("Connection has been successfully established with socket.", socket.connected) | |
| }); | |
| const video = document.querySelector("#videoElement"); | |
| video.width = 500; | |
| video.height = 375; | |
| navigator.mediaDevices.getUserMedia({video: true}) | |
| .then(function (stream) { | |
| video.srcObject = stream; | |
| video.play(); | |
| }) | |
| .catch(function (error) { | |
| console.log('getUserMedia error: ', error); | |
| console.log("Permission denied or something went wrong!"); | |
| }); | |
| const FPS = 22; | |
| setInterval(() => { | |
| var type = "image/jpg" | |
| var video_element = document.getElementById("videoElement") | |
| var frame = capture(video_element, 1) | |
| var data = frame.toDataURL(type); | |
| //data = data.replace('data:' + type + ';base64,', ''); | |
| socket.emit('image', data); | |
| }, 10000 / FPS); | |
| socket.on('response_back', function (response) { | |
| console.log(response); | |
| // Handle response if needed | |
| }); | |
| </script> | |
| </body> | |
| </html> | |