github.com/cnotch/ipchub@v1.1.0/demos/rtsp/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4      <meta charset="UTF-8">
     5      <title>RTSP player example(based rtsp websockcet client)</title>
     6  	<link rel="stylesheet" href="style.css">
     7  </head>
     8  <body>
     9  	<div id="sourcesNode"></div>
    10  	<div>
    11  		<input  id="stream_url" value= "ws://localhost:1554/ws/test/live1" size="36">
    12  		<button id="load_url">load</button>
    13  		<button id="unload_url">unload</button>
    14  	</div>
    15  	<div>
    16  		<p style="color:#808080">Enter your ws link to the stream, for example: "ws://localhost:1554/ws/test/live1"</p>
    17  	</div>	
    18  <video id="test_video" controls autoplay>
    19     <source src="rtsp://placehold" type="application/x-rtsp">
    20  </video>
    21  <div class="controls form">
    22      <div>
    23          <button id="to_end" class="btn btn-success">live(to end)</button>
    24      </div>
    25  </div>
    26  
    27  	<p>View HTML5 RTSP video player log</p>
    28  	<div id="pllogs" class="logs"></div>
    29  	<button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
    30  	<button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
    31  	<button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
    32  	<button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
    33  	</br></br>
    34  	
    35  <!-- <script src="jquery-1.9.1.js"></script> -->
    36  <script>
    37  	var scrollStatPl = true;
    38  	var scrollStatWs = true;
    39  	var pllogs = document.getElementById("pllogs");
    40  	var wslogs = document.getElementById("wslogs");
    41  
    42      // define a new console
    43      var console=(function(oldConsole){
    44  	    return {
    45  		    log: function(){
    46  				oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
    47  		    },
    48  		    info: function () {
    49  				oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
    50  		    },
    51  		    warn: function () {
    52  				oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
    53  		    },
    54  		    error: function () {
    55  				oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
    56  		    }
    57  	    };
    58      }(window.console));
    59  
    60      function newConsole(args, textColor, backColor){
    61  		let text = '';
    62  		let node = document.createElement("div");
    63  		for (let arg in args){
    64  		    text +=' ' + args[arg];
    65  		}
    66  		node.appendChild(document.createTextNode(text));
    67  		node.style.color = textColor;
    68  		node.style.backgroundColor = backColor;
    69  		pllogs.appendChild(node);
    70  		autoscroll(pllogs);
    71  		return text;
    72      }
    73  
    74      //Then redefine the old console
    75      window.console = console;
    76      
    77      function cleanLog(element){
    78  		while (element.firstChild) {
    79  		    element.removeChild(element.firstChild);
    80  		}
    81      }
    82  
    83      function autoscroll(element){
    84      	if(scrollStatus(element)){
    85  			element.scrollTop = element.scrollHeight;
    86  		}
    87  		if(element.childElementCount > 1000){
    88  			element.removeChild(element.firstChild);
    89  		}
    90      }
    91  
    92      function scrollset(element, state){
    93  		if(state){
    94  			element.scrollTop = 0;
    95  			scrollChange(element, false);
    96  		} else {
    97  			element.scrollTop = element.scrollHeight;
    98  			scrollChange(element, true);
    99  		}
   100      }
   101  
   102      function scrollswitch(element){
   103      	if(scrollStatus(element)){
   104      		scrollChange(element, false);
   105      	} else {
   106      		scrollChange(element, true);
   107      	}
   108      }
   109  
   110      function scrollChange(element, status){
   111  		if(scrollStatus(element)){
   112      		scrollStatPl = false;
   113      		document.getElementById("scrollSetPl").innerText = "Scroll on";
   114      	} else {
   115      		scrollStatPl = true;
   116      		document.getElementById("scrollSetPl").innerText = "Scroll off";
   117      	}
   118      }
   119  
   120      function scrollStatus(element){
   121      	if(element.id === "pllogs"){
   122      		return scrollStatPl;
   123      	} else {
   124      		return scrollStatWs;
   125      	}
   126      }
   127  </script>
   128  
   129  <script src="rtsp.dev.js" ></script>
   130  <script>
   131      let videoElement = document.getElementById('test_video');
   132  	let loadButton    = document.getElementById("load_url");
   133  	let unloadButton    = document.getElementById("unload_url");
   134  	let urlEdit      = document.getElementById("stream_url");
   135  	let rtspPlayer = rtspjs.createPlayer('test_video');
   136  
   137  	loadButton.onclick = ()=> {
   138  		rtspPlayer.load(urlEdit.value)
   139      };
   140  	unloadButton.onclick = ()=> {
   141  		rtspPlayer.unload()
   142      };
   143  	
   144  	// 设置到实时视频
   145  	var set_live = document.getElementById('to_end');
   146      set_live.addEventListener('click', function () {
   147          videoElement.playbackRate = 1;
   148          videoElement.currentTime = videoElement.buffered.end(0);//videoElement.seekable.end(videoElement.seekable.length - 1);
   149  	});
   150  	
   151  </script>
   152  
   153  </body>
   154  </html>
   155