修改首页

董国庆

2025-04-08 1d41f70b0d1c1756546dfa529786d810d7c8cccb

修改首页

 src/view/home/index.vue

@@ -440,10 +440,10 @@
    // 初始化地图

    initMap() {

      window._AMapSecurityConfig = {

        securityJsCode: "37ce61ae86efa5ad82b649a277f5097c",

        securityJsCode: this.$secretKey,
      };

      AMapLoader.load({

        key: "67968c82f27c7e2cb9f40c1a9aa3042b",

        key: this.$mapKey,
        version: "2.0",

        plugins: [

          "AMap.ToolBar",

@@ -575,27 +575,11 @@
                  ...item,

                  drivingTime:this.formatterTime(item.drivingTime || 0) ,

                  location: addressResult,

                  videoUrl: videoRes.data.url,

                  videoUrl: videoRes.url,
                })

              );



              // if (flvjs.isSupported()) {

              //   this.flvPlayer = flvjs.createPlayer({

              //     type: "flv",

              //     isLive: true,

              //     cors: true,

              //     hasAudio: true,

              //     hasVideo: true,

              //     url: videoRes.data.url,

              //     enableWorker: true,

              //     enableStashBuffer: false,

              //     seekType: "range",

              //   });

              //   let video = document.getElementById("monitoringCard");

              //   this.flvPlayer.attachMediaElement(video);

              //   this.flvPlayer.load();

              //   this.flvPlayer.play();

              // }

              this.initVideoPlayer(videoRes.url);
            } catch (error) {

              this.infoWindow.setContent(

                '<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'

@@ -612,14 +596,83 @@
    async getVideoUrl(carId) {

      try {

        const res = await getRealVideo({ id: carId });

        return res;

      } catch (error) {

        // 将RTSP流转换为FLV流
        const flvUrl = this.convertRtspToFlv(res.url);
        return {

          data: {

            url: "",

          },

          url: flvUrl
        };
      } catch (error) {
        console.error("获取视频地址失败", error);
        return {
          url: ""
        };

      }

    },

    // RTSP转FLV
    convertRtspToFlv(rtspUrl) {
      // 这里需要根据实际的流媒体服务器地址进行修改
      // 假设流媒体服务器地址为 http://your-media-server:8080
      const mediaServer = "http://101.206.211.65:18042";
      // 从RTSP URL中提取流标识
      const streamId = rtspUrl.split("/").pop();
      // 返回FLV流地址
      return `${mediaServer}/live/${streamId}.flv`;
    },

    // 初始化视频播放器
    initVideoPlayer(videoUrl) {
      // 先销毁之前的播放器
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }

      // 获取video元素
      const video = document.getElementById("monitoringCard");
      if (!video) {
        console.error("Video element not found");
        return;
      }

      // 检查flv.js是否支持
      if (flvjs.isSupported()) {
        try {
          this.flvPlayer = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            cors: true,
            hasAudio: true,
            hasVideo: true,
            url: videoUrl,
            enableWorker: true,
            enableStashBuffer: false,
            seekType: "range",
          });

          this.flvPlayer.attachMediaElement(video);
          this.flvPlayer.load();
          this.flvPlayer.play().catch(error => {
            console.error("视频播放失败:", error);
          });
        } catch (error) {
          console.error("创建播放器失败:", error);
        }
      } else {
        console.error("当前浏览器不支持flv.js");
      }
    },

    // 处理视频错误
    handleVideoError(event) {
      console.error("视频加载失败", event);
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      this.infoWindow.setContent(
        '<div style="padding: 20px;text-align: center;color: red;">视频加载失败，请稍后重试</div>'
      );
    },



    listRender(record) {

@@ -629,8 +682,10 @@
            crossorigin="anonymous" 

            style="width: 460px; height: 330px; border-radius: 9px" 

            id="monitoringCard"

            :controls="false"

            autoplay

            playsinline
            preload="auto"
            @error="handleVideoError"
            width="620">

          </video>

          <div style="position: absolute; right: 11px; top: 10px">