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

程序员文章站 2024-01-16 20:32:16

...

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

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

ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]: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>