如何在浏览器中录制网络摄像头并将视频存储在同一页上？

Question

我有一个简单的程序，用户可以通过他们的网络摄像头录制自己的视频，并将该视频存储在同一HTML页面上。请问有人能告诉我如何在下面的代码中添加记录和保存视频的功能吗？

#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>

谢谢！

- spin99

Answer 1

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>

main.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()}`;
  }
});

- Ashirbad Panigrahi