云回看

更新时间：2025-09-22 21:06:28

云端存储录像与事件

/**
 * 查询录制列表
 *
 * @param params - 查询参数
 * @public
 */
declare function recordQuery(params: RTCXPlaybackTypes.RecordQueryReq): Promise<RTCXPlaybackTypes.RecordQueryRsp>;

/**
 * 查询录制统计
 *
 * @param monthQueryReq - 查询参数
 * @public
 */
declare function monthRecordQuery(monthQueryReq: RTCXPlaybackTypes.MonthQueryReq): Promise<RTCXPlaybackTypes.MonthQueryRsp>;

/**
 * 查询录制事件
 *
 * @param params - 查询参数
 * @public
 */
declare function eventQuery(params: RTCXPlaybackTypes.EventQueryReq): Promise<RTCXPlaybackTypes.EventQueryRsp>;

/**
 * 查询事件统计
 *
 * @param monthQueryReq - 查询参数
 * @public
 */
declare function monthEventQuery(monthQueryReq: RTCXPlaybackTypes.MonthQueryReq): Promise<RTCXPlaybackTypes.MonthQueryRsp>;


export declare namespace RTCXCloudPlayback {
    export {
        recordQuery,
        monthRecordQuery,
        eventQuery,
        monthEventQuery,
    }
}

录制列表查询

import {
  RTCXCloudPlayback,
  RTCXPlaybackTypes,
} from '@rtcx/websdk'

RTCXCloudPlayback.recordQuery(params: RTCXPlaybackTypes.RecordQueryReq): Promise<RTCXPlaybackTypes.RecordQueryRsp>;

示例

import { ref, defineProps } from 'vue'
import { ElMessageBox } from 'element-plus'
import {
  RTCXCloudPlayback,
  RTCXPlaybackTypes,
  RTCXDeviceMgrTypes,
  RTCXWebPlayerTypes,
} from '@rtcx/websdk'
import { formatDatetime, startOfDate, endOfDate } from '@/utils/dateUtils'

const emit = defineEmits(['onSeekAction'])
const props = defineProps<{
  deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo
}>()

//云录制
let loadMore = false
let loadNextCloudRecordTime = 0
const queryDate = ref(new Date())
const dataList = ref<RTCXPlaybackTypes.TimelineRecordInfo[]>([])
function queryList(isLoadMore: boolean = false) {
  const { iotId } = props.deviceInfo
  const date = queryDate.value
  if (!date) return ElMessageBox.alert('请选择日期')
  console.info(`cloud record isLoadMore=${isLoadMore}`, date)
  const beginTime = startOfDate(date).getTime()
  const endTime = !isLoadMore ? endOfDate(beginTime).getTime() : loadNextCloudRecordTime
  const params = {
    iotId,
    beginTime,
    endTime,
    pageSize: 30,
  } as RTCXPlaybackTypes.RecordQueryReq
  RTCXCloudPlayback.recordQuery(params)
    .then((rsp: RTCXPlaybackTypes.RecordQueryRsp) => {
      loadMore = rsp.nextValid
      loadNextCloudRecordTime = rsp.nextEndTime ?? 0
      if (isLoadMore) {
        dataList.value.push(...rsp.recordFileList)
      } else {
        dataList.value = rsp.recordFileList
      }
    })
    .catch(console.error)
}
//点击去播放回看
function seekPlayback(item: RTCXPlaybackTypes.TimelineRecordInfo) {
  const { beginTime, endTime } = item
  const seekParams: RTCXWebPlayerTypes.ISeekParam = {
    beginTime,
    endTime,
    isSDCard: false,
  }
  emit('onSeekAction', seekParams)
}

