在线flv流截取帧画面转化为图片

懮俍

于 2023-12-25 15:29:13 发布

阅读量592

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/dick_1999/article/details/135201029

版权

当前遇到个需求为在线flv流需要截取帧画面为图片，然后就封装了一个方法，支持在线flv流或者mp4格式截取帧画面转化为base64的图片格式。

用到的库为flv.js

// utils.ts文件
// 截取在线flv视频流为图片
// 封装方法
import flvjs from "flv.js";
export async function captureFramesFromFlv(url: string) {
  return new Promise((resolve, reject) => {
    const videoElement = document.createElement("video");
    videoElement.muted = true; // 静音
    videoElement.autoplay = true; // 自动播放
    const canvasElement = document.createElement("canvas");
    const ctx = canvasElement.getContext("2d");

    // 创建 FLV 播放器
    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        // type: "flv",
        // url: url,
        type: "mp4",
        url: url,
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    } else {
      console.error("不支持 FLV 播放");
      reject("不支持 FLV 播放");
    }

    // 监听视频数据加载事件
    videoElement.addEventListener("loadeddata", function () {
      console.log("视频开始播放");
      // 设置 canvas 尺寸与视频尺寸一致
      canvasElement.width = videoElement.videoWidth;
      canvasElement.height = videoElement.videoHeight;

      // 开始循环截取帧
      // 绘制当前帧到 canvas
      if (ctx) {
        ctx.drawImage(
          videoElement,
          0,
          0,
          canvasElement.width,
          canvasElement.height
        );
      }

      // 转换为图片数据并保存到 frames 数组
      const imageDataUrl = canvasElement.toDataURL();
      console.log("imageDataUrl", imageDataUrl);
      videoElement.pause(); // 停止视频播放
      // 监听视频播放结束事件，在结束时返回截取的帧
      videoElement.addEventListener("ended", () => {
        resolve(imageDataUrl);
      });
    });

    // 加载视频元素和画布元素
    document.body.appendChild(videoElement);
    document.body.appendChild(canvasElement);
    videoElement.style.display = "none";
    canvasElement.style.display = "none";
  });
}

使用为

// 使用组件
import { captureFramesFromFlv } from "@/utils/utils";

// 调用封装的方法
  captureFramesFromFlv("video/test1.mp4")
    .then((imageDataUrl) => {
      console.log(imageDataUrl); // 打印截取的帧数据
    })
    .catch((error) => {
      console.error(error);
    });