Tengo un programa simple donde un usuario se graba a sí mismo (a través de su cámara web) y ese video se almacena en la misma página HTML. ¿Alguien puede decirme cómo puedo agregar a lo que tengo a continuación para grabar y guardar el video?
#HTML <button id="speak_button"></button> #click to start video <div id="circle"><p id="submit_button">Submit</p></div> #click to end video <video" id="video" width="180" height="140" autoplay muted></video> #where webcam is <video id="second_video" width="180" height="140" controls></video> #where I want recorded video to be #JAVASCRIPT <script> let video = document.getElementById("video"); let mediaRecorder; navigator.mediaDevices.getUserMedia({video: true, audio: true}) .then(function(stream){ video.srcObject = stream; video.play(); mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm"}); mediaRecorder.ondatavailable = function(event) { if (event.data.size > 0) { const reader = new window.FileReader(); reader.readAsDataURL(event.data); reader.onloadend = function() { let base64 = reader.result.split('base64,')[1]; let recording = document.getElementById('second_video'); recording.src = "data:video/webm;base64," + base64; recording.type = "video/webm"; recording.play(); }; }; }; }); document.getElementById("speak_button").addEventListener("click", function() { mediaRecorder.start(); stream.record(); }); document.getElementById("submit_button").addEventListener("click", function() { mediaRecorder.stop(); stream.stop(); var superBuffer = new Blob(recordedChunks); document.getElementById("second_video") = window.URL.createObjectURL(superBuffer); }); </script>¡Gracias!
CÓDIGO HTML
<main id="container"> <video id="gum" playsinline autoplay muted></video> <video id="recorded" playsinline loop></video> <section> <button id="start">Start camera</button> <button id="record" disabled>Record</button> <button id="play" disabled>Play</button> </section> </main> <script src="main.js"></script>código principal.js
let mediaRecorder; let recordedBlobs; const errorMsgElement = document.querySelector("span#errorMsg"); const recordedVideo = document.querySelector("video#recorded"); const recordButton = document.querySelector("button#record"); const playButton = document.querySelector("button#play"); recordButton.addEventListener("click", () => { if (recordButton.textContent === "Record") return startRecording(); stopRecording(); recordButton.textContent = "Record"; playButton.disabled = false; }); playButton.addEventListener("click", () => { const superBuffer = new Blob(recordedBlobs, { type: "video/webm" }); recordedVideo.src = null; recordedVideo.srcObject = null; recordedVideo.src = window.URL.createObjectURL(superBuffer); recordedVideo.controls = true; recordedVideo.play(); }); function handleDataAvailable(event) { if (event.data && event.data.size > 0) recordedBlobs.push(event.data); } function startRecording() { recordedBlobs = []; let options = { mimeType: "video/webm;codecs=vp9,opus" }; try { mediaRecorder = new MediaRecorder(window.stream, options); } catch (e) { console.error("Exception while creating MediaRecorder:", e); errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify( e )}`; return; } recordButton.textContent = "Stop Recording"; playButton.disabled = true; mediaRecorder.onstop = (event) => console.log(event); mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(); console.log("MediaRecorder started", mediaRecorder); } function stopRecording() { mediaRecorder.stop(); } document.querySelector("button#start").addEventListener("click", async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true, }); recordButton.disabled = false; window.stream = stream; const gumVideo = document.querySelector("video#gum"); gumVideo.srcObject = stream; } catch (e) { console.error("navigator.getUserMedia error:", e); errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`; } });