Chen
/
goldenPig


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>player</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>-->
<!--    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>-->
    <style>
      .sk-chase {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        animation: sk-chase 2.5s infinite linear both;
      }

      .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2.0s infinite ease-in-out both;
      }

      .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #8cc5ff;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
      }

      .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
      .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
      .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
      .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
      .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
      .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
      .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
      .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
      .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
      .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
      .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
      .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

      @keyframes sk-chase {
        100% { transform: rotate(360deg); }
      }

      @keyframes sk-chase-dot {
        80%, 100% { transform: rotate(360deg); }
      }

      @keyframes sk-chase-dot-before {
        50% {
          transform: scale(0.4);
        } 100%, 0% {
            transform: scale(1.0);
          }
      }
      #error_text {
        width: 100%;
        height: 100%;
        text-align: center;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
        font-weight: 600;
        background-color: #8cc5ff;
      }
    </style>
</head>
<body style="margin: 0; width: 100%; text-align: center; z-index:999; background-color: #fff" >
    <video width="100%" id="video"></video>
    <canvas id="canvas"></canvas>
    <canvas id="draw"></canvas>
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
    <div id="error_text" >服务器连接失败,请联系管理员</div>
</body>
<script type="module">
    import Player from "./src/player.js";
    var clickTimeId;
    let str  = location.href;
    let num = str.indexOf('?');
    str = str.substr(num+1);
    let data = str.split(',');
    let isShow = Number(data[0]);
    let key = data[4];
    let video = document.getElementsByTagName('body')[0];
    let height = video.clientHeight;
    video.dblclick = function () {
    };
    function onDocumentClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        //执行延时
        clickTimeId = setTimeout(function() {
            //此处为单击事件要执行的代码
            console.log("鼠标单击");
        }, 250);
    }
    function onDocumenDblClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        console.log("鼠标双击");
      // isFullscreenEnabled();
      let video = document.getElementById('video');

        if (video.requestFullscreen) { //w3c
          console.log(video.requestFullscreen);
          console.log(video.requestFullscreen());
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) { //moz Firefox
          video.mozRequestFullScreen();
        } else if (video.msRequestFullscreen) { //IE
          video.msRequestFullscreen();
        } else if (video.oRequestFullscreen) { //Opera
          video.oRequestFullscreen();
        } else if (video.webkitRequestFullscreen) { //webkit内核 Chrome Safari
          video.webkitRequestFullScreen();
        }
    }

    // close.onclick = function () {
    //   let video = document.getElementById('bodySng');
    // }

    // function isFullscreenEnabled() {
    //   return  (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
    // }
    const options = {
        video: document.getElementById('video'),
        canvas: document.getElementById('canvas'),
        drawer: document.getElementById('draw'),
        // wsUrl:'ws://111.2.71.225:10080/camera_relay?tcpaddr=admin%3Ahmkj6688%40192.168.1.144',
        // rtspUrl: 'rtsp://admin:hmkj6688@192.168.1.144',
        user: '',
        pwd: ''
    };
    options.wsUrl = data[1];
    options.rtspUrl = data[2];
    console.log(options.rtspUrl);
    let player = new Player(options);
    player.init();
    player.on('error', function () {
        console.log('连接失败')
      let er = document.getElementById('error_text');
      er.style.display = 'block';
      // er.style.lineHeight = height + 'px';
      er.style.lineHeight = height + 'px';

    });
    player.on('noStream', function () {
        console.log('noStream');
        player.close();
        player = null;
        player = new Player(options);
        player.init();
        player.connect();
    });
    // 首次播放
    player.on('canplay', function () {
        //player.close();
      let sk = document.getElementsByClassName('sk-chase')[0];
      sk.style.display = 'none';
    });

    player.on('initialCompleted', function () {
    });

    player.on('ROIFinished', function () {
       console.log('ROIFinished');
    });

    player.connect();

    window.onload = function() {
      document.addEventListener('dblclick', onDocumenDblClick);
    };


    // document.getElementById('close').onclick = ()=>{
    //     player.close();
    // };

    // document.getElementById('ROIreset').onclick = () =>{
    //     player.resetROI();
    // };

    // document.getElementById('ROIset').onclick = () =>{
    //     let data = [[
    //         {x: 2861, y: 4395},
    //         {x: 6403, y: 4013},
    //         {x: 3260, y: 7986},
    //         {x: 640, y: 6252}
    //     ]];
    //     player.setROI(data);
    // };

    // document.getElementById('ROIdata').onclick = () =>{
    //     let result = player.getROIData();
    // };

    // document.getElementById('ROIsetNum').onclick = ()=> {
    //     let num = document.getElementById('ROINum').value;
    //     player.setPolygonNum(num);
    // }

    // document.getElementById('ROIChange1').onclick = ()=> {
    //     player.changeROIType('Polygon1');
    // }
    //
    // document.getElementById('ROIChange2').onclick = ()=> {
    //     player.changeROIType('Polygon2');
    // }
    //
    // document.getElementById('ROIChange3').onclick = ()=> {
    //     player.changeROIType('Polygon1Line1');
    // }
    //
    // document.getElementById('ROIChange4').onclick = ()=> {
    //     player.changeROIType('Line2');
    // }
</script>
</html>