nginx+Ffmpeg+nginx-http-flv-module将接受到的rtmp视频流在html播放

最近调试个接口需要将接口返回的 " rtmp://ns8.indexforce.com/home/mystream "这个rtmp地址在html页面播放,因为现在各大浏览器都不支持flash插件了,所以这个rtmp需要转成html支持的格式才可以,我也是查了各种资料才发现可以用ffmpeg将视频流推到nginx上,再有nginx转成html支持的样式

1.首先要下载nginx和nginx-http-flv-module模板,这个没什么说的,大家可以参考下这个

六、nging-http-flv-module的使用_释然`的博客-优快云博客 1. 前言前面几章我们已经把基础环境都已经搭建完成,这一章我们通过使用 nginx-http-flv-module 搭建一个可以通过HTTP请求并且通过flv.js实现在HTML网页播放实时视频的应用场景。2. 安装nginx-http-flv-module模块2.1 简述nginx-http-flv-module是基于nginx-rtmp-module 的流媒体服务器。它具备了所有nginx-rtmp-module的功能,并且新增多种新功能,功能对比如下。功能nginx-http-flhttps://blog.youkuaiyun.com/Aarstg/article/details/122937043

nginx安装好后需要配置nginx.cof,关键的配置如下

rtmp {
    server {
        listen 1935;  # 接受推流的端口号
        chunk_size 8192; # 单一推流数据包的最大容量

application live {
            live on;
           record all;
            record_unique off;#是否再文件名中启用时间戳
            record_path "/usr/local/nginx/video";#视频缓存地址
            record_suffix .flv;#文件名后缀
        }
    }

}
    location / {
	add_header 'Access-Control-Allow-Origin' '*';
            root   html;
            index  index.html index.htm;
   }

# 无人机视频播放地址,flv
  location /live {
   flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
   add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
   add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   add_header 'Cache-Control' 'no-cache';
   }

我的整个的配置是这样的,大家只要把上面两个配置放到正确位置就可以了


worker_processes  1;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;  # 接受推流的端口号
        chunk_size 8192; # 单一推流数据包的最大容量?

        application mlive { # mlive 模块,可以自行更换名字
            live on; # 打开直播
            meta off; # 为了兼容网页前端的 flv.js,设置为 off 可以避免报错
            gop_cache on; # 支持GOP缓存,以减少首屏时间
            allow play all; # 允许来自任何 ip 的人拉流
        }

application live {
            live on;
           record all;
            record_unique off;#是否再文件名中启用时间戳
            record_path "/usr/local/nginx/video";#视频缓存地址
            record_suffix .flv;#文件名后缀
        }
    }
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen       1877;
        server_name  localhost;

        location / {
    add_header 'Access-Control-Allow-Origin' '*';
            root   html;
            index  index.html index.htm;
        }

# 无人机视频播放地址,flv
  location /live {
   flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
   add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
   add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   add_header 'Cache-Control' 'no-cache';
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }
}

2.下载安装Ffmpeg

应为我这边需要用Java操作,所以需要将Ffmpeg配置到Linux的环境变量中,还有一点是FFmpeg下载好后不要在本地解压后在上传至服务器,我的就是因为这种操作结果视频推流的时候报错.

可以参考下这个

视频处理软件 ffmpeg 在 Linux 成功安装 | 小白安装教程_墨理学AI的博客-优快云博客Linux 普通用户给自己安装 ffmpeg订阅号:墨理三生小白教程,感谢支持我的下载方式如下:打开软件主页:https://ffmpeg.org/download.html它会跳转到下面这个链接:https://launchpad.net/ubuntu/+source/ffmpeg再跳转到下一个链接之后,就可以下载了:编译安装操作如下(普通Linux用户即可安装):copy 上一步骤下载的 ffmpeg_4.3.1.orig.tar.xz 到我的个人用户 /h..https://blog.youkuaiyun.com/sinat_28442665/article/details/113034019因为我的是Java操作的,所以需要配置下环境变量,操作如下

ffmpeg命令报错: error while loading shared libraries: libavdevice.so.58: cannot open_reg183的博客-优快云博客原因分析:通过源码安装软件未进行环境变量配置,找不到启动路径解决方案:[root@localhost local]# vi /etc/ld.so.conf在文件中添加路径:/usr/local/ffmpeg/lib更新环境变量:[root@localhost local]# ldconfig加入全局环境变量路径:[root@localhost local]# vi /etc/profile在文件的最后中加入以下内容:export PATH="/usr/local/ffmpehttps://blog.youkuaiyun.com/chendongpu/article/details/123500084

Ffmpeg配置好后整个环境就搭建好了,可以用命令来看看视频是否能推流成功

ffmpeg -re -i rtmp://ns8.indexforce.com/home/mystream  -c  copy -f flv rtmp://192.168.1.101:1935/live/testv

这是将rtmp://ns8.indexforce.com/home/mystream(美国直播电视台)推给我的服务器上的nginx代理.

直接用html访转nginx转换后的地址就可以了http://192.168.1.101:1877/live?port=1935&app=live&stream=testv就可以了

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>flv播放页面</title>
<script type="text/javascript">
		$(document).ready(function() {
		});
        //这是当关闭页面或浏览器的时候调用后台的方法把进程给停掉
		window.onbeforeunload = function(e) {
			$.ajax({
				url:"${ctx}/zxjk/zxBasDevice/closeFfmpeg",
				type:"post",
				data:{
					"command":"${command}"
				},
				dataType:"json",
				async:true,
				success: function (data){
				}
			})
		}
	</script>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
        <video style="height: 400px;width: 600px;" id="videoElement" muted autoplay controls></video>
        <script>
            var flvPlayer = null;
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',                 
                    url: 'http://192.168.1.101:1877/live?port=1935&app=live&stream=testv'
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
            }
        </script>
    </body>
</html>

3.最后用Java代码操作linux命令

//启用ffmpeg并生成地址返回给html
public String toVideo(HttpServletRequest request,  Model model) {
		String rtmpurl= "rtmp://ns8.indexforce.com/home/mystream";
		if(StringUtils.isNotEmpty(rtmpurl)){
			List<String> commend = new ArrayList<String>();
			commend.add("ffmpeg");
			commend.add("-i");
			commend.add(rtmpurl);
			commend.add("-c");
			commend.add("copy");
			commend.add("-f");
			commend.add("flv");
			commend.add("rtmp://192.168.1.101:1935/live/testv");
			try {
				ProcessBuilder builder = new ProcessBuilder(); //创建系统进程
				builder.command(commend);
				builder.start();//启动进程
			} catch (Exception e) {
				e.printStackTrace();
			}
//页面访问的地址
		model.addAttribute("flvurl","http://192.168.1.101:1877/live?port=1935&app=live&stream=testv");
		return "modules/zxjk/zxBasDeviceVideo";
	}

	

	/**
	 * 查询关闭Linux进程
	 * @param command
	 * @return
	 * @throws Exception
	 */
	public String getPID(String command) throws Exception {
		logger.info("相关信息 -----------------------> " + command);
		BufferedReader reader = null;
		try {
			// 显示所有进程
			Process process = Runtime.getRuntime().exec("ps -ef");
			reader = new BufferedReader(new InputStreamReader(process.getInputStream()));
			String line = null;
			while ((line = reader.readLine()) != null) {
				if (line.contains(command)) {
					String[] strs = line.split("\\s+");
					logger.info(strs[1]+"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!找到有关进程:"+line);
					return strs[1];
				}else{
					String[] strs = line.split("\\s+");
					logger.info(strs[1]+">>>>>>>>>>>>>>>>>>>>>>>没有找到有关进程:"+line);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
			throw e;
		} finally {
			if (reader != null) {
				try {
					reader.close();
				} catch (IOException e) {

				}
			}
		}
		logger.info("找不到有关进程pid返回null");
		return null;
	}

	/**
	 * 关闭Linux进程
	 *
	 * @param Pid 进程的PID
	 */
	public void closeLinuxProcess(String Pid) {
		Process process = null;
		BufferedReader reader = null;
		try {
			// 杀掉进程
			logger.info("准备执行 kill -9 " + Pid);
			process = Runtime.getRuntime().exec("kill -9 " + Pid);
			reader = new BufferedReader(new InputStreamReader(process.getInputStream()));
			String line = null;
			while ((line = reader.readLine()) != null) {
				logger.info("kill PID return info -----> " + line);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if (process != null) {
				process.destroy();
			}

			if (reader != null) {
				try {
					reader.close();
				} catch (IOException e) {

				}
			}
		}
	}

关于项目所用到的所有的包我都放到了下面的地址上,可以直接拿去用

nginx+ffmpeg+nginx-http-flv-module+html资源包-Linux文档类资源-优快云下载

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值