<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Video Streaming</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<script>
const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Access the user's camera
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
video.srcObject = stream;
})
.catch((error) => {
console.error('Error accessing camera:', error);
});
// Open WebSocket connection to the backend
const socket = new WebSocket('ws://localhost:8080/api/v1/baby-care/emotional/video-process');
socket.binaryType = 'blob'; // Set binary type for sending binary data arraybuffer
socket.onopen = () => {
console.log('WebSocket connection opened');
// Send video frames over WebSocket
video.addEventListener('play', () => {
const processVideo = () => {
if (video.paused || video.ended) {
return;
}
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => {
socket.send(blob);
}, 'image/jpeg');
setTimeout(processVideo, 100);
};
processVideo();
});
}
socket.onclose = (event) => {
console.log('WebSocket connection closed with code:', event.code);
console.log('Reason:', event.reason);
};
socket.onerror = (error) => {
console.error('WebSocket error:', error);
};
// Convert data URI to Blob
function dataURItoBlob(dataURI) {
const byteString = atob(dataURI.split(',')[1]);
const arrayBuffer = new ArrayBuffer(byteString.length);
const byteArray = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
byteArray[i] = byteString.charCodeAt(i);
}
return new Blob([arrayBuffer], { type: 'image/jpeg' });
}
</script>
</body>
</html>