<div>
    <div>
      <el-date-picker v-model="queryDate" type="date" placeholder="查询日期" />
      <el-button type="primary" size="small" style="margin-left: 10px" @click="queryList()"
        >查询</el-button
      >
    </div>
    <div class="sdcard-data-list-wrapper">
      <div
        v-for="item in dataList"
        :key="item.beginTime"
        class="sdcard-time-item-wrapper"
        @click="seekPlayback(item)"
      >
        <div>开始时间：{{ formatDatetime(item.beginTime) }}</div>
        <div>结束时间：{{ formatDatetime(item.endTime) }}</div>
      </div>
    </div>
    <el-button size="small" type="primary" v-if="loadMore" @click="queryList(true)"
      >加载更多>></el-button
    >
  </div>

录制按每天维度查询数量

可在日历上显示哪天有录制

import {
  RTCXCloudPlayback,
  RTCXPlaybackTypes,
} from '@rtcx/websdk'

RTCXCloudPlayback.monthRecordQuery(monthQueryReq: RTCXPlaybackTypes.MonthQueryReq): Promise<RTCXPlaybackTypes.MonthQueryRsp>;

示例

import { ref, defineProps } from 'vue'
import { ElMessageBox } from 'element-plus'
import { RTCXPlaybackTypes, RTCXDeviceMgrTypes, RTCXCloudPlayback } from '@rtcx/websdk'
import { startOfDate, getTimezoneFormatted } from '@/utils/dateUtils'

const props = defineProps<{
  deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo
}>()

const queryDate = ref(new Date())
const dataList = ref<RTCXPlaybackTypes.MonthQueryItem[]>([])
function queryList() {
  const { iotId } = props.deviceInfo
  const date = queryDate.value as Date
  if (!date) return ElMessageBox.alert('请选择月份')
  const beginDate = startOfDate(new Date(date.getFullYear(), date.getMonth(), 1))
  const endDate = startOfDate(new Date(date.getFullYear(), date.getMonth() + 1, 1))
  console.info(`cloud record stat query `, beginDate, endDate)
  const params = {
    iotId,
    beginTime: beginDate.getTime(),
    endTime: endDate.getTime() - 1,
    zoneOffsetId: getTimezoneFormatted(),
  } as RTCXPlaybackTypes.MonthQueryReq
  RTCXCloudPlayback.monthRecordQuery(params)
    .then((rsp: RTCXPlaybackTypes.MonthQueryRsp) => {
      dataList.value = rsp.dayCntList || []
    })
    .catch(console.error)
}

  <div>
    <div>
      <el-date-picker v-model="queryDate" type="month" placeholder="查询日期" />
      <el-button type="primary" size="small" style="margin-left: 10px" @click="queryList()">
        查询
      </el-button>
    </div>
    <div class="sdcard-data-list-wrapper">
      <div v-for="item in dataList" :key="item.dateStr" class="sdcard-time-item-wrapper">
        <div>日期{{ item.dateStr }}</div>
        <div>数据：{{ item.count }}</div>
      </div>
    </div>
  </div>

事件列表查询

仅有录制事件数据，一般用于timeline播放使用

import { RTCXCloudPlayback, RTCXPlaybackTypes } from '@rtcx/websdk'
RTCXCloudPlayback.eventQuery(params: RTCXPlaybackTypes.EventQueryReq): Promise<RTCXPlaybackTypes.EventQueryRsp>;

示例

import { ref, defineProps } from 'vue'
import { ElMessageBox } from 'element-plus'
import { RTCXCloudPlayback, RTCXPlaybackTypes, RTCXDeviceMgrTypes, RTCXWebPlayerTypes } from '@rtcx/websdk'
import { formatDatetime, startOfDate, endOfDate } from '@/utils/dateUtils'

const emit = defineEmits(['onSeekAction'])
const props = defineProps<{
  deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo
}>()

