我正在开发一个客户端项目，该项目允许用户提供视频文件并对其应用基本操作。我正在尝试可靠地从视频中提取帧。目前<video>，我正在将选定的视频加载到其中，然后按如下方式拉出每一帧：
<video>到一个<canvas>.toDataUrl()这是一个相当低效的过程，更具体地说，事实证明这是不可靠的，因为我经常卡住帧。这似乎是因为它<video>在绘制到画布之前没有更新实际元素。
我宁愿不必为了分割帧而将原始视频上传到服务器，然后将它们下载回客户端。
任何关于更好的方法的建议都非常感谢。唯一的警告是我需要它与浏览器支持的任何格式一起使用（在 JS 中解码不是一个很好的选择）。
[2021更新]：自从这个问题（和答案）第一次发布以来，这方面的事情已经发生了变化，终于到了更新的时候了；这里公开的方法已经过时了，但幸运的是，一些新的或传入的 API 可以帮助我们更好地提取视频帧：
这个新的 API 释放了对媒体解码器和编码器的访问，使我们能够访问来自视频帧（YUV 平面）的原始数据，这对于许多应用程序来说可能比渲染帧有用得多；而对于需要渲染帧的人，这个API暴露的VideoFrame接口可以直接绘制到<canvas>元素上，也可以转成ImageBitmap，避免了MediaElement的慢速路由。
然而，有一个问题，除了它目前的低支持之外，这个 API 需要输入已经被解复用。
网上有一些解复用器，例如对于 MP4 视频，GPAC 的 mp4box.js会很有帮助。
完整的示例可以在提案的 repo 中找到。
关键部分包括
const decoder = new VideoDecoder({
output: onFrame, // the callback to handle all the VideoFrame objects
error: e => console.error(e),
});
decoder.configure(config); // depends on the input file, your demuxer should provide it
demuxer.start((chunk) => { // depends on the demuxer, but you need it to return chunks of video data
decoder.decode(chunk); // will trigger our onFrame callback
})
请注意，由于MediaCapture Transform的MediaStreamTrackProcessor，我们甚至可以抓取 MediaStream 的帧。这意味着我们应该能够结合HTMLMediaElement.captureStream()和这个 API 来获得我们的 VideoFrames，而不需要一个分离器。然而，这仅适用于少数编解码器，这意味着我们将以阅读速度提取帧......
无论如何，这是一个在最新的基于 Chromium 的浏览器上工作的示例，并chrome://flags/#enable-experimental-web-platform-features打开：
const frames = [];
const button = document.querySelector("button");
const select = document.querySelector("select");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
button.onclick = async(evt) => {
if (window.MediaStreamTrackProcessor) {
let stopped = false;
const track = await getVideoTrack();
const processor = new MediaStreamTrackProcessor(track);
const reader = processor.readable.getReader();
readChunk();
function readChunk() {
reader.read().then(async({ done, value }) => {
if (value) {
const bitmap = await createImageBitmap(value);
const index = frames.length;
frames.push(bitmap);
select.append(new Option("Frame #" + (index + 1), index));
value.close();
}
if (!done && !stopped) {
readChunk();
} else {
select.disabled = false;
}
});
}
button.onclick = (evt) => stopped = true;
button.textContent = "stop";
} else {
console.error("your browser doesn't support this API yet");
}
};
select.onchange = (evt) => {
const frame = frames[select.value];
canvas.width = frame.width;
canvas.height = frame.height;
ctx.drawImage(frame, 0, 0);
};
async function getVideoTrack() {
const video = document.createElement("video");
video.crossOrigin = "anonymous";
video.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm";
document.body.append(video);
await video.play();
return video.captureStream().getVideoTracks()[0];
}video,canvas {
max-width: 100%
}<button>start</button>
<select disabled>
</select>
<canvas></canvas>这个方法允许我们在 HTMLVideoElement 上绘制新帧时安排回调。
它比WebCodecs级别更高，因此可能会有更多的延迟，而且我们只能以读取速度提取帧。
const frames = [];
const button = document.querySelector("button");
const select = document.querySelector("select");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
button.onclick = async(evt) => {
if (HTMLVideoElement.prototype.requestVideoFrameCallback) {
let stopped = false;
const video = await getVideoElement();
const drawingLoop = async(timestamp, frame) => {
const bitmap = await createImageBitmap(video);
const index = frames.length;
frames.push(bitmap);
select.append(new Option("Frame #" + (index + 1), index));
if (!video.ended && !stopped) {
video.requestVideoFrameCallback(drawingLoop);
} else {
select.disabled = false;
}
};
video.requestVideoFrameCallback(drawingLoop);
button.onclick = (evt) => stopped = true;
button.textContent = "stop";
} else {
console.error("your browser doesn't support this API yet");
}
};
select.onchange = (evt) => {
const frame = frames[select.value];
canvas.width = frame.width;
canvas.height = frame.height;
ctx.drawImage(frame, 0, 0);
};
async function getVideoElement() {
const video = document.createElement("video");
video.crossOrigin = "anonymous";
video.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm";
document.body.append(video);
await video.play();
return video;
}video,canvas {
max-width: 100%
}<button>start</button>
<select disabled>
</select>
<canvas></canvas>顾名思义，这将使您的 <video> 元素寻找下一帧。
与此相结合seeked事件，我们可以建立一个循环，会抢我们的源代码的每一帧，比读取速度更快（是的！）。
但是这种方法是专有的，仅在基于 Gecko 的浏览器中可用，不能在任何标准轨道上使用，并且可能会在将来实现上面公开的方法时被删除。
但就目前而言，它是 Firefox 用户的最佳选择：
const frames = [];
const button = document.querySelector("button");
const select = document.querySelector("select");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
button.onclick = async(evt) => {
if (HTMLMediaElement.prototype.seekToNextFrame) {
let stopped = false;
const video = await getVideoElement();
const requestNextFrame = (callback) => {
video.addEventListener("seeked", () => callback(video.currentTime), {
once: true
});
video.seekToNextFrame();
};
const drawingLoop = async(timestamp, frame) => {
if(video.ended) {
select.disabled = false;
return; // FF apparently doesn't like to create ImageBitmaps
// from ended videos...
}
const bitmap = await createImageBitmap(video);
const index = frames.length;
frames.push(bitmap);
select.append(new Option("Frame #" + (index + 1), index));
if (!video.ended && !stopped) {
requestNextFrame(drawingLoop);
} else {
select.disabled = false;
}
};
requestNextFrame(drawingLoop);
button.onclick = (evt) => stopped = true;
button.textContent = "stop";
} else {
console.error("your browser doesn't support this API yet");
}
};
select.onchange = (evt) => {
const frame = frames[select.value];
canvas.width = frame.width;
canvas.height = frame.height;
ctx.drawImage(frame, 0, 0);
};
async function getVideoElement() {
const video = document.createElement("video");
video.crossOrigin = "anonymous";
video.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm";
document.body.append(video);
await video.play();
return video;
}video,canvas {
max-width: 100%
}<button>start</button>
<select disabled>
</select>
<canvas></canvas>策略暂停 - 绘制 - 播放 - 等待时间更新曾经是（在 2015 年）一种非常可靠的方式来了解新框架何时被绘制到元素上，但从那时起，浏览器对这个正在触发的事件施加了严重的限制很棒的价格，现在我们可以从中获取的信息不多......
我不确定我是否仍然可以提倡使用它，我没有检查 Safari（这是目前唯一没有解决方案的）如何处理这个事件（他们对媒体的处理对我来说非常奇怪），并且有一个很好的setTimeout(fn, 1000 / 30)在大多数情况下，一个简单的循环实际上更可靠。
这是从这个问题调整的工作功能：
async function extractFramesFromVideo(videoUrl, fps=25) {
return new Promise(async (resolve) => {
// fully download it first (no buffering):
let videoBlob = await fetch(videoUrl).then(r => r.blob());
let videoObjectUrl = URL.createObjectURL(videoBlob);
let video = document.createElement("video");
let seekResolve;
video.addEventListener('seeked', async function() {
if(seekResolve) seekResolve();
});
video.src = videoObjectUrl;
// workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
while((video.duration === Infinity || isNaN(video.duration)) && video.readyState < 2) {
await new Promise(r => setTimeout(r, 1000));
video.currentTime = 10000000*Math.random();
}
let duration = video.duration;
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let [w, h] = [video.videoWidth, video.videoHeight]
canvas.width = w;
canvas.height = h;
let frames = [];
let interval = 1 / fps;
let currentTime = 0;
while(currentTime < duration) {
video.currentTime = currentTime;
await new Promise(r => seekResolve=r);
context.drawImage(video, 0, 0, w, h);
let base64ImageData = canvas.toDataURL();
frames.push(base64ImageData);
currentTime += interval;
}
resolve(frames);
});
});
}
用法：
let frames = await extractFramesFromVideo("https://example.com/video.webm");
请注意，目前没有简单的方法来确定视频的实际/自然帧速率，除非您可能使用ffmpeg.js，但这是一个 10+ 兆字节的 javascript 文件（因为它是实际 ffmpeg 库的 emscripten 端口，这显然是巨大的）。