const recordButton = document.getElementById(« start-recording »);
const stopButton = document.getElementById(« stop-recording »);
const cancelButton = document.getElementById(« cancel-recording »);
const submitButton = document.getElementById(« submit-video »);
const playButton = document.getElementById(« play-video »);
const videoPreview = document.getElementById(« video-preview »);
let mediaRecorder;
let recordedChunks = [];
let stream;
let isPlaying = false;
// Démarrer le flux vidéo dès le chargement de la page
(async function initializeCamera() {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoPreview.srcObject = stream;
recordButton.disabled = false;
} catch (error) {
console.error(« Erreur d’accès à la caméra : », error);
alert(« Impossible d’accéder à la caméra. Veuillez vérifier vos paramètres. »);
}
})();
recordButton.addEventListener(« click », startRecording);
stopButton.addEventListener(« click », stopRecording);
cancelButton.addEventListener(« click », cancelRecording);
submitButton.addEventListener(« click », submitVideo);
playButton.addEventListener(« click », togglePlayback);
function startRecording() {
recordedChunks = [];
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => recordedChunks.push(event.data);
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: « video/webm » });
const videoURL = URL.createObjectURL(blob);
videoPreview.srcObject = null; // Stopper le flux direct
videoPreview.src = videoURL; // Charger la vidéo enregistrée
videoPreview.controls = false; // Désactiver les contrôles natifs
playButton.disabled = false;
submitButton.disabled = false;
};
mediaRecorder.start();
recordButton.disabled = true;
stopButton.disabled = false;
cancelButton.disabled = false;
}
function stopRecording() {
mediaRecorder.stop();
stopButton.disabled = true;
cancelButton.disabled = true;
}
function cancelRecording() {
recordedChunks = [];
resetInterface();
}
function togglePlayback() {
if (isPlaying) {
videoPreview.pause();
playButton.innerHTML = « ▶️ »;
} else {
videoPreview.play();
playButton.innerHTML = « ⏸️ »;
}
isPlaying = !isPlaying;
}
function submitVideo() {
const formData = new FormData();
const videoBlob = new Blob(recordedChunks, { type: « video/webm » });
formData.append(« video », videoBlob, « video.webm »);
fetch(« https://cegavira.com/wp-content/uploads/videos_uploads/upload_video.php », {
method: « POST »,
body: formData,
})
.then((response) => response.json())
.then((data) => {
if (data.success) {
alert(« Vidéo envoyée avec succès ! »);
resetInterface();
} else {
alert(« Erreur lors de l’envoi de la vidéo. »);
}
})
.catch((error) => {
console.error(« Erreur d’envoi : », error);
});
}
function resetInterface() {
videoPreview.srcObject = stream;
videoPreview.controls = false;
videoPreview.src = « »;
videoPreview.play();
recordButton.disabled = false;
stopButton.disabled = true;
cancelButton.disabled = true;
submitButton.disabled = true;
playButton.disabled = true;
playButton.innerHTML = « ▶️ »;
isPlaying = false;
}