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>
|