xiaodou-ai-admin/src/pages/rts/record/index.vue

<template>
  <a-card
    title="存储列表"
  >
  <a-row justify="space-between" >
    <a-col>
      <a-select v-model:value="recordState.type" style="width: 170px;" >
          <a-select-option
            v-for="item in typeList"
            :key="item"
            :value="item"
          >
            {{item}}
          </a-select-option>
        </a-select>
    </a-col>
    <a-col>
      <a-button type="primary" @click="openRecordModal">开始存储</a-button>
    </a-col>
  </a-row>
  <a-table
      style="margin-top: 20px;"
      :columns="recordColumns"
      :data-source="state.recordDataSource"
      :loading="state.loading"
      :pagination="false"
    >
    <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'action'"  >
          <a-space>
            <!-- <a @click="openModal(record)" >详情</a> -->
            <a @click="recordPlay(record)" >录制播放</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-card
    title="正在存储的视频流"
    style="margin-top: 20px;"
  >
    <a-table
      :columns="columns"
      :data-source="state.recordingDataSource"
      :loading="state.loading"
      :pagination="false"
    >
    <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'action'"  >
          <a-space>
            <a @click="stopRcord(record)" >停止录制</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    style="width: 700px;"
    label="视频流详情"
    :visible="state.visible"
    @cancel="state.visible = false"
    @ok="state.visible = false"
    destroyOnClose
  >
    <video-player-tsx :video-url="`/rts-api/record/${state.recordDetail.Path}`" />
  </modal-pro>

  <modal-pro
    label="录制视频"
    :visible="state.recordVisible"
    @cancel="state.recordVisible = false"
    @ok="recordVideo"
  >
    <a-form :label-col="{span: 4}"  >
      <a-form-item label="类型" >
        <a-select v-model:value="recordState.type" >
          <a-select-option
            v-for="item in typeList"
            :key="item"
            :value="item"
          >
            {{item}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="视频流标识" >
        <a-select v-model:value="recordState.streamPath" >
          <a-select-option
            v-for="item in state.streams"
            :key="item.Path"
            :value="item.Path"
          >
            {{item.Path}}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </modal-pro>
</template>
<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { onMounted, reactive } from 'vue'
import { Form, message } from 'ant-design-vue'
import { VideoPlayerTsx } from '@/components/VideoPlayer/index'
import { getRecording } from '@/api/rts/stream'

const useForm = Form.useForm

const recordColumns = [
  {
    title: '存储地址',
    dataIndex: 'Path'
  },
  {
    title: '文件大小',
    dataIndex: 'Size'
  },
  {
    title: '时长',
    dataIndex: 'Duration'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const columns = [
  {
    title: 'id',
    dataIndex: 'ID'
  },
  {
    title: '录制类型',
    dataIndex: 'Type'
  },
  {
    title: '录制开始时间',
    dataIndex: 'StartTime'
  },
  {
    title: '录制参数',
    dataIndex: 'Config'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const typeList = ['mp4', 'ts', 'flv']

const recordState = reactive({
  type: 'flv',
  streamPath: 'app/name'
})

const state = reactive({
  loading: false,
  visible: false,
  recordVisible: false,
  recordingDataSource: [],
  recordDataSource: [],
  recordDetail: {},
  detail: {},
  streams: [],
  type: 'flv',
  videoUrl: ''
})

const stopRcord = async (record) => {
  await RtsController.stopRecord(record.id)
  getRecording()
}

const recordVideo = async () => {
  if (!recordState.streamPath) {
    message.warn('请填写标识流地址')
    return
  }

  await RtsController.recordVideo(recordState)
  state.recordVisible = false
}

const recordPlay = async (record) => {
  await RtsController.playRecord(record.Path, 'flv')
  getRecordingList()
}

const openRecordModal = () => {
  state.recordVisible = true
}

const openModal = (record: RTS.STREAM.Detail) => {
  state.detail = record
  state.visible = false
}

const getStreamList = async () => {
  const { data } = await RtsController.getStreams()
  state.streams = data
}

const getRecordList = async () => {
  const { data } = await RtsController.listRecord(state.type)
  state.recordDataSource = data
}

const getRecordingList = async () => {
  const { data } = await RtsController.listRecording()
  state.recordingDataSource = data
}

onMounted(() => {
  getRecordingList()
  getStreamList()
  getRecordList()
})
</script>

<style></style>