xsh1997
/
smScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>player</title>
    <script type="text/javascript" src="./src/SuperRender_20.js"></script>
    <style>
        .container {
            position: relative;
        }

        #canvas {
            position: absolute;
        }
        #draw {
            position: absolute;
            top: 0;
            left: 0;
        }
        #video {
            position: absolute;
            top: 0;
            left: 0;
        }
        .close {
            width: 40px;
            height: 40px;
            background-image: url('./image/close.png') ;
            background-size: 100% 100%;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body style="text-align: center; margin: 0; z-index: 999; height: 100%;">
    <i class="close"></i>
    <video id="video"></video>
    <div class="container">
        <canvas id="canvas"></canvas>
        <canvas id="videoCanvas" width="900px" height="450px"></canvas>
    </div>
    <canvas id="draw" ></canvas>
</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";
    window.onload = function() {
        document.addEventListener('click', onDocumentClick);
        document.addEventListener('dblclick', onDocumenDblClick);
        let video = document.getElementById('videoCanvas');
        video.style.width = data[3];
    };
    var clickTimeId;
    let str  = location.href;
    let num = str.indexOf('?');
    str = str.substr(num+1);
    let data = str.split('&');
    let isShow = Number(data[0]);
    console.log(isShow);
    let key = data[4];
    const close = document.getElementsByClassName('close')[0];
    let video = document.getElementsByTagName('body')[0];
    console.log(video);
    video.dblclick = function () {
    };
    function onDocumentClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        //执行延时
        clickTimeId = setTimeout(function() {
            //此处为单击事件要执行的代码
            console.log("鼠标单击");
        }, 250);
    }
    close.onclick = function () {
      this.style.display = 'none';
      video.style.backgroundColor = 'transparent';
        window.parent.postMessage({
            cmd: 'returnDate',
            params: {
                key: '-1',
                isNone: true
            }
        }, '*');
    };
    function onDocumenDblClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        console.log("鼠标双击");
        if(isShow === 1) {
            console.log(2222);
            close.style.display = 'block';
            video.style.backgroundColor = '#0E1E51';
            // video.style.width = 1920 + 'px';
            // video.style.top = 0;
            // video.style.left = 0;
            window.parent.postMessage({
                cmd: 'returnDate',
                params: {
                    key: key,
                    isNone: false,
                }
            }, '*');
        }
    }

    const options = {
        video: document.getElementById('video'),
        canvas: document.getElementById('canvas'),
        drawer: document.getElementById('draw'),
        // wsUrl: 'ws://192.168.1.49:10080/camera_relay?tcpaddr=admin%3Ahm123456%40192.168.1.175',
        // rtspUrl: 'rtsp://admin:hm123456@192.168.1.175',
        user: '',
        pwd: ''
    };
    options.wsUrl = data[1];
    options.rtspUrl = data[2];
    console.log(options);
    let player = new Player(options);
    player.init();
    player.on('error', function () {
        console.log('连接失败')
    });
    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();
    });

    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();

    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);
    }
</script>
<script>
</script>
</html>