FFmpeg解码RTSP流数据使用HTML+JSMPEG播放

最新推荐文章于 2024-07-17 12:40:03 发布

guo_stone

最新推荐文章于 2024-07-17 12:40:03 发布

阅读量3k

点赞数 1

文章标签： Java RTSP FFmpeg websocket

本文链接：https://blog.csdn.net/u011873646/article/details/103477541

版权

本文介绍了如何利用FFmpeg解码RTSP流，并通过自建的WebSocket服务器，将流数据传输到HTML页面，利用JSMPEG进行播放。尽管存在视频马赛克的问题，但详细代码可在作者的Git仓库中获取。

摘要由CSDN通过智能技术生成

先说思路

网上基本都是node.js+websocket-relay.js作为中继器，其实现原理就是将RTSP数据推送到websocket-relay的接口，再通过websockclient推到websocketserver，根据这个原理我做了个类似的程序，但是不完美，视频会时不时出现马赛克，一直没能找到解决办法。

webcam.html

<!DOCTYPE html>
<html>
<head>
	<title>视频</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width"/>
</head>
<body>
	<canvas id="video-canvas" width="480px" height="320px"></canvas>
	<script type="text/javascript" src="/js/jsmpeg.js"></script>
	<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript">
		debugger;
		var url = 'http://localhost:8080/webcam/stream';
		
		var param = {};
			param.requestType = 2;
			param.requestData = 'cam2';
			param.size = '480x320';
			param.streamType = 1
		$.ajax({
			type : 'get',
			url : url,
			dataType : 'text',
			data: param,
			beforeSend : function() {
			},
			complete : function() {
			},
			success : function(data, status) {
				result = data;
				debugger;
				var canvas = document.getElementById('video-canvas');
				var player = new JSMpeg.Player(data, {
					canvas : canvas
				});
			},
			error : function(err, err1, err2) {
				console.log(JSON.stringify(err) + '<br/>err1:'
						+ JSON.stringify(err1) + '<br/>err2:'
						+ JSON.stringify(err2));
			}
		});
	</script>

	
</body>
</html>

主程序

package platform;

import java.io.UnsupportedEncodingException;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import platform.util.MediaUtil;

@SpringBootApplication
public class Application {
	public static void main(String[] args) throws Exception {
		SpringApplication.run(Application.class, args);
		sendRequest();
	}
	public static void sendRequest() throws UnsupportedEncodingException {
		 MediaUtil.sendWebSocket("rtsp://admin:12345@10.11.4.111:554/Streaming/Channels", "D:/aaa.mp1");
//		 MediaUtil.sendWebSocket("rtsp://admin:12345@10.11.4.111:554/Streaming/Channels", "http://192.168.93.129:8081/123456");
	}
}

web端访问接口

package platform.controller;

import java.net.URI;
import java.util.Map;

import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.google.common.collect.Maps;

import lombok.Cleanup;
import platform.bean.RequestParam;
import platform.bean.ResultVO;
import platform.hikvision.HikvisionUtil;
import platform.properties.Path;
import platform.util.MediaUtil;
import platform.util.URLUtil;
import platform.websocket.WSClient;

@Controller
public class RelayController extends BaseController {

	public static Map<String, String> aliveMap = Maps.newHashMap();
	@Autowired
	private Path path;

	@PostMapping("/relay/push")
	public void pushStream(HttpServletRequest request, String code) {
		String url = path.getWs().concat("/").concat(code);
		try {

			WSClient wc = new WSClient(new URI(url));
			wc.connect();
			Thread.sleep(3 * 1000);
			@Cleanup
			ServletInputStream inputStream = null;
			byte[] rs = new byte[25];
			inputStream = request.getInputStream();