Ffmpeg+Node.js+jsmpeg.js实现html5播放rtsp

安装操作不做多说,网上有很多,这里我只简单说一下过程。

1、FFmpeg安装,地址:Download ffmpeg-latest-win32-static.zip free - FFmpeg

2、node.js下载地址:Node.js

3、jsmpeg下载地址:https://github.com/phoboslab/jsmpeg

安装中遇到问题:

1、webSocket模块安装,出现问题,用命令:

npm install ws -g

安装后,接着运行

node websocket-relay.js supersecret 8081 8082

如果出现如下错误:

 修改 ws模块安装命令,修改为(不要-g),成功解决问题:

npm install ws

这样再运行: node websocket-relay.js supersecret 8081 8082就不会出现问题。

接着运行ffmpeg,再打开一个命令行界面,输入如下命令:(这个视频流采用的是rtmp,可以直接替换成rtsp视频流的)

ffmpeg -i rtmp://58.200.131.2:1935/livetv/dftv -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret

接着就可以访问了,前端界面:

<!DOCTYPE html>
<html>
<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">
        html, body {
            background-color: #111;
            text-align: center;
        }
    </style>

</head>
<body>
   
   <canvas id="video-canvas" ></canvas>
    
    <script src="~/Scripts/jsmpeg-master/jsmpeg.min.js"></script>
    <script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://127.0.0.1:8082';
		var player = new JSMpeg.Player(url, {canvas: canvas});
    </script>
</body>
</html>

补充:websocket-relay.js,当初jsmpeg提供的websocket-relay.js好像有个变量写错了,应该是小写字母写成了大写,不知道我这个改了没有,仅供参考

var fs = require('fs'),
	http = require('http'),
	WebSocket = require('ws');

if (process.argv.length < 3) {
	console.log(
		'Usage: \n' +
		'node websocket-relay.js <secret> [<stream-port> <websocket-port>]'
	);
	process.exit();
}

var STREAM_SECRET = process.argv[2],
	STREAM_PORT = process.argv[3] || 8081,
	WEBSOCKET_PORT = process.argv[4] || 8082,
	RECORD_STREAM = false;

// Websocket Server
var socketServer = new WebSocket.Server({port: WEBSOCKET_PORT, perMessageDeflate: false});
socketServer.connectionCount = 0;
socketServer.on('connection', function(socket, upgradeReq) {
	socketServer.connectionCount++;
	console.log(
		'New WebSocket Connection: ',
		(upgradeReq || socket.upgradeReq).socket.remoteAddress,
		(upgradeReq || socket.upgradeReq).headers['user-agent'],
		'('+socketServer.connectionCount+' total)'
	);
	socket.on('close', function(code, message){
		socketServer.connectionCount--;
		console.log(
			'Disconnected WebSocket ('+socketServer.connectionCount+' total)'
		);
	});
});
socketServer.broadcast = function(data) {
	socketServer.clients.forEach(function each(client) {
		if (client.readyState === WebSocket.OPEN) {
			client.send(data);
		}
	});
};

// HTTP Server to accept incomming MPEG-TS Stream from ffmpeg
var streamServer = http.createServer( function(request, response) {
	var params = request.url.substr(1).split('/');

	if (params[0] !== STREAM_SECRET) {
		console.log(
			'Failed Stream Connection: '+ request.socket.remoteAddress + ':' +
			request.socket.remotePort + ' - wrong secret.'
		);
		response.end();
	}

	response.connection.setTimeout(0);
	console.log(
		'Stream Connected: ' +
		request.socket.remoteAddress + ':' +
		request.socket.remotePort
	);
	request.on('data', function(data){
		socketServer.broadcast(data);
		if (request.socket.recording) {
			request.socket.recording.write(data);
		}
	});
	request.on('end',function(){
		console.log('close');
		if (request.socket.recording) {
			request.socket.recording.close();
		}
	});

	// Record the stream to a local file?
	if (RECORD_STREAM) {
		var path = 'recordings/' + Date.now() + '.ts';
		request.socket.recording = fs.createWriteStream(path);
	}
})
// Keep the socket open for streaming
streamServer.headersTimeout = 0;
streamServer.listen(STREAM_PORT);

console.log('Listening for incomming MPEG-TS Stream on http://127.0.0.1:'+STREAM_PORT+'/<secret>');
console.log('Awaiting WebSocket connections on ws://127.0.0.1:'+WEBSOCKET_PORT+'/');

  • 1
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
你可以通过以下步骤来实现Java与RTSPFFmpegHTML和Nginx的结合来实现视频实时播放的监控系统: 1. 首先,你需要使用Java来创建一个监控系统的后端服务。你可以使用Java的网络编程库来监听RTSP流并将其解码。可以使用开源的库,例如JRTSP或者Xuggler来处理RTSP流,并将其转换为可供播放的视频流。 2. 接下来,你需要使用FFmpeg来处理视频流。FFmpeg是一个强大的多媒体处理工具,可以用于转码、解码、编码等操作。你可以使用FFmpeg来解码RTSP流,并将其转换为HTML5支持的视频格式,例如HLS(HTTP Live Streaming)或者MPEG-DASH(Dynamic Adaptive Streaming over HTTP)。 3. 在前端方面,你可以使用HTML和JavaScript来创建一个简单的视频播放器。你可以使用HTML5的<video>标签来嵌入视频,并使用JavaScript来控制视频的播放、暂停等操作。你可以使用一些开源的视频播放器库,例如video.js或者plyr来简化开发过程。 4. 最后,你可以使用Nginx作为反向代理服务器来提供视频流的分发和缓存功能。Nginx可以将视频流从后端服务器转发给前端浏览器,并且可以缓存视频文件以提高性能和可靠性。你可以配置Nginx来支持HLS或者MPEG-DASH协议,并且可以使用Nginx的HTTP模块来进行性能优化和安全加固。 综上所述,通过将Java、RTSPFFmpegHTML和Nginx结合起来,你可以实现一个监控视频的实时播放系统。这个系统可以从RTSP流中提取视频数据,经过FFmpeg处理后,通过HTML和JavaScript在浏览器中进行播放,并且可以使用Nginx提供性能优化和缓存支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值