海康rtsp流使用ffmpeg+nginx转hls在h5页面上播放

最新推荐文章于 2024-07-01 17:03:58 发布

XinShun

最新推荐文章于 2024-07-01 17:03:58 发布

阅读量1.6k

点赞数

分类专栏：视频播放文章标签：视频播放

本文链接：https://blog.csdn.net/XinShun/article/details/108849500

版权

视频播放专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、参考https://blog.csdn.net/wenqiangluyao/article/details/97897794

2、命令行执行：注意：尽量不要有中文路径

ffmpeg -rtsp_transport tcp -i "rtsp://admin:12345@192.168.1.2:554/Streaming/Channels/101" -c copy -f hls -hls_time 2.0 -hls_list_size 20 -hls_wrap 15 D:/DEVTOOLS/RTSP/nginx-1.18.0/html/hls/test.m3u8

3、Nginx配置

nginx测试：http://192.168.1.5:8001/

修改配置文件：nginx/conf/nginx.conf
在http --> server下增加：

# ffmpeg生成hls流的http访问配置
location /hls {
	#若nginx\conf\mime.types中没有配置如下type，请加上，或直接在mime.types加
	#types{
	#	application/vnd.apple.mpegurl m3u8;
	#	application/x-mpegURL m3u8;
	#	video/mp2t ts;
	#}
	root html;
	#add_header Cache-Control no-cache;
	add_header Access-Control-Allow-Origin *;
}

4、vlc中播放

http://192.168.1.5:8001/hls/test.m3u8

5、html中播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放</title>
</head>
<body>
<div id="playercontainer"></div>
<p>本示例使用百度开源播放器cyberplayer，您也可以选用其他与实际业务贴合的支持HLS的web播放器</p>
<p>注：IE浏览器中建议不使用file协议打开，建议使用http协议打开</p>
<script type="text/javascript" src="./player/cyberplayer.js"></script>
<script type="text/javascript">
    /**
     * 本示例使用百度开源播放器cyberplayer，您也可以选用其他与实际业务贴合的支持HLS的web播放器
     * 注：IE浏览器中建议不使用file协议打开，建议使用http协议打开
     */
    var player = cyberplayer("playercontainer").setup({
        width: 680, // 宽度，也可以支持百分比（不过父元素宽度要有）
        height: 448, // 高度，也可以支持百分比
        title: 'demo示例', // 标题
        isLive: true, // 必须设置，表明是直播视频
		file: "http://192.168.1.5:8001/hls/test.m3u8",
        image: '', // 预览图
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
        controls: true, // 是否显示控制栏
        hls: {
            reconnecttime: 5 // hls直播重连间隔秒数
        },
        ak: "39f82ac87fc3462ea4dcc78734450f57" // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
    });
</script>
</body>
</html>

6、使用ckplayer播放，使用的是ckplayer X2; 重点在于html5m3u8: true，否则在google浏览器上，会提示没有启用flash插件

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        * {
            margin: 0px;
            padding: 0px;
        }
        .vlist {
            width: 100%;
        }
        #a1,.video {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
    <title></title>
</head>
 
<body>
    <div class="video" id="mvideo"></div>    
    <script type="text/javascript" src="/Content/js/ckplayer.js" charset="utf-8"></script>
    <script type="text/javascript">
        var m3u8Url = "http://192.168.1.2/hls/ch2/play.m3u8";
        var picUrl = "";
        var player = null;
		var videoObject = {
			container: '.video',
			variable: 'player',
			html5m3u8: true,
			video: m3u8Url
		};

		player = new ckplayer(videoObject);
	}
    </script>
</body>
</html>

7、使用hls.js播放，在有些不支持Video（比如钉钉）的上面，不能插入，而5，6可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放</title>
	<script src="./player/hls.js"></script>
<style>
h1 {
    display: none
}
body {
    margin: 0;
}
video {
    width: 100%;
    height: 100vh
}
</style>
</head>
<body>
<video id="video" style="width:680px;height:448px" controls></video>
<script type="text/javascript">    
	if (Hls.isSupported()) {
		var video = document.getElementById('video');
		var hls = new Hls();
		hls.loadSource('http://192.168.1.2/hls/ch2/play.m3u8');
		hls.attachMedia(video);
		hls.on(Hls.Events.MANIFEST_PARSED, function() {
			video.play();
		});
	}
</script>
</body>
</html>

8、总的效果，使用百度开源播放器cyberplayer比较理想

9、获取历史视频https://bbs.csdn.net/topics/391846900

rtsp://admin:111111@192.168.1.2:554/Streaming/tracks/101?starttime=20201028t063812z&endtime=20201028t064816z 
 /*表示以单播形式回放通道1 中的录像文件，时间范围是starttime 到endtime，其中starttime 和endtime 的格式要符合ISO 8601 。
 具体格式是YYYYMMDD”T”HHmmSS.fraction”Z” ，Y 是年，M 是月，D 是日，T 是时间分格符，H 是小时，M 是分，S 是秒，Z 是可选的、
 表示Zulu (GMT) 时间。*/

XinShun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
海康rtsp流使用ffmpeg+nginx转hls在h5页面上播放

1、参考https://blog.csdn.net/wenqiangluyao/article/details/978977942、命令行执行：ffmpeg -rtsp_transport tcp -i "rtsp://admin:12345@192.168.1.2:554/Streaming/Channels/101" -c copy -f hls -hls_time 2.0 -hls_list_size 20 -hls_wrap 15 D:/DEVTOOLS/RTSP/nginx-1.18.0
复制链接

扫一扫

专栏目录