File size: 2,926 Bytes
bac6aab 63f5b9c bac6aab 63f5b9c bac6aab 63f5b9c bac6aab 63f5b9c bac6aab 63f5b9c bac6aab 63f5b9c |
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 |
const video = document.querySelector("#videoElement");
let currentFacingMode = "user"; // "user" = front, "environment" = back
let stream = null;
// Initialize camera with given facing mode
function startCamera(facingMode = "user") {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
const constraints = {
video: {
facingMode: { exact: facingMode }
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then((newStream) => {
stream = newStream;
video.srcObject = stream;
// ✅ iOS fix: playsinline and manual play
video.setAttribute("playsinline", true);
video.play().catch(err => console.warn("Autoplay issue:", err));
})
.catch((err) => {
console.warn("Exact facingMode failed, trying fallback. Error:", err);
// Fallback if iOS/older browser doesn’t support exact
navigator.mediaDevices.getUserMedia({ video: true })
.then((fallbackStream) => {
stream = fallbackStream;
video.srcObject = stream;
video.setAttribute("playsinline", true);
video.play().catch(err => console.warn("Autoplay issue:", err));
})
.catch((error) => {
console.error("Error accessing camera:", error);
alert("Camera access failed. Please allow camera permissions.");
});
});
}
// Flip between front and back camera
function toggleCamera() {
currentFacingMode = currentFacingMode === "user" ? "environment" : "user";
startCamera(currentFacingMode);
}
// Capture current frame from video, show it, and send to backend
function captureAndSend() {
if (!stream) {
alert("Camera is not started yet!");
return;
}
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL("image/jpeg");
document.getElementById("snapshotImage").src = dataUrl;
fetch("https://prime810-facefeel.hf.space/process_image", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ image: dataUrl })
})
.then(response => response.json())
.then(data => {
document.getElementById("emojiDisplay").innerHTML =
`<img src="${data.emoji}" style="width:200px; border-radius:10px;">`;
document.getElementById("emotionText").textContent =
`Emotion: ${data.emotion}`;
const link = document.getElementById("downloadEmoji");
link.href = data.emoji;
link.style.display = "inline-block";
const sound = document.getElementById("emojiSound");
if (sound) sound.play();
})
.catch(error => {
console.error("Error:", error);
alert("Failed to get emoji. Is your backend running?");
});
}
// ✅ Start camera automatically on page load
startCamera();
|