//云事件
let loadMore = false
let loadNextTime = 0
const queryDate = ref(new Date())
const dataList = ref<RTCXPlaybackTypes.TimelineEventInfo[]>([])
function queryList(isLoadMore: boolean = false) {
  const { iotId } = props.deviceInfo
  const date = queryDate.value
  if (!date) return ElMessageBox.alert('请选择日期')
  console.info(`cloud record isLoadMore=${isLoadMore}`, date)
  const beginTime = startOfDate(date).getTime()
  const endTime = !isLoadMore ? endOfDate(beginTime).getTime() : loadNextTime
  const params = {
    iotId,
    beginTime,
    endTime,
    pageSize: 30,
  } as RTCXPlaybackTypes.EventQueryReq
  RTCXCloudPlayback.eventQuery(params)
    .then((rsp: RTCXPlaybackTypes.EventQueryRsp) => {
      loadMore = rsp.nextValid
      loadNextTime = rsp.nextEndTime ?? 0
      if (isLoadMore) {
        dataList.value.push(...rsp.eventList)
      } else {
        dataList.value = rsp.eventList
      }
    })
    .catch(console.error)
}
//点击去播放回看
function seekPlayback(item: RTCXPlaybackTypes.TimelineEventInfo) {
  const { beginTime, endTime } = item
  const seekParams: RTCXWebPlayerTypes.ISeekParam = {
    beginTime,
    endTime,
    isSDCard: false,
  }
  emit('onSeekAction', seekParams)
}

  <div>
    <div>
      <el-date-picker v-model="queryDate" type="date" placeholder="查询日期" />
      <el-button type="primary" size="small" style="margin-left: 10px" @click="queryList()"
        >查询</el-button
      >
    </div>
    <div class="sdcard-data-list-wrapper">
      <div
        v-for="item in dataList"
        :key="item.beginTime"
        class="sdcard-time-item-wrapper"
        @click="seekPlayback(item)"
      >
        <div>开始时间：{{ formatDatetime(item.beginTime) }}</div>
        <div>结束时间：{{ item.endTime ? formatDatetime(item.endTime) : '-' }}</div>
      </div>
    </div>
    <el-button size="small" type="primary" v-if="loadMore" @click="queryList(true)"
      >加载更多>></el-button
    >
  </div>

事件按每天维度查询数量

可在日历上显示哪天有事件

import { RTCXCloudPlayback, RTCXPlaybackTypes } from '@rtcx/websdk'
RTCXCloudPlayback.monthRecordQuery(monthQueryReq: RTCXPlaybackTypes.MonthQueryReq): Promise<RTCXPlaybackTypes.MonthQueryRsp>;

示例

import { ref, defineProps } from 'vue'
import { ElMessageBox } from 'element-plus'
import { RTCXPlaybackTypes, RTCXDeviceMgrTypes, RTCXCloudPlayback } from '@rtcx/websdk'
import { startOfDate, getTimezoneFormatted } from '@/utils/dateUtils'

const props = defineProps<{
  deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo
}>()

const queryDate = ref(new Date())
const dataList = ref<RTCXPlaybackTypes.MonthQueryItem[]>([])
function queryList() {
  const { iotId } = props.deviceInfo
  const date = queryDate.value
  if (!date) return ElMessageBox.alert('请选择月份')
  const beginDate = startOfDate(new Date(date.getFullYear(), date.getMonth(), 1))
  const endDate = startOfDate(new Date(date.getFullYear(), date.getMonth() + 1, 1))
  console.info(`cloud event stat query `, beginDate, endDate)
  const params = {
    iotId,
    beginTime: beginDate.getTime(),
    endTime: endDate.getTime() - 1,
    zoneOffsetId: getTimezoneFormatted(),
  } as RTCXPlaybackTypes.MonthQueryReq
  RTCXCloudPlayback.monthRecordQuery(params)
    .then((rsp: RTCXPlaybackTypes.MonthQueryRsp) => {
      dataList.value = rsp.dayCntList || []
    })
    .catch(console.error)
}

  <div>
    <div>
      <el-date-picker v-model="queryDate" type="month" placeholder="查询日期" />
      <el-button type="primary" size="small" style="margin-left: 10px" @click="queryList()">
        查询
      </el-button>
    </div>
    <div class="sdcard-data-list-wrapper">
      <div v-for="item in dataList" :key="item.dateStr" class="sdcard-time-item-wrapper">
        <div>日期{{ item.dateStr }}</div>
        <div>数据：{{ item.count }}</div>
      </div>
    </div>
  </div>