? ? ? ? 我在上一篇文章中提出一個使用憾咐澹康大華的監(jiān)視視頻在chrome中無插件顯示的辦法，也可以勉強事情特占，但是實際使用的過程中糙置，有很多問題，比較適合復(fù)雜環(huán)境中使用是目。
還有另外一個模式可以進行處理谤饭，那就是在瀏覽器直接播放rtsp的視頻文件。Streamedian是一套能夠讓瀏覽器免插件播放RTSP的項目懊纳。安裝了其官方的server端后有一個demo.
本方案最特殊的一點就是揉抵，非常簡單，只有一個springboot構(gòu)建的服務(wù)端嗤疯，連接RTSP的視頻源冤今，并通過WebSocket推送到瀏覽器上，沒有其他任何的服務(wù)等茂缚，可編程性非常高戏罢。不需要配置，根據(jù)測試脚囊，客戶單單機大概解碼8路的全高清沒問題龟糕。服務(wù)端轉(zhuǎn)發(fā)數(shù)據(jù)和網(wǎng)絡(luò)帶寬的關(guān)系換算就好了，1080P的全高清大概5M的帶寬悔耘。
根據(jù)測試讲岁，每個攝像頭的網(wǎng)絡(luò)流量在5M左右。這個也會有問題衬以，主要是可能造成瀏覽器崩潰缓艳，這個使用定時刷新頁面來處理。簡單的網(wǎng)絡(luò)環(huán)境基本可以完成不在使用其他的服務(wù)器了泄鹏。
客戶端如下：
前端可以：
<!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 + "=([^&]*)(&|$)"); // 構(gòu)造一個含有目標(biāo)參數(shù)的正則表達式對象
var r = window.location.search.substr(1).match(reg); // 匹配目標(biāo)參數(shù)
if (r != null)
return unescape(r[2]);
return null; // 返回參數(shù)值
}
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("播放器狀態(tài):"+playing);
//不知道為什么郎任，有的時候不自動播放，通過這個循環(huán)
//如果10秒鐘之內(nèi)都沒播放备籽，就自動執(zhí)行播放舶治。
count++;
if(!playing && count<=20){
player.start();
setTimeout(autoPlay,500);
//如果10秒鐘還有問題，刷新頁面
if(count===20){
window.location.href=window.location.href;
}
}
}
autoPlay();
});
</script>
</html>
