mirror of
https://github.com/cnotch/ipchub.git
synced 2025-09-26 19:41:18 +08:00
156 lines
4.2 KiB
HTML
Executable File
156 lines
4.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>RTSP player example(based rtsp websockcet client)</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="sourcesNode"></div>
|
|
<div>
|
|
<input id="stream_url" value= "ws://localhost:1554/ws/test/live1" size="36">
|
|
<button id="load_url">load</button>
|
|
<button id="unload_url">unload</button>
|
|
</div>
|
|
<div>
|
|
<p style="color:#808080">Enter your ws link to the stream, for example: "ws://localhost:1554/ws/test/live1"</p>
|
|
</div>
|
|
<video id="test_video" controls autoplay>
|
|
<source src="rtsp://placehold" type="application/x-rtsp">
|
|
</video>
|
|
<div class="controls form">
|
|
<div>
|
|
<button id="to_end" class="btn btn-success">live(to end)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p>View HTML5 RTSP video player log</p>
|
|
<div id="pllogs" class="logs"></div>
|
|
<button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
|
|
<button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
|
|
<button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
|
|
<button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
|
|
</br></br>
|
|
|
|
<!-- <script src="jquery-1.9.1.js"></script> -->
|
|
<script>
|
|
var scrollStatPl = true;
|
|
var scrollStatWs = true;
|
|
var pllogs = document.getElementById("pllogs");
|
|
var wslogs = document.getElementById("wslogs");
|
|
|
|
// define a new console
|
|
var console=(function(oldConsole){
|
|
return {
|
|
log: function(){
|
|
oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
|
|
},
|
|
info: function () {
|
|
oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
|
|
},
|
|
warn: function () {
|
|
oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
|
|
},
|
|
error: function () {
|
|
oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
|
|
}
|
|
};
|
|
}(window.console));
|
|
|
|
function newConsole(args, textColor, backColor){
|
|
let text = '';
|
|
let node = document.createElement("div");
|
|
for (let arg in args){
|
|
text +=' ' + args[arg];
|
|
}
|
|
node.appendChild(document.createTextNode(text));
|
|
node.style.color = textColor;
|
|
node.style.backgroundColor = backColor;
|
|
pllogs.appendChild(node);
|
|
autoscroll(pllogs);
|
|
return text;
|
|
}
|
|
|
|
//Then redefine the old console
|
|
window.console = console;
|
|
|
|
function cleanLog(element){
|
|
while (element.firstChild) {
|
|
element.removeChild(element.firstChild);
|
|
}
|
|
}
|
|
|
|
function autoscroll(element){
|
|
if(scrollStatus(element)){
|
|
element.scrollTop = element.scrollHeight;
|
|
}
|
|
if(element.childElementCount > 1000){
|
|
element.removeChild(element.firstChild);
|
|
}
|
|
}
|
|
|
|
function scrollset(element, state){
|
|
if(state){
|
|
element.scrollTop = 0;
|
|
scrollChange(element, false);
|
|
} else {
|
|
element.scrollTop = element.scrollHeight;
|
|
scrollChange(element, true);
|
|
}
|
|
}
|
|
|
|
function scrollswitch(element){
|
|
if(scrollStatus(element)){
|
|
scrollChange(element, false);
|
|
} else {
|
|
scrollChange(element, true);
|
|
}
|
|
}
|
|
|
|
function scrollChange(element, status){
|
|
if(scrollStatus(element)){
|
|
scrollStatPl = false;
|
|
document.getElementById("scrollSetPl").innerText = "Scroll on";
|
|
} else {
|
|
scrollStatPl = true;
|
|
document.getElementById("scrollSetPl").innerText = "Scroll off";
|
|
}
|
|
}
|
|
|
|
function scrollStatus(element){
|
|
if(element.id === "pllogs"){
|
|
return scrollStatPl;
|
|
} else {
|
|
return scrollStatWs;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="rtsp.dev.js" ></script>
|
|
<script>
|
|
let videoElement = document.getElementById('test_video');
|
|
let loadButton = document.getElementById("load_url");
|
|
let unloadButton = document.getElementById("unload_url");
|
|
let urlEdit = document.getElementById("stream_url");
|
|
let rtspPlayer = rtspjs.createPlayer('test_video');
|
|
|
|
loadButton.onclick = ()=> {
|
|
rtspPlayer.load(urlEdit.value)
|
|
};
|
|
unloadButton.onclick = ()=> {
|
|
rtspPlayer.unload()
|
|
};
|
|
|
|
// 设置到实时视频
|
|
var set_live = document.getElementById('to_end');
|
|
set_live.addEventListener('click', function () {
|
|
videoElement.playbackRate = 1;
|
|
videoElement.currentTime = videoElement.buffered.end(0);//videoElement.seekable.end(videoElement.seekable.length - 1);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|