如何在Google Colab实时视频流过程中连续捕获并保存.jpg图像帧

以下代码可实现视频流传输过程中同步捕获并保存JPG帧，无需等录制结束后再处理：

import os
import time
from IPython.display import display, Javascript
from google.colab.output import eval_js
from base64 import b64decode
import google.colab.kernel

# 创建保存帧的目录
save_dir = "captured_frames"
os.makedirs(save_dir, exist_ok=True)
frame_count = 0

# 注册回调函数，接收JS端传回的帧数据并保存
def save_frame(encoded_frame=None):
    global frame_count
    if encoded_frame is not None:
        frame_data = b64decode(encoded_frame.split(',')[1])
        frame_path = os.path.join(save_dir, f"frame_{frame_count:04d}_{int(time.time())}.jpg")
        with open(frame_path, "wb") as f:
            f.write(frame_data)
        frame_count += 1
    return frame_count

google.colab.kernel.register_callback('save_frame', save_frame)

def capture_realtime_frames(capture_interval=1000):
    """
    capture_interval: 抓帧间隔，单位毫秒，1000=每秒抓1帧，200=每秒抓5帧
    """
    js = Javascript("""
    async function captureFrames(captureInterval) {
      const div = document.createElement('div');
      const startBtn = document.createElement('button');
      const stopBtn = document.createElement("button");
      startBtn.textContent = "开始抓帧";
      startBtn.style.background = "green";
      startBtn.style.color = "white";
      stopBtn.textContent = "停止抓帧";
      stopBtn.style.background = "red";
      stopBtn.style.color = "white";
      div.appendChild(startBtn);

      const video = document.createElement('video');
      video.style.display = 'block';
      const canvas = document.createElement('canvas');
      let captureTimer = null;

      const stream = await navigator.mediaDevices.getUserMedia({video: true});
      document.body.appendChild(div);
      div.appendChild(video);
      video.srcObject = stream;
      await video.play();
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');

      // 调整输出窗口高度
      google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);

      // 等待点击开始
      await new Promise((resolve) => startBtn.onclick = resolve);
      startBtn.replaceWith(stopBtn);

      // 定时抓帧
      captureTimer = setInterval(async () => {
        ctx.drawImage(video, 0, 0);
        // 导出为JPG，0.8是画质参数可调整
        const jpgUrl = canvas.toDataURL('image/jpeg', 0.8);
        // 调用Python端回调保存
        await google.colab.kernel.invokeFunction('save_frame', [jpgUrl], {});
      }, captureInterval);

      // 等待点击停止
      await new Promise((resolve) => stopBtn.onclick = resolve);
      clearInterval(captureTimer);
      stream.getVideoTracks()[0].stop();
      div.remove();
      return "抓帧完成，共保存" + (await google.colab.kernel.invokeFunction('save_frame', [], {})).result + "张图片";
    }
    """)
    try:
        display(js)
        result = eval_js(f'captureFrames({capture_interval})')
        print(result)
    except Exception as err:
        print(str(err))

# 运行抓帧，可修改capture_interval参数调整抓帧频率
capture_realtime_frames(capture_interval=1000)

参数调整说明 #

• 抓帧频率可通过修改capture_interval参数调整，单位为毫秒，值越小抓帧越密集，默认1000ms即每秒1帧
• 捕获的JPG帧默认保存在captured_frames文件夹下，命名格式为frame_序号_时间戳.jpg
• JPG画质可修改JS代码中canvas.toDataURL('image/jpeg', 0.8)的第二个参数，取值范围0-1，数值越大画质越高、文件体积越大

内容的提问来源于stack exchange，提问作者user17020095