不依赖flash,rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放(附带所用的工具下载)

最新推荐文章于 2024-07-09 14:05:01 发布

IrvingWs

最新推荐文章于 2024-07-09 14:05:01 发布

阅读量1.2w

点赞数 5

分类专栏： ffmpeg flv 文章标签： nginx rtmp ffmpeg rtsp java

本文链接：https://blog.csdn.net/weixin_43058421/article/details/116305110

版权

ffmpeg 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

flv

2 篇文章 0 订阅

订阅专栏

本文档介绍了如何将大华摄像头的rtsp视频流通过FFmpeg转换为rtmp和http-flv流，以适应现代浏览器的播放需求。通过配置nginx和flv.js，实现了在网页上流畅播放低延迟的视频流。同时，也提供了VLC播放器的播放示例。

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

需求背景

公司用到大华摄像头，大华提供了rtsp的视频流，目前浏览器已都不支持flash，所以转成rtmp流无法播放；转成m3u8格式虽然可以直接播放，但是延迟太高；最终决定将rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流，并通过flv.js在页面播放。

开发工具

FFmpeg：FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序，下载：http://www.ffmpeg.org/download.html；
flv.js：Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到Flash，由 bilibili 网站开源 https://www.oschina.net/p/flv-js?hmsr=aladdin1e1；
VLC播放器（测视频使用）下载：https://www.videolan.org/；
-nginx-http-flv：nginx集成nginx-http-flv-module这个模块，在发布rtmp的时候可以转化成支持HTTP方式的FLV 。下载nginx：https://nginx.org/download/nginx-1.16.1.tar.gz ；下载nginx-http-flv-module 模块包：https://github.com/winshining/nginx-http-flv-module；
编译好的-nginx-http-flv下载:https://download.csdn.net/download/weixin_43058421/18273744

配置nginx.conf

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

# 添加RTMP服务
rtmp {
    server {
        listen 1936; # 监听端口

        chunk_size 4000;
        application live {
            live on;
			gop_cache on;
        }
    }
}

# HTTP服务
http {
    server {
        listen       8085;
        server_name	 localhost;
		
		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';
        }
	}
}

ffmpeg命令

（实时流）：ffmpeg -i “rtsp://172.18.10.200:9090/dss/monitor/param?cameraid=1000298%240&substream=2” -vcodec copy -acodec copy -f flv “rtmp://127.0.0.1:1936/live/1000298”
在这里插入图片描述

rtmp播放地址：rtmp://127.0.0.1:1936/live/1000298
http-flv播放地址：http://127.0.0.1:8085/live?port=1936&app=live&stream=1000298

注意：如果使用flv.js播放流，那么请保证发布的流被正确编码，因为flv.js只支持H.264编码的视频和AAC/MP3编码的音频

前端播放flv.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
		<video id="videoElement" style="width: 80%;" controls="controls"></video>
		<script>
		    if (flvjs.isSupported()) {
		        var videoElement = document.getElementById('videoElement');
		        var flvPlayer = flvjs.createPlayer({
		            type: 'flv',
					url:'http://127.0.0.1:8085/live?port=1936&app=live&stream=1000298'
		        });
		        flvPlayer.attachMediaElement(videoElement);
		        flvPlayer.load();
		        flvPlayer.play();
		    }
		</script>
	</body>
</html>

flv.js播放视频

在这里插入图片描述

VLC播放视频

在这里插入图片描述

IrvingWs

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
8
评论
不依赖flash,rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放(附带所用的工具下载)

这里写自定义目录标题需求背景开发工具配置nginx.confffmpeg命令前端播放flv.jsflv.js播放视频VLC播放视频需求背景公司用到大华摄像头，大华提供了rtsp的视频流，目前浏览器已都不支持flash，所以转成rtmp流无法播放；转成m3u8格式虽然可以直接播放，但是延迟太高；最终决定将rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流，并通过flv.js在页面播放。开发工具FFmpeg：FFmpeg是一套可以用来记录、转换数字音频、视频，并
复制链接

扫一扫