Draw rect and label for object detect

// Video.vue
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue'
import videojs from 'video.js'
import "video.js/dist/video-js.css"
import '@videojs/themes/dist/sea/index.css' // need to install @videojs/themes

// this part in real world need to be fetched from the server
import videoSrc from '../assets/video.mp4'
import videoJSON from '../assets/video.json'

let videoRef = videojs.Player | null = null
const videoStatus = ref<"paused" | "playing">("paused")
const currentTime = ref(0)

const OPTIONS = {
  control: true,
  sources: [
    {
      src: videoSrc,
      type: "video/mp4"
    }
  ]
}

// need to get the DOM, so you should use onMounted hook
onMounted(() => {
  // init the video.js
  videoRef = videojs(
    'js-video-player',
    OPTIONS,
    () => {
      const vRef = videoRef as videojs.Player

      vRef.on("timeupdate", () => {
        currentTime.value = vRef.currentTime() || 0
      })

      vRef.on("playing", () => {
        videoStatus.value = "playing"
      })

      vRef.on("playing", () => {
        videoStatus.value = "paused"
      })
    }
  )
})

onBeforeUnmount(() => {
  if (videoRef) {
    (videoRef as videojs.Player).dispose()
  }
})
</script>

<template>
  <div class="video-wrapper">
    <video id="js-video-player" class="video-js vjs-theme-sea">
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
          >supports HTML5 video</a
        >
      </p>
    </video>

    <!-- 🚀 Create Track component and pass props to the Track component -->
    <Track
      :data="videoJSON"
      :current-time="currentTime"
      :video-status="videoStatus"
    />
  </div>
</template>

<style lang="scss" scoped>
.video-wrapper {
  position: relative;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import P5 from "p5"

interface FrameType {
  FrameTime: string
  Objects: IObjectType[]
}

interface IDataType {
  Frame: FrameType[]
}

interface IObjectType {
  DLabel: string
  DBox: string
}

const props = defineProps<{
  data: IDataType
  currentTime: number
  videoStatus: "paused" | "playing"
}>()

const sketch = function (p5: P5) {
  const COLORS = [p5.color(255, 204, 0)] // you can also fetch border color from the server according DLabel information.

  pt.setup = () => {
    p5.createCanvas(1280, 720) // you can also get the parent DOM width and height by using getBoundingClientRect()

    // using this method can find the closest time from video current time in array
    function closest<T extends IDataType>(data: T): FrameType {
      return data.Frame.reduce((acc, cur) => {
        const curDiff = Math.abs(+cur.FrameTime - props.currentTime)
        const accDiff = Math.abs(+acc.FrameTime - props.currentTime)

        if (accDiff === curDiff) {
          return acc.FrameTime > cur.FrameTime ? acc : cur
        } else {
          return curDiff < accDiff ? cur : acc
        }
      })
    }

    p5.draw = () => {
      if (props.videoStatus === "playing") {
        p5.clear(0, 0, 0, 0) // clear the canvas first

        if (props.data.Frame) {
          const { Objects } = closest(props.data)

          // 🚀 below is the drawing sample code, you can change the drawing method to whatever you want.
          for (let i = 0; i < Objects.length; i++) {
            const { DBox, DLabel } = Objects[i]
            const box = DBox.split(" ").map(Number)

            p5.strokeWeight(1)
            p5.stroke(COLORS[0])
            p5.textSize(20)
            p5.fill(COLORS[0])
            p5.text(DLabel, box[0], box[1])

            p5.noFill()
            p5.strokeWeight(2)
            p5.stroke(COLORS[0])
            // x, y, w, h
            p5.rect(box[0], box[1], box[2] - box[0], box[3] - box[1])
          }
        }
      }
    }
  }
}

// need to use onMounted hook to get the DOM and initialize p5.js
onMounted(() => {
  if (trackRef.value) {
    new P5(sketch, trackRef.value)
  }
})
</script>

<template>
  <div ref="trackRef" id="js-video-track"></div>
</template>

<style lang="scss" scoped>
#js-video-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; // because we need to use canvas to cover video, pointer-event need to be set to none, that user can still control the video
}
</style>