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;
});
使用方法:
参考: