如何在谷歌浏览器导入RTSP的视频流，要求：
1）不要说什么vlc插件了，不可以的
2）Streamedian可能成功，最好是这个
3）最好详细一点，博客的东西看了，模棱两可的看不懂
4）其他方法也可以
官网实例，下载个Streamedian.js就可以用
https://streamedian.com/#downloads
<!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" size="36">
<button id="set_new_url">Set</button>
</div>
<div>
<p style="color:#808080">Enter your rtsp link to the stream, for example: "rtsp://192.168.1.1:554/h264"</p>
</div>
<div>
<input id="buffer_duration" type="range" min="10" max="200" style="width:40%;">
<span id="buffer_value">120sec.</span>
</div>
<div>
<p style="color:#808080">Change buffer duration</p>
</div>
<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">live</button>
</div>
</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>
<br/><br/>
<script src="streamedian.min.js"></script> <!-- Path to player js-->
<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'));
};
sourcesNode.appendChild(nodeButton);
});
}
};
var playerOptions = {
socket: "你的websocket", redirectNativeMediaErrors : true,
bufferDuration: 30,
errorHandler: errHandler,
infoHandler: infHandler
};
console.log(playerOptions)
var html5Player = document.getElementById("test_video");
var urlButton = document.getElementById("set_new_url");
var urlEdit = document.getElementById("stream_url");
var bufferRange = document.getElementById("buffer_duration");
var bufferValue = document.getElementById("buffer_value");
var player = Streamedian.player('test_video', playerOptions);
console.log(player)
var nativePlayer = document.getElementById('test_video');
var range = document.getElementById('rate');
var set_live = document.getElementById('to_end');
var range_out = document.getElementById('rate_res');
range.addEventListener('input', function () {
nativePlayer.playbackRate = range.value;
range_out.innerHTML = `x${range.value}`;
});
set_live.addEventListener('click', function () {
range.value = 1.0;
range_out.innerHTML = `live`;
nativePlayer.playbackRate = 1;
nativePlayer.currentTime = nativePlayer.buffered.end(0);
});
var updateRangeControls = function(){
bufferRange.value = player.bufferDuration;
bufferValue.innerHTML = bufferRange.value + "sec.";
};
bufferRange.addEventListener('input', function(){
var iValue = parseInt(this.value, 10);
player.bufferDuration = iValue;
bufferValue.innerHTML = this.value + "sec.";
});
bufferRange.innerHTML = player.bufferDuration + "sec.";
updateRangeControls();
urlButton.onclick = ()=> {
setPlayerSource(urlEdit.value);
};
function setPlayerSource(newSource) {
player.destroy();
player = null;
html5Player.src = newSource;
player = Streamedian.player("test_video", playerOptions);
updateRangeControls();
}
}
</script>
<style>
body {
max-width: 720px;
margin: 50px auto;
}
#test_video {
width: 720px;
}
.controls {
display: flex;
justify-content: space-around;
align-items: center;
}
input.input, .form-inline .input-group>.form-control {
width: 300px;
}
.logs {
overflow: auto;
width: 720px;
height: 150px;
padding: 5px;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
}
button {
margin: 5px
}
</style>
</body>
</html>
VLC是一个不错的Chrome播放rtsp视频流方案，但是从2015年以后，Chrome等浏览器取消对NPAPI支持后，VLC就不能直接使用了。 而猿大师是一个独立浏览器外的中间件，底层调用VLC的ActiveX控件可实现在网页中内嵌播放多路RTSP的实时视频流，可以做到低延迟（300毫秒），支持H.264和H.265格式，兼容主流浏览器的老版本和最新版本。
猿大师官网：
VLC是一个不错的Chrome播放rtsp视频流方案，但是从2015年以后，Chrome等浏览器取消对NPAPI支持后，VLC就不能直接使用了。 而猿大师是一个独立浏览器外的中间件，底层调用VLC的ActiveX控件可实现在网页中内嵌播放多路RTSP的实时视频流，可以做到低延迟（300毫秒），支持H.264和H.265格式，兼容主流浏览器的老版本和最新版本。
猿大师官网：
转高版本Chrome等浏览器，可以用这个VLC网页内嵌小程序来播放RTSP视频流，而且延迟可以控制在500毫秒以内，而且支持多路同时播放：https://github.com/wangzuohuai/WebRunLocal/blob/master/Plugins/VlcWebPlayer/VlcPlayerApplet.txt
https://www.cnblogs.com/aleafo/p/3571926.html
这里有成熟的技术方案：https://github.com/wangzuohuai/WebRunLocal/blob/master/Plugins/VlcWebPlayer/VlcPlayerApplet.txt 可实现低延迟多路同时播放RTSP流。
VLC播放不是不可以，而且还可以充分利用本机硬件加速渲染播放，效果更佳，方法看这里：http://zorrosoft.com/files/VlcPlayerApplet.txt 演示视频：https://www.bilibili.com/video/bv1w5411V78i