<video>的录制

最新推荐文章于 2024-04-07 11:19:24 发布

xosg

最新推荐文章于 2024-04-07 11:19:24 发布

阅读量1.3k

点赞数

文章标签： js web ffmpeg java html

本文链接：https://blog.csdn.net/zipack/article/details/118282882

版权

MediaRecorder是最新推出的API，可以实现对MediaStream对象对录制。以前经常苦于H5视频的下载，因为它们经常使用blob:开头的url，但现在可以通过简单的API录制一个<video>元素，目前在Bilibili和YouTube都通过了测试。

//   ffmpeg -i input.webm -c copy output.mp4
const record = (HTMLVideoElement.prototype.record = async function (
  duration_seconds = 60
) {
  const video =
    this instanceof HTMLVideoElement ? this : document.querySelector("video");
  video.captureStream = video.captureStream || video.mozCaptureStream;
  const stream = video.captureStream();
  // stream.removeTrack(stream.getAudioTracks()[0]);
  const recorder = new MediaRecorder(stream, {
    mimeType: "video/webm",
  });


  setTimeout(
    () => recorder.state === "recording" && recorder.stop(),
    duration_seconds * 1000
  );


  console.log(`recording for ${duration_seconds} seconds...`);


  const blobs = [];
  await new Promise((resolve, reject) => {
    // The stop event is thrown either as a result of the MediaRecorder.stop() method being invoked, or when the media stream being captured ends.
    // In each case, the stop event is preceded by a dataavailable event, making the Blob captured up to that point available for you to use in your application.
    recorder.onstop = resolve;
    recorder.onerror = reject;
    recorder.ondataavailable = (event) => blobs.push(event.data);
    recorder.start();
  });


  // recorder.stream.getTracks().forEach((track) => track.stop());


  const webm = new Blob(blobs, { type: "video/webm" });
  // The URL lifetime is tied to the document in the window on which it was created
  open(URL.createObjectURL(webm));
  // URL.revokeObjectURL(href);   // 否则不好下载


  return webm;
});

使用方法：