我正在开发一个客户端项目，该项目允许用户提供视频文件并对其应用基本操作。我正在尝试可靠地从视频中提取帧。目前我有一个 <video> 我正在将选定的视频加载到其中，然后按如下方式拉出每一帧：追寻至始暂停视频绘制 <video> 到 <canvas> 使用 .toDataUrl() 从画布中捕获帧向前搜索 1 / 30 秒（1 帧）。冲洗并重复这是一个相当低效的过程，更具体地说，事实证明它不可靠，因为我经常卡住帧。这似乎是因为它在绘制到画布之前没有更新实际的 <video> 元素。我宁愿不必将原始视频上传到服务器只是为了分割帧，然后将它们下载回客户端。非常感谢任何有关更好的方法的建议。唯一的警告是我需要它与浏览器支持的任何格式一起工作（在 JS 中解码不是一个很好的选择）。原文由 The Busy Wizard 发布，翻译遵循 CC BY-SA 4.0 许可协议

JavaScript：可靠地提取视频帧

[2021更新] ：自从这个问题（和答案）首次发布以来，这方面的事情发生了变化，终于到了更新的时候了；这里公开的方法已经过时了，但幸运的是一些新的或即将到来的 API 可以帮助我们更好地提取视频帧：

最有前途和最强大的一个，但仍在开发中，有很多限制： WebCodecs

这个新的 API 释放了对媒体解码器和编码器的访问权限，使我们能够从视频帧（YUV 平面）访问原始数据，这对于许多应用程序来说可能比渲染帧更有用；而对于那些需要渲染帧的，这个API暴露的 VideoFrame 接口可以直接绘制到

但是有一个问题，除了目前的低支持之外，这个 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();
  const [track] = video.captureStream().getVideoTracks();
  video.onended = (evt) => track.stop();
  return track;
}

 video,canvas {
  max-width: 100%
}

 <button>start</button>
<select disabled>
</select>
<canvas></canvas>

最容易使用，但浏览器支持相对较差，并且受浏览器丢帧影响： HTMLVideoElement.requestVideoFrameCallback

这个方法允许我们在 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;
      }
    };
    // the last call to rVFC may happen before .ended is set but never resolve
    video.onended = (evt) => 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>

对于您的 Firefox 用户，Mozilla 的非标准 HTMLMediaElement.seekToNextFrame()

顾名思义，这将使您的

将其与 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>

最不可靠的，随着时间的推移确实停止工作： HTMLVideoElement.ontimeupdate

策略 暂停 - 绘制 - 播放 - 等待时间更新 曾经是（在 2015 年）一种非常可靠的方式来了解何时将新框架绘制到元素上，但从那时起，浏览器对这个触发的事件进行了严格的限制速度很快，现在我们可以从中获取的信息不多了……

我不确定我是否仍然可以提倡使用它，我没有检查 Safari（这是目前唯一没有解决方案的）如何处理这个事件（他们对媒体的处理对我来说很奇怪），并且有一个很好的在大多数情况下，一个简单的 setTimeout(fn, 1000 / 30) 循环实际上更可靠。

原文由 Kaiido 发布，翻译遵循 CC BY-SA 4.0 许可协议

这是根据这个问题调整的工作功能：

 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 端口，这显然是巨大的).

原文由 user993683 发布，翻译遵循 CC BY-SA 4.0 许可协议

JavaScript：可靠地提取视频帧

最有前途和最强大的一个，但仍在开发中，有很多限制： WebCodecs

最容易使用，但浏览器支持相对较差，并且受浏览器丢帧影响： HTMLVideoElement.requestVideoFrameCallback

对于您的 Firefox 用户，Mozilla 的非标准 HTMLMediaElement.seekToNextFrame()

最不可靠的，随着时间的推移确实停止工作： HTMLVideoElement.ontimeupdate

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

问一个鼠标滚动事件，这种是怎么实现的？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译