Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Camera to Data URL</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.min.js"></script> | |
| </head> | |
| <body> | |
| <video style="display:none" id="video" width="640" height="480" autoplay></video> | |
| <canvas id="canvas" style="display:block;"></canvas> | |
| <script> | |
| var socket = io('http://127.0.0.1:7860'); | |
| // Get access to the user's camera | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(function (stream) { | |
| // Attach the stream to the video element | |
| var video = document.getElementById('video'); | |
| video.srcObject = stream; | |
| }) | |
| .catch(function (err) { | |
| console.log('Error accessing camera:', err); | |
| }); | |
| function dataURItoBlob(dataURI) { | |
| var byteString = atob(dataURI.split(',')[1]); | |
| var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; | |
| var ab = new ArrayBuffer(byteString.length); | |
| var ia = new Uint8Array(ab); | |
| for (var i = 0; i < byteString.length; i++) { | |
| ia[i] = byteString.charCodeAt(i); | |
| } | |
| return new Blob([ab], { type: mimeString }); | |
| } | |
| function snap() { | |
| var canvas = document.getElementById('canvas'); | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); | |
| // Convert the canvas image to a data URL | |
| var dataUrl = canvas.toDataURL("image/jpeg",0.2); | |
| //var jpeg = dataURItoBlob(dataUrl); | |
| //console.log(jpeg) | |
| //console.log(jpeg) | |
| // Do something with the data URL, such as display it in an image element | |
| //document.getElementById('image').src = dataUrl; | |
| socket.emit('video_frame', dataUrl); | |
| console.log("emitted") | |
| setTimeout(snap, 100) | |
| }; | |
| </script> | |
| <button id="snap" onclick="snap()">Snap</button> | |
| <img id="image" /> | |
| </body> | |
| </html> |