时间戳

首页 > 解决方案 > 用javascript屏幕录制覆盖面部然后保存？

javascript - 用javascript屏幕录制覆盖面部然后保存？

问题描述

我正在用 JavaScript 制作屏幕录像机。我从https://dev.to/sebastianstamm/screen-recording-in-10-lines-of-vanilla-js-3bo8获得了到目前为止的代码。

有没有办法录下人脸，然后把用户人脸的视频和录屏重叠起来，保存在.webm文件中？我发现的帖子的完整代码是这样的：

const start = document.getElementById("start");
const stop = document.getElementById("stop");
const video = document.querySelector("video");
let recorder, stream;

async function startRecording() {
  stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: "screen" }
  });
  recorder = new MediaRecorder(stream);

  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = e => {
    const completeBlob = new Blob(chunks, { type: chunks[0].type });
    video.src = URL.createObjectURL(completeBlob);
  };

  recorder.start();
}

start.addEventListener("click", () => {
  start.setAttribute("disabled", true);
  stop.removeAttribute("disabled");

  startRecording();
});

stop.addEventListener("click", () => {
  stop.setAttribute("disabled", true);
  start.removeAttribute("disabled");

  recorder.stop();
  stream.getVideoTracks()[0].stop();
});

和 HTML：

<button id="start">
      Start Recording
    </button>
    <button id="stop" disabled>
      Stop Recording
    </button>
    <video autoplay />

标签： javascript

解决方案

您可以录制网络摄像头镜头（例如此处），并按照相同的方式录制屏幕镜头。我认为如何将它们结合起来比较棘手。最简单的方法是将单独的提要下载为两个不同的文件，并将它们与类似ffmpeg或任何视频编辑器的东西结合起来。否则，您可能会使用画布（如此处），或者某些第三方 Javascript 库已经为您完成了这项工作。

推荐阅读