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;
});
使用方法：\
-
推荐Chrome或者Firefox\
-
在浏览器控制台输入以上代码，定义了一个record函数\
-
网页检查元素，找到<video>元素，并存储为变量
-
播放视频，运行代码：\
-
await video.record(duration)
-
在新打开的网页中预览，或下载视频\
-
如果网页只有1个<video>则不用寻找，直接：await record(10)
-
目前浏览器似乎只支持webm格式的视频，可通过ffmpeg转换
参考：\
