我在上一篇文章中提出一个使用海康大华的监视视频在chrome中无插件显示的办法，也可以勉强事情，但是实际使用的过程中，有很多问题，比较适合复杂环境中使用。
还有另外一个模式可以进行处理，那就是在浏览器直接播放rtsp的视频文件。Streamedian是一套能够让浏览器免插件播放RTSP的项目。安装了其官方的server端后有一个demo.
本方案最特殊的一点就是，非常简单，只有一个springboot构建的服务端，连接RTSP的视频源，并通过WebSocket推送到浏览器上，没有其他任何的服务等，可编程性非常高。不需要配置，根据测试，客户单单机大概解码8路的全高清没问题。服务端转发数据和网络带宽的关系换算就好了，1080P的全高清大概5M的带宽。
根据测试，每个摄像头的网络流量在5M左右。这个也会有问题，主要是可能造成浏览器崩溃，这个使用定时刷新页面来处理。简单的网络环境基本可以完成不在使用其他的服务器了。
客户端如下：
前端可以：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RTSP player</title>
<style>
body {
margin: 0px auto;
}
#videoplayer {
width: 100%;
height:100%;
}
</style>
</head>
<body>
<video id="videoplayer" controls autoplay>
</video>
</body>
<script src="jquery-2.1.4.min.js"></script>
<script src="free.player.1.8.js"></script>
<script>
var player;
var rtspurl = "rtsp://admin:z1234567@192.168.4.165/cam/realmonitor?channel=1&subtype=0";
function getquery(name, url) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null)
return unescape(r[2]);
return null; // 返回参数值
}
let errHandler = function(err){
console.info(err.message);
};
let infHandler = function(inf) {
let clients = inf.clients;
for (let client in clients) {
clients[client].forEach((sources) => {
console.info(sources);
});
}
};
var videoplayer = document.getElementById("videoplayer");
var hostname = window.location.hostname;
var playerOptions = {
socket : "ws://" + hostname + ":9000/player",
redirectNativeMediaErrors : true,
bufferDuration : 5,
errorHandler: errHandler,
infoHandler: infHandler
};
function playRtsp(url) {
if (player) {
player.destroy();
player = null;
}
videoplayer.src = rtspurl;
player = Streamedian.player('videoplayer', playerOptions);
}
$(function() {
var camerid = getquery("id");
var playing=false;
var count=0;
var times = 1000 * 5 * 1;
playRtsp(rtspurl);
function autoPlay(){
playing=player.isPlaying();
console.info("播放器状态:"+playing);
//不知道为什么，有的时候不自动播放，通过这个循环
//如果10秒钟之内都没播放，就自动执行播放。
count++;
if(!playing && count<=20){
player.start();
setTimeout(autoPlay,500);
//如果10秒钟还有问题，刷新页面
if(count===20){
window.location.href=window.location.href;
}
}
}
autoPlay();
});
</script>
</html>
网友评论