【问题标题】：Record (and stop) an already running Webcam/Media Stream记录（并停止）已经运行的网络摄像头/媒体流
【发布时间】：2020-08-25 13:14:42
【问题描述】：

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

演示：https://output.jsbin.com/tabosipefo/

编辑¹：https://jsbin.com/tabosipefo/edit?html,console,output

由于这一切都发生在一个 Promise navigator.mediaDevices.getUserMedia() 中，我想知道，是否真的有可能检测和正在进行的流并 (a) 记录它，以及 (b) 停止并保存它。

¹ 由于某种原因，WebRTC 在编辑视图中无法在 jsbin 中工作...

【问题讨论】：

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

标签： javascript webrtc webcam getusermedia

【解决方案1】：

如果你不使用框架并且想使用 vanilla JS，最好的方法是将流对象附加到全局窗口。

预览流

const showWebcamStream = () => {
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then(stream => {
      window.localStream = stream; // ⭠ tack it to the window object

      // grab the <video> object
      const video = document.querySelector("#video-preview");
      video.srcObject = stream;

      // Display stream
      video.onloadedmetadata = () => video.play();
    })
    .catch(err => console.log(err.name, err.message));
};

现在视频将显示在video 元素中（id：#videp-preview）。

停止流

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

您应该将 mediaRecorder 放在 window 对象中以便稍后停止它。

录制流

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);
  }
};

停止录制并预览录制

你需要另一个视频元素来播放你的录音#video-playback

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;
    };
  }
};

【讨论】：