node文件資源管理器讀取視頻信息從零實現(xiàn)

更新時間：2023年12月21日 15:06:54 作者：寒露

這篇文章主要為大家介紹了node文件資源管理器讀取視頻信息從零實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前置準備

需要 ffmpeg 與配套的 ffprobe

ffprobe 用于獲取視頻的媒體信息。視頻流，音頻流，字幕等信息
ffmpeg 用于獲取視頻播放更多信息。對視頻某個時間段進行截圖等操作

需要開發(fā)機安裝 ffmpeg 或 docker 容器內(nèi)安裝 ffmpeg 開發(fā)。全環(huán)境的 ffmpeg 較大，對最終生成的 docker 鏡像的大小影響較大。

dockerfiel 添加一條安裝 ffmpeg 的方法

RUN apk add --no-cache ffmpeg

開發(fā)

這次主要使用 ffprobe 獲取視頻的媒體信息。

安裝依賴

explorer-manage

pnpm i ffprobe

pnpm i  @types/ffprobe -D

ffprobe 依賴主要用于將 ffprobe 命令輸出的信息進行格式化成 node 可以直接消費的結(jié)構。

explorer-manage 創(chuàng)建一個文件 src/ffmpeg/main.mjs，內(nèi)容如下

import ff_probe from 'ffprobe'
import { formatPath, resetPath } from '../../lib/format-path.mjs'
// npm install ffprobe-static
// import ff_probe_static from 'ffprobe-static'
export const getVideoInfo = (path = '') => {
  return ff_probe(formatPath(path), {
    path: 'ffprobe',
  }).catch((err) => {
    console.log({ err })
  })
}

其中可以使用 npm install ffprobe-static 安裝 ffprobe 的靜態(tài)文件，供 ffprobe 依賴提供的 path: ff\_probe\_static.path 方法注入路徑。由于開發(fā)機上已安裝 ffmpeg，所以這里僅供參考。

explorer 客戶端

客戶端依舊使用 Next.js 的 server action 調(diào)用 getVideoInfo 方法實現(xiàn)。

常規(guī)套路

使用上下文控制側(cè)邊抽屜彈窗顯示
側(cè)邊抽屜彈窗內(nèi)的視頻流、音頻流、字幕等信息使用 Tab 組件區(qū)分

server action

'use server'
import { getVideoInfo } from '@/explorer-manager/src/ffmpeg/main.mjs'
export const getVideoInfoAction: typeof getVideoInfo = (path) => {
  return getVideoInfo(path)
}

這里偷懶了，直接使用 typeof getVideoInfo 給 getVideoInfoAction 進行狀態(tài)聲明。

modal

'use client'
import React from 'react'
import { Card, Descriptions, Drawer, Space, Tabs } from 'antd'
import { map, isEmpty, isObject } from 'lodash'
import { useRequest } from 'ahooks'
import { VideoInfoContext } from '@/components/video-info-modal/video-info-context'
import { getVideoInfoAction } from '@/components/video-info-modal/action'
const VideoInfoItem: React.FC = () => {
  const video_path = VideoInfoContext.useStore()
  const { data, loading, run } = useRequest(() => getVideoInfoAction(video_path))
  return (
    <Card loading={loading}>
      <Tabs
        items={data?.streams.map((item) => {
          return {
            key: [item.codec_type, item.index].join('-'),
            label: (
              <Space>
                {item.codec_type}
                {item.index > 0 ? item.index : ''}
              </Space>
            ),
            children: (
              <>
                <Descriptions
                  column={1}
                  labelStyle={{ width: '15em', textAlign: 'right' }}
                  style={{ maxHeight: '85vh', overflow: 'scroll', overscrollBehavior: 'contain' }}
                >
                  {map(item, (value, key) => (
                    <Descriptions.Item key={key} label={key}>
                      {isObject(value) ? <pre>{JSON.stringify(value, null, 2)}</pre> : value?.toString()}
                    </Descriptions.Item>
                  ))}
                </Descriptions>
              </>
            ),
          }
        })}
      />
    </Card>
  )
}
const VideoInfoModal: React.FC = () => {
  const video_path = VideoInfoContext.useStore()
  const dispatch = VideoInfoContext.useDispatch()
  return (
    <Drawer
      title="視頻信息"
      placement="right"
      open={!isEmpty(video_path)}
      width={1000}
      onClose={() => dispatch('')}
      footer={false}
      destroyOnClose={true}
    >
      <VideoInfoItem />
    </Drawer>
  )
}
export default VideoInfoModal

使用 ahooks 的 useRequest 封裝 server action 方法。內(nèi)置 loading、 data 等狀態(tài)。
當組件首次被裝載時，useRequest 調(diào)用 getVideoInfoAction 獲取數(shù)據(jù)
內(nèi)部使用 Antd 提供的 Card 組件用于 loading 狀態(tài)。 Tab 對數(shù)據(jù)的視頻、音頻等信息進行區(qū)分顯示。