younes-Raymond
commented
1 year ago const controls = document.querySelector('.controls'); const cameraOptions = document.querySelector('.video-options>select'); const video = document.querySelector('video'); const canvas = document.querySelector('canvas'); const screenshotImage = document.querySelector('img'); const buttons = [...controls.querySelectorAll('button')]; let streamStarted = false;
const [play, pause, screenshot] = buttons;
const constraints = { video: { width: { min: 1280, ideal: 1920, max: 2560, }, height: { min: 720, ideal: 1080, max: 1440 }, } };
const getCameraSelection = async () => {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
const options = videoDevices.map(videoDevice => {
return <option value="${videoDevice.deviceId}">${videoDevice.label}</option>;
});
cameraOptions.innerHTML = options.join('');
};
play.onclick = () => { if (streamStarted) { video.play(); play.classList.add('d-none'); pause.classList.remove('d-none'); return; }
if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) { const updatedConstraints = { ...constraints, deviceId: { exact: cameraOptions.value } }; startStream(updatedConstraints); } };
const startStream = async (constraints) => { const stream = await navigator.mediaDevices.getUserMedia(constraints); handleStream(stream); }; const handleStream = (stream) => { video.srcObject = stream; play.classList.add('d-none'); pause.classList.remove('d-none'); screenshot.classList.remove('d-none'); streamStarted = true; };
getCameraSelection();
cameraOptions.onchange = () => { const updatedConstraints = { ...constraints, deviceId: { exact: cameraOptions.value } }; startStream(updatedConstraints); };
const pauseStream = () => { video.pause(); play.classList.remove('d-none'); pause.classList.add('d-none'); };
const doScreenshot = () => { canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); screenshotImage.src = canvas.toDataURL('image/webp'); screenshotImage.classList.remove('d-none'); };
pause.onclick = pauseStream; screenshot.onclick = doScreenshot;
const sendScreenshotToServer = async () => { // Get the screenshot image file as a Blob object const screenshotBlob = await new Promise((resolve) => { canvas.toBlob(resolve, 'image/jpeg'); });
// Create a new FormData object and append the screenshot image file to it const formData = new FormData(); formData.append('screenshot', screenshotBlob, 'screenshot.jpg');
// Send the FormData object to the server using an HTTP POST request const response = await fetch('/upload-screenshot', { method: 'POST', body: formData, });
// Process the server's response if (response.ok) { console.log('Screenshot successfully sent to server'); window = location.href = "/index.html" } else { console.error('Failed to send screenshot to server'); } };
// Add a click event listener to the screenshot button that sends the screenshot to the server screenshot.addEventListener('click', sendScreenshotToServer);
sendPhotosToDataBase()
// function sendPhotosToDataBase() { // const form = document.getElementById('form');
// form.addEventListener('submit', function(event) { // event.preventDefault();
// // Get the photo file and the other form data // const photo = this.querySelector('#photo').files[0]; // const otherData = {}; // for (const key in this.elements) { // if (this.elements[key].name) { // otherData[this.elements[key].name] = this.elements[key].value; // } // }
// Create a new FormData object and append the photo file and other form data to it
// const formData = new FormData();
// formData.append('photo', photo);
// for (const key in otherData) {
// formData.append(key, otherData[key]);
// }
// console.log(formData)
// console.log(formData.has('photo')) // true
// // Create an options object with the necessary properties // const options = { // method: 'POST', // headers: { // 'Content-Type': 'multipart/form-data' // }, // body: formData // }
// // Make the POST request to the /upload endpoint // fetch('/upload', options) // .then(res => res.json()) // .then(response => console.log('Form data received')) // .catch(error => console.error('Error:', error)); // }); // }
app.post('/upload', (req, res) => { console.log(req.body)
console.log('i got request from upload'); const data = req.body; // console.log(data)
const timestamp = Date.now(); data.timestamp = timestamp;
let photoBase64 = ''; if(req.body.photo && req.body.photo.mimetype.startsWith('image/')) { // Read the image file into a Buffer const imageBuffer = fs.readFileSync(req.body.photo.path); // Convert the Buffer to a base64-encoded string const photoBase64 = imageBuffer.toString('base64'); // Store the base64-encoded string in the data object console.log(data.photo) data.photo = photoBase64; } console.log(data)
database2.insert(data, (err, doc) => { if (err) { console.error(err); res.status(500).send('Error saving data to the database'); } if(photoBase64) { res.json({ status: 'success', timestamp: timestamp, photo: photoBase64, }); } else { res.json({ status: 'success', timestamp: timestamp, photo: photoBase64 }); } }); });