<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Streamedian RTSP player example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sourcesNode"></div>
<div>
<input id="stream_url" value="rtsp://admin:zdjq4710@192.168.1.64:554/h264/ch1/main/av_stream" size="36">
<button id="set_new_url">Set</button>
<div class="custom-control custom-switch">
<input type="checkbox" id="continuous_recording">
<label class="custom-control-label" for="customSwitch1">Continuous recording</label>
</div>
<video id="test_video" controls autoplay>
<!--<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov" type="application/x-rtsp">-->
<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov" type="application/x-rtsp">
</video>
<script src="streamedian.js"></script>
<div>
<p style="color:#808080">Enter your rtsp link to the stream, for example: "rtsp://192.168.1.1:554/h264"</p>
</div>
<div>
<span style="color:#808080">Change video file length of the continuous recording</span>
<input id="continuous_file_length" type="range" min="10000" max="200000" value="180000" step="1000" style="width:40%;">
<p id="continuous_file_length_label">180sec.</p>
</div>
<div>
<span style="color:#808080">Change video file length of the event recording</span>
<input id="event_file_length" type="range" min="10000" max="200000" value="180000" step="1000" style="width:40%;">
<p id="event_file_length_label">180sec.</p>
</div>
<div>
<span style="color:#808080">Change buffer duration</span>
<input id="buffer_duration" type="range" min="10" max="200" style="width:40%;">
<p id="buffer_value">120sec.</p>
</div>
<canvas id="video_canvas" width="0" height="0"></canvas>
<video id="test_video" controls autoplay>
<!--<source src="rtsp://192.168.10.205:554/ch01.264" type="application/x-rtsp">-->
<!--<source src="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" type="application/x-rtsp">-->
</video>
<div class="controls form">
<div>
Playback rate:
<input id="rate" class="input" type="range" min="0.5" max="5.0" value="1.0" step="0.5">
<output for="rate" id="rate_res">live</output>
</div>
<div>
<button id="to_end" class="btn btn-success" disabled>live</button>
<button id="event_recording" class="btn btn-success" disabled>Start recording</button>
</div>
</div>
<div>
<span style="color:#808080">Select a recorded file to playback</span>
<input id="file_input" type="file" accept=".mp4">
</div>
<p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: streamedian.player@gmail.com</p>
<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>
<button class="btn btn-success" onclick="statisticRequest('GET_INFO')">Get statistic</button>
<button class="btn btn-success" onclick="statisticRequest('SUBSCRIBE')">Subscribe statistic</button>
<br/><br/>
<b>How to use the player in the global network</b>
<p>
With an empty license file, you can only watch the stream on your computer locally (intranet).<br/>
If you would like to stream into the global network please take a key to activate the license.<br/>
You have personal 1 month validity key in the personal cabinet.<br/>
To activate key, please, use the activation application that is placed:
</p>
<p>
<b>Windows:</b> C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app<br/>
<b>Mac OS:</b> /Library/Application Support/Streamedian/WS RTSP Proxy Server/activation_app<br/>
<b>Linux (Ubunty, Debian, Centos, Fedora ):</b> /usr/bin/wsp/activation_app<br/>
</p>
<p>For more information go to <a href="https://streamedian.com/docs/">documentation</a></p>
<script src="libde265.js"></script>
<script src="h265.player.2.1.5.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>
if (window.Streamedian) {
let errHandler = function(err){
alert(err.message);
};
let infHandler = function(inf) {
let sourcesNode = document.getElementById("sourcesNode");
let clients = inf.clients;
sourcesNode.innerHTML = "";
for (let client in clients) {
clients[client].forEach((sources) => {
let nodeButton = document.createElement("button");
nodeButton.setAttribute('data', sources.url + ' ' + client);
nodeButton.appendChild(document.createTextNode(sources.description));
nodeButton.onclick = (event)=> {
setPlayerSource(event.target.getAttribute('data'));
};
streamedian_2.1.5.rar （14个子文件） 
streamedian_2.1.5 
free.player.1.8.7.js 348KB
favicon.png 2KB .idea .gitignore 184B workspace.xml 2KB misc.xml 367B streamedian_2.1.5.iml 344B modules.xml 293B h265 favicon.png 2KB libde265.js 1.19MB
index.html 18KB style.css 463B h265.player.2.1.5.js 354KB index.html 17KB style.css 463B
一只蜗牛儿
- 粉丝: 3162
- 资源: 47
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
- 适用于 Java 的 Chef 食谱.zip
- Simulink仿真快速入门与实践基础教程
- js-leetcode题解之179-largest-number.js
- js-leetcode题解之174-dungeon-game.js
- Matlab工具箱使用与实践基础教程
- js-leetcode题解之173-binary-search-tree-iterator.js
- js-leetcode题解之172-factorial-trailing-zeroes.js
- js-leetcode题解之171-excel-sheet-column-number.js
- 安卓开发从入门到精通基础教程
- js-leetcode题解之170-two-sum-iii-data-structure-design.js
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页