Javascript 录制（并停止）已在运行的网络摄像头/媒体流

我已经创建了一个最小的WebRTC测试站点，它能够请求用户的网络摄像头/音频流，对其进行录制，并在录制停止后播放

演示：

编辑1：

由于这一切都发生在一个Promise

navigator.mediaDevices.getUserMedia（）

中，所以我想知道，是否真的可以检测和保存正在进行的流，并（a）记录它，以及（b）停止并保存它

---

1 WebRTC在编辑视图中时，由于某些原因无法在jsbin中工作…

如果您不使用框架，并且希望使用vanilla JS，那么最好的步骤是将流对象固定到全局窗口

预览流 您应该将mediaRecorder放在窗口对象中，以便稍后停止它

记录流 停止录制并预览录制 您需要另一个视频元素来播放录制的内容

#视频播放

const stopWebcamRecorder = () => {
  if ("mediaRecorder" in window && mediaRecorder.state === "recording") {
    mediaRecorder.stop();
    console.log(mediaRecorder.state);
    mediaRecorder.onstop = () => {
      let blob = new Blob(dataChunks, { type: "video/mp4;" });
      dataChunks = [];
      let videoURL = window.URL.createObjectURL(blob);
      const videoPlayback = document.getElementById("video-playback");
      videoPlayback.src = videoURL;
    };
  }
};

---

将

stream

放入全局变量中？是的，我这样做了。。。我认为这是我唯一没有任何JS框架/库的解决方案。我不太理解你的问题。你所说的“已经在运行”流是什么意思？您之前在同一文档中创建的流？你能举个例子吗？

const hideWebcamStream = () => localStream.getTracks().forEach(track => track.stop());

const startWebcamRecorder = () => {
  // check if localStream is in window and if it is active
  if ("localStream" in window && localStream.active) {
    // save the mediaRecorder also to Window in order independently stop it
    window.mediaRecorder = new MediaRecorder(localStream);
    window.dataChunks = [];
    mediaRecorder.start();
    console.log(mediaRecorder.state);
    mediaRecorder.ondataavailable = e => dataChunks.push(e.data);
  }
};

const stopWebcamRecorder = () => {
  if ("mediaRecorder" in window && mediaRecorder.state === "recording") {
    mediaRecorder.stop();
    console.log(mediaRecorder.state);
    mediaRecorder.onstop = () => {
      let blob = new Blob(dataChunks, { type: "video/mp4;" });
      dataChunks = [];
      let videoURL = window.URL.createObjectURL(blob);
      const videoPlayback = document.getElementById("video-playback");
      videoPlayback.src = videoURL;
    };
  }
};