利用流媒体将RSTP流转成WEB端可播放（使用EasyDarwin）

待我称王封你为后i 2022-02-25 09:08 965阅读 0赞

个人测试成功如下（Windows环境）：

首先获取EasyDarwin：链接：[https://pan.baidu.com/s/1HdZxwHrw3H8B6Ur4ctYOOQ][https_pan.baidu.com_s_1HdZxwHrw3H8B6Ur4ctYOOQ]  提取码：y18u   
安装完成在计算机管理中可看到：

![20190401144508286.png][]

在安装目录中打开：

![20190401144550532.png][]

我的ini文件如下：

[http]
    port=10000
    default_username=admin
    default_password=admin
    
    [rtsp]
    port=10554
    
    ; rtsp 超时时间，包括RTSP建立连接与数据收发。
    timeout=28800
    
    ; 是否使能gop cache。如果使能，服务器会缓存最后一个I帧以及其后的非I帧，以提高播放速度。但是可能在高并发的情况下带来内存压力。
    gop_cache_enable=1
    
    ; 是否使能向服务器推流或者从服务器播放时验证用户名密码. [注意] 因为服务器端并不保存明文密码，所以推送或者播放时，客户端应该输入密码的md5后的值。
    ; password should be the hex of md5(original password)
    authorization_enable=0
    
    ; 是否使能推送的同事进行本地存储，使能后则可以进行录像查询与回放。
    save_stream_to_local=1
    
    ;easydarwin使用ffmpeg工具来进行存储。这里表示ffmpeg的可执行程序的路径
    ffmpeg_path=E:\tools\nginx\ffmpeg\bin\ffmpeg
    
    ;本地存储所将要保存的根目录。如果不存在，程序会尝试创建该目录。
    m3u8_dir_path=F:\record
    
    ;切片文件时长。本地存储时，将以该时间段为标准来生成ts文件(该时间+一个I帧间隔)，单位秒。
    ;如果需要直播，这个值设小点，但是这样会产生很多ts文件；如果不需要直播，只要存储的话，可设大些。
    ts_duration_second=3
    
    ;key为拉流时的自定义路径，value为ffmpeg转码格式，比如可设置为-c:v copy -c:a copy，表示copy源格式；default表示使用ffmpeg内置的输出格式，会进行转码。
    /stream_265=default

这里要去下载个FFmpeg，并且配置成ffmpeg\_path，下载链接：链接：https://pan.baidu.com/s/1btHQR4Ik3RKApjKPzvTUiw  提取码：2yl8 （直播需要）

本身的EasyDarwin有自己的接口文档：[http://localhost:10000/apidoc/][http_localhost_10000_apidoc]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70][]

所以可支持多语言，你只要发送HTTP请求即可。

这里先简单说下不用摄像头的rtsp的流：[海康、大华、星邦网络摄像头的 RTSP协议 地址与格式][RTSP_]

例如海康：rtsp://admin:worthsen123456@192.168.1.66:554/H.264/ch1/main/av\_stream

username: 用户名。例如admin。

password: 密码。例如worthsen123456。

ip: 为设备IP。例如 192.168.1.66。

port: 端口号默认为554，若为默认可不填写。

codec：有h264、MPEG-4、mpeg4这几种。

channel: 通道号，起始为1。例如通道1，则为ch1。

subtype: 码流类型，主码流为main，辅码流为sub。

我这边用的是JAVA,写的辅助工具类如下：

public class EasyDarwinUtils {
    
    	private static String serverAddress = localhost;//可自行修改
    	private static String serverPort = 10000;
    	private static String URL = serverAddress + ":" + serverPort;
    	private static final String PUSH = URL + "/api/v1/stream/start";
    	private static final String DELPUSH = URL + "/api/v1/stream/stop";
    	private static final String Find = URL + "/api/v1/pushers";
    
    	public static enum PassWAY {
    		TCP, UDP
    	}
    
    	public static enum FloatWay {
    		main, sub
    	}
    	
    	
    	public static final String stop(String id) {
    		String param = "id=" + id.replaceAll("\"", "");
    		try {
    			return sendGet(DELPUSH, param);
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	public static final String rtspUrl(String name, String pwd, String ip, int port, String code, String channel, FloatWay f) {
    		if (StringUtils.isBlank(name) || StringUtils.isBlank(pwd) || StringUtils.isBlank(ip)) {
    			return null;
    		}
    		if (port == 0) {
    			port = 554;
    		}
    		if (StringUtils.isBlank(code)) {
    			code = "h264";
    		}
    		if (StringUtils.isBlank(channel)) {
    			code = "ch1";
    		}
    		return "rtsp://" + name + ":" + pwd + "@" + ip + ":" + port + "/" + code + "/" + channel + "/" + f
    				+ "/av_stream";
    	}
    
    	public static final String start(String rtspUrl, String cumtomPath) {
    		return start(rtspUrl, cumtomPath, PassWAY.TCP);
    	}
    
    	public static final String start(String rtspUrl, String cumtomPath, PassWAY way) {
    		String param = "url=" + rtspUrl + "&customPath=" + cumtomPath + "&transType=" + way;
    		try {
    			return sendGet(PUSH, param);
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return "Path";
    	}
    
    	public static final String find(String rtsp) {
    		String param = "q=" + rtsp;
    		try {
    			return sendGet(Find, param);
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	private static String sendGet(String url, String param) throws UnsupportedEncodingException, IOException {
    		String result = "";
    		BufferedReader in = null;
    		HttpURLConnection conn = null;
    		String urlName = url + "?" + param;
    		System.out.println(urlName);
    		URL realUrl = new URL(urlName);
    
    		// 打开和URL之间的连接
    		conn = (HttpURLConnection) realUrl.openConnection();
    		// 设置通用的请求属性
    		conn.setRequestProperty("accept", "*/*");
    		conn.setRequestProperty("connection", "Keep-Alive");
    		conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
    		conn.setRequestProperty("Accept-Charset", "utf-8");
    		conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded;charset=" + "utf-8");
    		conn.setDoInput(true);
    		conn.setRequestMethod("GET");
    		// 建立实际的连接
    		conn.connect();
    		// 获取所有响应头字段
    		Map<String, List<String>> map = conn.getHeaderFields();
    		// 遍历所有的响应头字段
    //		for (String key : map.keySet()) {
    //			System.out.println(key + "--->" + map.get(key));
    //		}
    
    		// 定义BufferedReader输入流来读取URL的响应
    		in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "utf-8"));
    		String line;
    		while ((line = in.readLine()) != null) {
    			result += line;
    		}
    
    		return result;
    	}
    }

测试：

public static void main(String[] args) {
    		System.out.println(start("rtsp://admin:12345@192.168.1.64:554/h264/ch1/main/av_stream", "192.168.1.64/main"));
    	}

控制台打印的是推流的ID :

![20190401150119126.png][]

看下有没有成功：

![20190401150143803.png][]

VLC播放rtsp流的方法百度一下，我这边用的是VLC player：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70 1][]

可以看到我们已经成功的拿到流了，不过web端怎么显示呢？

省略曲折的过程，先看我代码怎么拼接的：

ipcEquipment.setEasySubUrl(ServerURL + "/record/" + ipcEquipment.getIp()+"/sub"+"/"+today+"/out.m3u8");
    ipcEquipment.setEasyUrl(ServerURL + "/record/" + ipcEquipment.getIp()+"/main"+"/"+today+"/out.m3u8");

实际上是："localhost:10000/record/" + cumtomPath +"/"+today+"/out.m3u8",

cumtomPath 是我们请求接口是带的参数，today的样式为YYYYMMDD（如今天20190401），然后利用video标签进行播放：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="wap-font-scale" content="no">
    	<title>videojs支持hls直播实例</title>
    	<link href="./video.css?v=bcd2ce1385" rel="stylesheet">
    
    	<style type="text/css">
    	    video{
    	            display: block;
    	            width: 100%;
    	            height: auto;
    	            border: 1px solid;
    	    }
    	    button{
    	            width: 150px;
    	            height: 50px;
    	            line-height: 50px;
    	            text-align: center;
    	            margin:30px auto;
    	            display: block;
    	    }
    	</style>
    </head>
    <body>
    
    	<video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
    	    <source src="http://192.168.1.5:10000/record/192.168.1.64/sub/20190401/out.m3u8"  type="application/x-mpegURL">
    	</video>
    
    	<button id="btn">play</button>
    
    	<script src="./video.js?v=fc5104a2ab23"></script>
    	<script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
    	
    	<script type="text/javascript">
    	    var myPlayer = videojs('roomVideo',{
    	        bigPlayButton : false,
    	        textTrackDisplay : false,
    	        posterImage: true,
    	        errorDisplay : false,
    	        controlBar : false
    	    },function(){
    	        console.log(this)
    	        this.on('loadedmetadata',function(){
    	            console.log('loadedmetadata');
    	            //加载到元数据后开始播放视频
    	            startVideo();
    	        })
    
    	        this.on('ended',function(){
    	            console.log('ended')
    	        })
    	        this.on('firstplay',function(){
    	            console.log('firstplay')
    	        })
    	        this.on('loadstart',function(){
    	        //开始加载
    	            console.log('loadstart')
    	        })
    	        this.on('loadeddata',function(){
    	            console.log('loadeddata')
    	        })
    	        this.on('seeking',function(){
    	        //正在去拿视频流的路上
    	            console.log('seeking')
    	        })
    	        this.on('seeked',function(){
    	        //已经拿到视频流,可以播放
    	            console.log('seeked')
    	        })
    	        this.on('waiting',function(){
    	            console.log('waiting')
    	        })
    	        this.on('pause',function(){
    	            console.log('pause')
    	        })
    	        this.on('play',function(){
    	            console.log('play')
    	        })
    
    	    });
    	    
    	    document.getElementById('btn').addEventListener('click', function(){
                    myPlayer.play();
            })
    
    
    	    var isVideoBreak;
    	    function startVideo() {
    
    	        myPlayer.play();
    
    	        //微信内全屏支持
    	        document.getElementById('roomVideo').style.width = window.screen.width + "px";
    	        document.getElementById('roomVideo').style.height = window.screen.height + "px";
    
    
    	        //判断开始播放视频，移除高斯模糊等待层
    	        var isVideoPlaying = setInterval(function(){
    	            var currentTime = myPlayer.currentTime();
    	            if(currentTime > 0){
    	                $('.vjs-poster').remove();
    	                clearInterval(isVideoPlaying);
    	            }
    	        },200)
    
    	        //判断视频是否卡住，卡主3s重新load视频
    	        var lastTime = -1,
    	            tryTimes = 0;
    	        
    	        clearInterval(isVideoBreak);
    	        isVideoBreak = setInterval(function(){
    	            var currentTime = myPlayer.currentTime();
    	            console.log('currentTime'+currentTime+'lastTime'+lastTime);
    
    	            if(currentTime == lastTime){
    	            	//此时视频已卡主3s
    	            	//设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
    	                myPlayer.currentTime(currentTime+10000);
    	                myPlayer.play();
    
    	                //尝试5次播放后，如仍未播放成功提示刷新
    	                if(++tryTimes > 5){
    	                    alert('您的网速有点慢，刷新下试试');
    	                    tryTimes = 0;
    	                }
    	            }else{
    	                lastTime = currentTime;
    	                tryTimes = 0;
    	            }
    	        },3000)
    
    	    }
    	</script>
    
    </body>
    </html>

JS百度即可。

然后用谷歌浏览器运行：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70 2][]

各项时间差如图，如果嫌延迟时间太长（20s都忍受不了的），可以再调节ini文件中的ts\_duration\_second参数（调小）

总的来说到此应该结束了。

在此感谢EasyDarwin的开源者！

欢迎沟通交流，告辞！

[https_pan.baidu.com_s_1HdZxwHrw3H8B6Ur4ctYOOQ]: https://pan.baidu.com/s/1HdZxwHrw3H8B6Ur4ctYOOQ
[20190401144508286.png]: /images/20220225/014366e0991441b99ee1ab7ba0686e00.png
[20190401144550532.png]: /images/20220225/c2c0bea7aad44fe08198211d3ef0fce4.png
[http_localhost_10000_apidoc]: http://localhost:10000/apidoc/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70]: /images/20220225/aeb0b98a827548fca34342e611aa364a.png
[RTSP_]: https://blog.csdn.net/qq_38880380/article/details/80652697
[20190401150119126.png]: /images/20220225/db3043f209ee4aa19966963b7b1d11e6.png
[20190401150143803.png]: /images/20220225/04efa60e3bda40a88399fa8f7be492c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70 1]: /images/20220225/cde9e467ff1446f282d3e9c6d76349fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDU0OTcz_size_16_color_FFFFFF_t_70 2]: /images/20220225/7fcd450839f948d7bb0bfce64810f43d.png