Tinger
/
All


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>player</title>
    <script type="text/javascript" src="./src/SuperRender_20.js"></script>
    <style>
        .container {
            position: absolute;
            top: 0;
            left: 0;
        }

        #canvas {
            position: absolute;
        }
        .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: 170px;
          height: 170px;
          background: url("./image/siagn.png") no-repeat;
          background-size: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
      }
      body::-webkit-scrollbar {
          display: none;
      }
    </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%; z-index:999; background-color: transparent; overflow: hidden">
    <video id="video"></video>
    <div class="container">
        <canvas id="canvas"></canvas>
        <canvas id="videoCanvas"></canvas>
    </div>
    <canvas id="draw" ></canvas>
    <div class="sk-chase" id="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 src="./node_modules/file-saver/FileSaver.js"/> -->
<script src="./src/md5.js" type="text/javascript"></script>
<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(',');
    console.log(data);

    // 下标0 wsUrl, 1 rtspUrl, 2 canvas 宽度， 3 canvas高度

    let video = document.getElementById('video');
    let height = video.clientHeight;
    video.dblclick = function () {
    };
    // function onDocumentClick(event) {
    //     // 取消上次延时未执行的方法
    //     clearTimeout(clickTimeId);
    //     //执行延时
    //     clickTimeId = setTimeout(function() {
    //         //此处为单击事件要执行的代码
    //         console.log("鼠标单击");
    //     }, 250);
    // }

    // 设置高度宽度
    document.getElementById('canvas').width = data[2];
    document.getElementById('canvas').height = data[3];
    document.getElementById('videoCanvas').width = data[2];
    document.getElementById('videoCanvas').height = data[3];

    const options = {
        video: document.getElementById('video'),
        canvas: document.getElementById('canvas'),
        drawer: document.getElementById('draw'),
        wsUrl: '',
        rtspUrl: '',
        user: '',
        pwd: ''
    }

    options.wsUrl = data[0];
    options.rtspUrl = data[1];

    let player = new Player(options);
    player.init();
    player.on('error', function () {
        console.log('连接失败')
        let er = document.getElementById('error_text');
        er.style.display = 'block';

        let sk = document.getElementById('sk-chase');
        sk.style.display = 'none';
    });
    player.on('noStream', function () {
        console.log('noStream');
        player.close();
        player = null;
        player = new Player(options);
        player.init();
        player.connect();
    });

    player.on('canplay', function () {
        console.log('首次播放')
        //player.close();
    });

    player.on('initialCompleted', function () {
        let data = [[
            {x: 2861, y: 4395},
            {x: 6403, y: 4013},
            {x: 3260, y: 7986},
            {x: 640, y: 6252}
        ]];
        console.log('initialCompleted')
        player.setROI(data);
    });

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

    player.connect();

    let sk = document.getElementById('sk-chase');
    sk.style.display = 'none';

    // 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();
    //     console.log(result)
    // };
    //
    // document.getElementById('ROIsetNum').onclick = ()=> {
    //     let num = document.getElementById('ROINum').value;
    //     player.setPolygonNum(num);
    // }

    function onDocumenDblClick(event) {
       show = !show;
       let width = window.screen.width;
       let height = window.screen.height;
       let canvas = document.getElementById('canvas');
       if(show) {
         if (document.body.requestFullscreen) { //解决兼容性问题
           document.body.requestFullscreen();
         } else if (document.body.webkitRequestFullScreen) { //兼容谷歌 /Edge
           document.body.webkitRequestFullScreen();
         } else if (document.body.mozRequestFullScreen) { //Firefox
           document.body.mozRequestFullScreen();
         }else if(document.body.msRequestFullscreen){//ie
           document.body.msRequestFullscreen();
         }
         canvas.style.position = 'fixed';
         canvas.style.top = 0;
         canvas.style.left = 0;
         document.getElementById('canvas').width = width;
         document.getElementById('canvas').height = height;
         document.getElementById('videoCanvas').width = width;
         document.getElementById('videoCanvas').height = height;
       } else {
         if(document.exitFullscreen) {
           document.exitFullscreen();
         } else if(document.mozCancelFullScreen) {
           document.mozCancelFullScreen();
         } else if(document.webkitExitFullscreen) {
           document.webkitExitFullscreen();
         }else if(document.msExitFullscreen) {
           document.msExitFullscreen();
         }
         document.getElementById('canvas').width = data[2];
         document.getElementById('canvas').height = data[3];
         document.getElementById('videoCanvas').width = data[2];
         document.getElementById('videoCanvas').height = data[3];
       }


    }

    let cloc = 0;
    let show = false;
    document.getElementById('canvas').onclick = function (e) {
      e.preventDefault();
      cloc++;
      setTimeout(() => {
        cloc = 0;
      }, 500)
      if(cloc == 2) {
        onDocumenDblClick()
      }
    }


</script>
</html>