代码提交

艺术家

2025-06-11 e00d1817afd6f86154aaa4c870571c724ebfecfc

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/client/src/views/tts/PickAndDrop/PickAndDrop.vue

@@ -252,6 +252,14 @@
            <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
              >视频监控右侧</span
            >
            <!-- <video
              id="video"
              controls
              autoplay
              muted
              width="100%"
              height="100%"
            ></video> -->
            <img src="@/assets/imgs/right.png" alt="" />
          </div>
        </div>
@@ -260,7 +268,15 @@
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import {
  ref,
  onMounted,
  nextTick,
  onUnmounted,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
@@ -388,7 +404,32 @@

  client.value.onerror = function () {};
};

//视频监控
const webRtcServer = ref();
// webrtc服务器地址
const IP = "http://127.0.0.1:8000";

// åˆ›å»ºè§†é¢‘实例

const initVideo = () => {
  webRtcServer.value = new WebRtcStreamer("video", IP);
  //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。
  //注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
  webRtcServer.value.connect(
    "rtsp://admin:MXmx2380#@192.168.1.168:554/h264/Camera 01/main/av_stream"
  );
};
//rtsp://admin:MXmx2380#@192.168.1.168:554/h264/ch1/main/av_stream
// é”€æ¯è§†é¢‘实例

const destroyVideo = () => {
  webRtcServer.value &&
    (webRtcServer.value.disconnect(), (webRtcServer.value = null));
};

onMounted(() => {
  initVideo();
  // ç›‘听窗口大小变化
  window.addEventListener("resize", () => {
    nextTick(() => {
@@ -412,7 +453,24 @@
  // getPosition();
  getParameter();
});
// é¡µé¢æ¿€æ´»

onActivated(() => {
  // ç¼“存页面 æ‰“开页面 å®žçŽ°æ’­æ”¾
  const video = document.getElementById("video");
  video.paused && video.play();
});
// é¡µé¢åœç”¨

onDeactivated(() => {
  // ç¼“存页面 ç¦»å¼€é¡µé¢ å®žçŽ°æš‚停
  const video = document.getElementById("video");
  video.play && video.pause();
});

onBeforeUnmount(() => {
  destroyVideo();
});
onUnmounted(() => {
  isStart.value = false;
  clearInterval(timer.value);