Spaces:
Sleeping
Sleeping
File size: 4,484 Bytes
9f76838 b3c4b8c 0135475 d08eaec 330bf81 9f76838 330bf81 d08eaec 330bf81 978f510 330bf81 |
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE 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>
<!DOCTYPE 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>
|