xsh1997
/
smScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>player</title>
</head>
<body style="text-align: center; margin: 0">
    <video  height="100%" id="video"></video>
    <canvas id="canvas" ></canvas>
    <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.getElementsByTagName('body')[0];
        video.style.height = 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 video = document.getElementsByTagName('body')[0];
    console.log(video);
    video.dblclick = function () {
    }
    function onDocumentClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        //执行延时
        clickTimeId = setTimeout(function() {
            //此处为单击事件要执行的代码
            console.log("鼠标单击");
        }, 250);
    }
    function onDocumenDblClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        console.log("鼠标双击");
        if(isShow === 1) {
            console.log(2222);
            window.parent.postMessage({
                cmd: 'returnDate',
                params: {
                    wsUrl: data[1],
                    rtspUrl: data[2]
                }
            }, '*');
        }
    }
	// let data = str.split('cameraOne=')[1];
	// let data1 = JSON.parse(data);
    const options = {
        video: document.getElementById('video'),
        canvas: document.getElementById('canvas'),
        drawer: document.getElementById('draw'),
        // wsUrl:'ws://115.238.57.190:10080/camera_relay?tcpaddr=admin%3Ahm123456%40192.168.1.123',
        // rtspUrl: 'rtsp://admin:hm123456@192.168.1.123',
        user: '',
        pwd: ''
    };
    options.wsUrl = data[1];
    options.rtspUrl = data[2];
    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);
    }

    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>
<script>
</script>
</html>