vue+wsplayer对接大华的rtsp实时预览视频流

参考大佬教程：

vue/react+wsplayer对接大华的rtsp实时预览视频流_wsplayer 前端使用-CSDN博客

//HTML
  <!-- 大华播放器容器 -->
      <div class="video" id="video"></div>
        
//JS
  import { defineProps, reactive, watch,onMounted } from 'vue';
  import {
    cameraDetail
  } from '../../../../src/api/basic/screen';
  import PlayerManager from '../icc/PlayerManager.js';

  const props = defineProps<{
    cameraId: string;
  }>();
  const emit = defineEmits(['closeCameraMonitor']);
  const state = reactive({
    cameraId: props.cameraId,
    title: '摄像头视频',
    F_Url: '',
    F_Token: '',
    channelId: '',
    wsUrl: '',
  });
  
  let videoPlayer;

  watch(
    () => props.cameraId,
    newVal => {
      state.cameraId = newVal;
    },
  );

 // 启动播放器
 function startPlayer(rtspUrl: string) {
  console.log('RTSP URL:', videoPlayer); 
 if (!videoPlayer) {
  console.error('播放器实例未创建');
  return;
 }

 let arr = rtspUrl.match(/^rtsp:\/\/([^\/:]+)(:\d*)?/);
 console.log('arr:', arr);
 if (arr) {
  const host = arr[1];
  const port = arr[2] || '';
  state.wsUrl = `ws://${host}${port}`;
  console.log('WebSocket URL:', state.wsUrl);
 } else {
  console.error('Invalid RTSP URL');
 }

 videoPlayer.realByUrl({
  playType: 'url', // 播放类型
  rtspURL: rtspUrl, // RTSP 地址
  wsURL: state.wsUrl, // WebSocket 地址
  channelId: state.channelId, // 通道 ID
  streamType: '1', // 码流类型 (1-主码流, 2-辅码流)
  selectIndex: '0', // 播放窗口序号
  channelData: {}, // 通道数据
 });}

   async function init(data) {
 console.log('初始化数据:', data);
 // 构建 RTSP URL
 const rtspUrl =  data.F_Url+'?token=' + data.F_Token;
//  const rtspUrl ="rtsp://192.168.1.250:9100/dss/monitor/param/cameraid=1000007%241%26substream=1";
 videoPlayer = new PlayerManager({
  el: 'video', // 播放器容器
  type: 'real', // 实时预览
  maxNum: 1, // 最大播放路数
  num: 1, // 初始化显示路数
  showControl: false, // 是否显示工具栏
  isIntranet: true, // 固定写死 true
  showRecordProgressBar: true, // 是否显示录像进度条
  prefixUrl: '../dhPro', // 文件位置
  importLoad: true, // 必填
  receiveMessageFromWSPlayer: (methods, data) => {
   switch (methods) {
   case 'initializationCompleted':
    console.log('初始化完成:', data);
    startPlayer(rtspUrl); // 初始化完成后启动播放器
    break;
   case 'realSuccess':
    console.log('实时预览成功');
    break;
   case 'realError':
    console.error('实时预览失败:', data);
    break;
   case 'errorInfo':
    console.error('错误信息:', data);
    break;
   }
  },
  });
 }

  // 获取摄像头详情
  const getCameraDetail = async () => {
    const res = await cameraDetail(state.cameraId);
    if (res.code === 200) {
      state.title = res.data.F_CameraName;
      state.F_Url = res.data.F_Url
      state.F_Token = res.data.F_Token;
      state.channelId = res.data.F_channel_code;
      init(res.data);
    } else {
      console.error('获取摄像头详情失败');
    }
  };

 onMounted(() => {
    getCameraDetail();
  });