用 vue 写出 可以在 rstp 视频就上绘制出感兴趣区域的代码 视频播放状态 手动绘制矩形

好的，以下是一个可以在 rtsp 视频上手动绘制感兴趣的区域的 Vue.js 代码示例：

<template>
  <div>
    <video ref="videoPlayer" autoplay width="640" height="360"></video>
    <canvas ref="canvas" width="640" height="360" style="position: absolute; left: 0; top: 0;"
            @mousedown="startDrawing"
            @mousemove="drawRect"
            @mouseup="stopDrawing"
            @mouseleave="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      startX: null,
      startY: null,
      currentX: null,
      currentY: null,
      context: null,
      rects: [],
    };
  },
  mounted() {
    // 获取 video 和 canvas 元素
    const video = this.$refs.videoPlayer;
    const canvas = this.$refs.canvas;
    this.context = canvas.getContext('2d');

    // 监听视频加载完成事件
    video.addEventListener('loadedmetadata', () => {
      // 设置 canvas 大小和 video 大小一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });

    // 设置 video 播放源
    video.src = 'rtsp://example.com/stream';
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      this.startX = event.offsetX;
      this.startY = event.offsetY;
    },
    drawRect(event) {
      if (!this.isDrawing) return;
      this.currentX = event.offsetX;
      this.currentY = event.offsetY;
      this.draw();
    },
    draw() {
      this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
      this.rects.forEach((rect) => {
        this.context.strokeStyle = 'red';
        this.context.lineWidth = 2;
        this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      });
      if (this.isDrawing) {
        const rect = {
          x: Math.min(this.startX, this.currentX),
          y: Math.min(this.startY, this.currentY),
          width: Math.abs(this.startX - this.currentX),
          height: Math.abs(this.startY - this.currentY),
        };
        this.context.strokeStyle = 'red';
        this.context.lineWidth = 2;
        this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      }
    },
    stopDrawing() {
      if (!this.isDrawing) return;
      this.isDrawing = false;
      const rect = {
        x: Math.min(this.startX, this.currentX),
        y: Math.min(this.startY, this.currentY),
        width: Math.abs(this.startX - this.currentX),
        height: Math.abs(this.startY - this.currentY),
      };
      this.rects.push(rect);
    },
  },
};
</script>

在这个示例代码中，我们首先通过 `ref` 属性获取了 video 和 canvas 元素，并且监听了 canvas 的鼠标事件，实现了手动绘制矩形的功能。在 `data` 中定义了一些状态，包括当前是否正在绘制、起始坐标和当前坐标等信息，以及存储绘制的矩形的数组 `rects`。

在 `startDrawing` 方法中，我们记录下了起始坐标，并将 `isDrawing` 设置为 true，表示正在绘制。在 `drawRect` 方法中，我们判断是否正在绘制，如果是的话，就记录下当前坐标，并调用 `draw` 方法进行绘制。在 `draw` 方法中，我们首先清空 canvas，然后遍历 `rects` 数组，将存储的矩形都绘制出来，并且绘制当前正在绘制的矩形。在 `stopDrawing` 方法中，我们记录下当前绘制的矩形，并将其存储到 `rects` 数组中。

需要注意的是，这个示例只是一个简单的代码示例，实际使用时需要根据具体的需求进行修改。同时，由于 rtsp 协议的特殊性，需要使用特殊的技术来实现视频的播放和处理，这里就不再赘述了。