ffmpeg CCTV方案1-streamedian

原理：

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>

ffmpeg CCTV方案1-streamedian

猜你喜欢