ffmpeg CCTV方案1-streamedian
阿新 • • 發佈:2018-12-02
原理:
streamedian實現了websocket中介軟體,作為websocket客戶端到rtsp協議的銜接。好處:
1. video on demand,只有觀看時才會產生流量,不需要一直轉碼
2. 實現瀏覽器中播放
Windows (不推薦)安裝:
1. 安裝 Streamedian WS RTSP Proxy Server 1.8 :https://streamedian.com
2. 安裝路徑為 :C:\Program Files\Streamedian
make sure services->Streamedian web socket service is running
3. host client-page 在 iis
穩定性非常差,除非只需要支援一個攝像頭,否則不建議使用。
ubuntu :
1. 下載安裝 from https://streamedian.com
2.
apt-install streamedian.deb
3. 修改 /etc/ws_rtsp.init 配置檔案:
[General] # websocket proxy listen port port=1111 #(change to your port) # path to license file license_path=/usr/share/wsp/wsp.lic # path to license server key license_server_key=/usr/share/wsp/wsp_server.pub # websocket proxy plugin dir plugin_path=/usr/lib/wsp/ [SockMap] # PRO version #name=/path/to/unix/socket [ACL] # PRO version # list of sources ip's to which proxy is allowed(or denied) to connect allow=127.0.0.1 #allow=192.168.0.0/24 #deny=127.0.0.1 # allow or deny default=allow
4. 啟動ws_rtsp websocket服務
service ws_rtsp start
5. 測試頁面html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Streamedian HTML5 RTSP player</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {
max-width: 1080px;
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>
</head>
<body>
<div>
<div class="row" >
<div class="col-md-12">
<input id="stream_url1" placeholder="rtsp://" value="rtsp://...">
<video id="test_video1" controls autoplay width="100%">
</video>
</div>
</div>
<div class="row">
</div>
<button id="set_new_url" onclick = "set_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>
<script src="free.player.1.8.js"></script> <!-- Path to pleer js-->
<script>
var wsUrl = "ws://ip:port/ws/";
function initCam(index){
var text1 = document.getElementById('stream_url'+index).value;
var v = document.getElementById("test_video"+index);
v.src = text1;
Streamedian.player('test_video'+index, {socket:wsUrl});
}
function set_url()
{
initCam(1);
}
</script>
<script>
// define a new console
var console=(function(oldConsole){
return {
log: function(){
let text = '';
let node = document.createElement("div");
for (let arg in arguments){
text +=' ' + arguments[arg];
}
oldConsole.log(text);
node.appendChild(document.createTextNode(text));
document.getElementById("logs").appendChild(node);
},
info: function () {
let text = '';
for (let arg in arguments){
text +='' + arguments[arg];
}
oldConsole.info(text);
},
warn: function () {
let text = '';
for (let arg in arguments){
text +=' ' + arguments[arg];
}
oldConsole.warn(text);
},
error: function () {
let text = '';
for (let arg in arguments){
text +=' ' + arguments[arg];
}
oldConsole.error(text);
}
};
}(window.console));
//Then redefine the old console
window.console = console;
function cleanLog(){
let node = document.getElementById("logs");
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
function scrollLog(){
console.warn("scroll");
let node = document.getElementById("logs");
node.scrollTop = node.scrollHeight;
}
</script>
<p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: [email protected]</p>
<p>View player log</p>
<div id="logs"></div>
<button class="btn btn-success" onclick="cleanLog()">clear</button><button class="btn btn-success" onclick="scrollLog()">scroll to end</button>
</body>
</html>